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
<calcite-card>
<span slot="heading">City-owned golf courses</span>
<span slot="description">Department of Recreation - Municipality of Acme</span>
<div slot="footer-start">
<calcite-chip value="calcite chip" kind="brand" icon="clock-forward">
Recent
</calcite-chip>
</div>
<div slot="footer-end">
<calcite-chip value="calcite chip" icon="walking">
Recreation
</calcite-chip>
</div>
</calcite-card>
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. | {
select?: string;
loading?: string;
} | ||
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(): Promise<void> |