Card
Calcite Cards are rectangular containers that can have images, buttons, and other custom content within.
Overview
Cards are essentially containing rectangles that have a slot for just about any type of content. They can be handy in creating uniform groups of content for the user to quickly browse or link to other pages.
It is important to keep groups of Cards consistent in your application. For example: avoid mixing Cards that have images and Cards that do not have images within a group.
Be mindful of copy length. Cards are intended to be scannable slices of the content they represent.
Usage
- Snapshot of content for data, documentation, or maps
- Succinct preview of content with links and a description
- Groups of content for scan-ability
- As marketing style visuals to draw focus
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Move focus to next non-disabled item. If the currently focused item is the last item, the focus will leave the component |
Tab and Shift | Move focus to previous non-disabled item. If the currently focused item is the first item, the focus will leave the component |
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| intlDeselect | intl-deselect | string to override English deselect text for checkbox when selectable is true | "Deselect" (default) | |
| intlLoading | intl-loading | string to override English loading text | "Loading" (default) | |
| intlSelect | intl-select | string to override English select text for checkbox when selectable is true | "Select" (default) | |
| loading | loading | When true, the cards content is waiting to be loaded. This state shows a busy indicator. | truefalse | |
| selectable | selectable | Indicates whether the card is selectable. | truefalse | |
| selected | selected | Indicates whether the card is selected. | truefalse | |
| thumbnailPosition | thumbnail-position | block-endblock-start (default)inline-endinline-start |
Events
| Name | Description | Detail |
|---|---|---|
| calciteCardSelect | Fired when a selectable card is selected | any |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding subheader/description content. |
| footer-leading | A slot for adding a leading footer. |
| footer-trailing | A slot for adding a trailing footer. |
| subtitle | A slot for adding a card subtitle or short summary. |
| thumbnail | A slot for adding a thumbnail to the card. |
| title | A slot for adding a card title. |