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 | When | A custom string | "Deselect" (default) |
| intlLoading | intl-loading | Accessible name when the component is loading. | A custom string | "Loading" (default) |
| intlSelect | intl-select | When | A custom string | "Select" (default) |
| loading | loading | When | A boolean property | truefalse |
| selectable | selectable | When | A boolean property | truefalse |
| selected | selected | When | A boolean property | truefalse |
| thumbnailPosition | thumbnail-position | Sets the placement of the thumbnail defined in the | Choose from a set of typed values | block-endblock-start (default)inline-endinline-start |
Events
| Name | Description | Detail |
|---|---|---|
| calciteCardSelect | Fires when | void |
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 subtitle or short summary. |
| thumbnail | A slot for adding a thumbnail to the component. |
| title | A slot for adding a title. |