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. | true false | |
selectable | selectable | Indicates whether the card is selectable. | true false | |
selected | selected | Indicates whether the card is selected. | true false | |
thumbnailPosition | thumbnail-position | block-end block-start (default) inline-end inline-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. |