<cla-card-media>
Card media - slot into the top of the card and holds the component or the component as well as a slot for text or a status badge in the top left.
This component is designed to slot into the top section of a card. It can hold either the cla-card-image component or the cla-card-figure component.
Additionally, it includes a dedicated slot for placing text or a cla-badge in the top-left corner.
You can remove the media underline using the .no-border styleclass.
Usage
Properties
| Property | Required | Description | Type | Default |
|---|---|---|---|---|
bgcolor | false | The placeholder background colour The default uses Claromentis' product theme primary colour variable in the first instance If the component is used in a project without this variable it will default to white. | string | 'var(--theme-primary-color, var(--white))' |
height | false | Height of card-media panel i.e. 100px/10vh/5rem etc - if no height is applied the standard height is 165px, set to auto when using the preserveaspect attribute on cla-card-image | string | null |
iconcolor | false | The placeholder icon colour The default uses Claromentis' product theme primary colour contrast variable in the first instance If the component is used in a project without this variable it will default to 'var(--gray-900)'. | string | 'var(--theme-primary-color-contrast, var(--gray-900))' |
placeholder | false | Placeholder icon - this can be either a Glyphicon or an Ionicon In the case of glyphicons us the 'glyphicons-...' class In the case of the Ionicon use the name attribut of the icon e.g 'hourglass-outline' This prop is not compatible with preserveaspect | string | null |
preserveaspect | false | Set as 'true' to preserve the aspect ratio of the uploaded image | boolean | false |
styleclass | false | Additional styling classes if needed; | string | '' |
Slots
| Slot | Description |
|---|---|
| any | Holds a cla-card-figure or cla-card-image |
status | holds text or cla-badge component to show the status of a card |