Cards are presentational surfaces used to house data or information representing an entity, asset, or item.
Overview
Cards are most often presented in a Card Group. An individual Card may contain details or information about an instance within a set. Because Cards are most typically presented in groups, they are intended to be visually consistent and predictable in their layout and content.
Cards offer a variety of slots to accommodate various layouts.
Use the heading and description slots to provide a consistent text lockup to represent the content of the Card. Use the thumbnail slot to provide a visual representation of the content. The footer-start and footer-end slots can be used to provide primary and supplemental actions related to the Card. If needed, additional content can be placed in the default slot.
Usage
- To represent individual items in a set of content
- A snapshot of content representing a layer, map, or item
- A succinct preview of an entity or asset
Sample
Best practices
While visually similar to the Tile, a Card has distinct capabilities and intended use cases. Cards may contain one or many individually focusable elements, whereas a Tile is a single focusable element and should not contain any slotted interactive elements.
Comparison
Recommendations
Because Cards can contain one or more focusable element, they are well suited for representing a set of items or entities. Cards may contain a variety of content, including links to one or multiple associated views or pages, images, and actions.
It is important to keep groups of Cards visually consistent within a view or workflow. For example, avoid mixing Cards that have images and Cards that do not have images within a single Card Group. Ensure each Card within a group has a consistent visual structure and similar slotted content.
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. If the currently focused element is the last, the focus will leave the component. |
Tab and Shift | Moves focus to the previous focusable element. If the currently focused element is the first, the focus will leave the component. |
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | false |
| label | label | Accessible name for the component. | string | |
| loading | loading | When true, a busy indicator is displayed. | boolean | false |
| messageOverrides | Use this property to override individual strings used by the component. | Record<string, unknown> | ||
| selectable | selectable | selectionMode property on a parent calcite-card-group instead.true, the component is selectable. | boolean | false |
| selected | selected | When true, the component is selected. | boolean | false |
| thumbnailPosition | thumbnail-position | Sets the placement of the thumbnail defined in the thumbnail slot. | "block-end" | "block-start" | "inline-end" | "inline-start" | "block-start" |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding content. |
| title | heading instead. A slot for adding a heading. |
| subtitle | description instead. A slot for adding a description. |
| thumbnail | A slot for adding a thumbnail. |
| heading | A slot for adding a heading. |
| description | A slot for adding a description. |
| footer-start | A slot for adding a leading footer. |
| footer-end | A slot for adding a trailing footer. |
Styles
| Name | Description |
|---|---|
| --calcite-card-accent-color-selected | Specifies the component's accent color when selected. |
| --calcite-card-background-color | Specifies the component's background color. |
| --calcite-card-border-color | Specifies the component's border color. |
| --calcite-card-corner-radius | Specifies the component's corner radius. |
| --calcite-card-selection-background-color-active | --calcite-card-selection-background-color-press. Specifies the component's selection element background color when active. |
| --calcite-card-selection-background-color-hover | Specifies the component's selection element background color when hovered. |
| --calcite-card-selection-background-color-press | Specifies the component's selection element background color when active. |
| --calcite-card-selection-background-color-selected | --calcite-card-background-color. Specifies the component's selection element icon color when selected. |
| --calcite-card-selection-background-color | --calcite-card-background-color. Specifies the component's selection element background color. |
| --calcite-card-selection-color-hover | Specifies the component's selection element color when hovered or focused. |
| --calcite-card-selection-color | Specifies the component's selection element color. |
| --calcite-card-selection-icon-color-hover | --calcite-card-selection-color-hover. Specifies the component's selection element icon color when hovered. |
| --calcite-card-selection-icon-color-selected | --calcite-card-accent-color-selected. Specifies the component's selection element icon color when selected. |
| --calcite-card-selection-icon-color | --calcite-card-selection-color. Specifies the component's selection element icon color. |
| --calcite-card-shadow | Specifies the component's shadow. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteCardSelect | Fires when the deprecated selectable is true, or selectionMode set on parent calcite-card-group is not none and the component is selected. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
| setFocus | Sets focus on the component. | setFocus(options?: FocusOptions): Promise<void> |