Cards
A cn-card is a fixed container for a piece of content. It can be used to display a
small amount of information, or to highlight a piece of content.
With some text
Elevation
The cards support 5 levels of elevation (starting from 0). The default elevation of a card is 1.
UI states
The card supports 3 UI states: default, notify, and alert.
Full example
This is a card. It can be used to display a small amount of information, or to highlight a piece of content.
Using more than 1-3 short paragraphs of text is not recommended. The text in these paragraphs is .small.
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
elevation | Number | 1 | The elevation of the card. |
cover | String | undefined | The URL of the cover image. |
noun | String | undefined | The noun of the card. |
title | String | ” | The title of the card. |
href | URL | ” | The URL to link to when the card title or cover is clicked. |
Slots
| Slot | Description |
|---|---|
default | Any content in the default slot will be rendered in the card body. The card body should be used sparingly for extract and synopsis purposes - and should consists one or more of paragraphs of text |
actions | The actions to display at the bottom of the card. |