cla-card-media

Card media - slot into the top of the card and holds the card-image component or the card-figure component as well as a slot for text or a status badge in the top left.

Usage

<cla-card-media slot="media">
content goes in here
</cla-card-media>

You can remove the media underline using the following styleclass: .no-border

Properties

Property	Attribute	Description	Type	Default
`bgcolor`	`bgcolor`	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`	`height`	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`	`undefined`
`iconcolor`	`iconcolor`	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`	`placeholder`	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`	`undefined`
`preserveaspect`	`preserveaspect`	Set as 'true' to preserve the aspect ratio of the uploaded image	`boolean`	`false`
`styleclass`	`styleclass`	Additional styling classes if needed;	`string`	`''`

Slots

Slot	Description
	Holds a cla-card-figure or cla-card-image
`"status"`	holds text or cla-badge component to show the status of a card

Dependencies

Depends on

ion-icon

Graph

graph TD;
  cla-card-media --> ion-icon
  style cla-card-media fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS