component-library | Claromentis Design

<cla-card>

Card component which is designed to work with a range of custom components.

Standard HTML elements can be nested as well and will appear in the card body.

You can truncate the text in the title or text using the .truncate-title and/or .truncate-text style classes.

Usage

<cla-card href="https://design.claromentis.net" statusborder="var(--green-500)">
  <h1>A Card Title</h1>
  <p>Generic card text</p>
</cla-card>

<cla-card href="https://design.claromentis.net" statusborder="var(--green-500)">
  <h1>A Card Title</h1>
  <p>Generic card text</p>
</cla-card>

Property	Required	Description	Type	Default
`href`	`false`	Card link - attached to card title and media slot	`string`	`null`
`statusborder`	`false`	Status border - if the card has a status border you can set the colour here e.g. "#000";	`string`	`null`
`styleclass`	`false`	Style Class - adds class to the card for styling and rounded corners	`string`	`null`

Slot	Description
`cardtop`	Allows for content at the top of the card including figures, images and headers.
`footer`	Allows a footer to be added to the card.
`menu`	Allows a menu to be added.
`none`	This is the main content of the card