Card Group provides consistent spacing, accessible keyboard navigation, and selection modes to multiple Cards.
Overview
Card Group supports workflows and patterns using more than one Card. Cards within the Card Group are navigable via keyboard and are grouped visually. Through the use of opt-in selection modes, Card Group can facilitate interactive workflows with Cards.
Usage
- Selection workflows
- Filtering patterns
- Representing projects within an organization
- Representing content items within a group
Sample
<calcite-card-group label="Parking zones">
<calcite-card label="Downtown parking zone">
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/240/180">
<span slot="heading">Downtown parking zone</span>
<calcite-link slot="description">City of AcmeCo</calcite-link>
<div slot="footer-end">
<calcite-chip value="calcite chip" icon="check-circle" scale="s"></calcite-chip>
<calcite-chip value="calcite chip" icon="globe" scale="s"></calcite-chip>
<calcite-chip value="calcite chip" icon="security" scale="s"></calcite-chip>
</div>
<div slot="footer-start">
<calcite-chip value="calcite chip" icon="user" scale="s"></calcite-chip>
</div>
</calcite-card>
<calcite-card label="Westside parking zone">
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/240/180">
<span slot="heading">Westside parking zone</span>
<calcite-link slot="description">City of AcmeCo</calcite-link>
<div slot="footer-end">
<calcite-chip value="calcite chip" icon="globe" scale="s"></calcite-chip>
<calcite-chip value="calcite chip" icon="security" scale="s"></calcite-chip>
</div>
<div slot="footer-start">
<calcite-chip value="calcite chip" icon="user" scale="s"></calcite-chip>
</div>
</calcite-card>
<calcite-card label="Eastside parking zone">
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/240/180">
<span slot="heading">Eastside parking zone</span>
<calcite-link slot="description">City of AcmeCo</calcite-link>
<div slot="footer-end">
<calcite-chip value="calcite chip" icon="check-circle" scale="s"></calcite-chip>
<calcite-chip value="calcite chip" icon="globe" scale="s"></calcite-chip>
<calcite-chip value="calcite chip" icon="security" scale="s"></calcite-chip>
</div>
<div slot="footer-start">
<calcite-chip value="calcite chip" icon="user" scale="s"></calcite-chip>
</div>
</calcite-card>
<calcite-card label="Northwest parking zone">
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/240/180">
<span slot="heading">Northwest parking zone</span>
<calcite-link slot="description">City of AcmeCo</calcite-link>
<div slot="footer-end">
<calcite-chip value="calcite chip" icon="globe" scale="s"></calcite-chip>
<calcite-chip value="calcite chip" icon="security" scale="s"></calcite-chip>
</div>
<div slot="footer-start">
<calcite-chip value="calcite chip" icon="user" scale="s"></calcite-chip>
</div>
</calcite-card>
<calcite-card label="Northeast praking zone">
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/240/180">
<span slot="heading">Northeast parking zone</span>
<calcite-link slot="description">City of AcmeCo</calcite-link>
<div slot="footer-end">
<calcite-chip value="calcite chip" icon="check-circle" scale="s"></calcite-chip>
<calcite-chip value="calcite chip" icon="security" scale="s"></calcite-chip>
</div>
<div slot="footer-start">
<calcite-chip value="calcite chip" icon="user" scale="s"></calcite-chip>
</div>
</calcite-card>
</calcite-card-group>
Best practices
While similar to the Tile Group, a Card Group has distinct capabilities and intended use cases.
Card Groups contain an often variable quantity of Cards, whereas Tile Groups contain an often known and smaller quantity of Tiles.
Recommendations
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. Ensure each Card within a group has the same visual structure, slotted content, and metadata.
By default Cards will fill the width of their container. It is the responsibility of the developer to set and manage the width of the Card components - this may vary greatly depending on use case. At times, it may be beneficial to adjust the width of the Card component based on the size of the viewport.
Accessibility
Keyboard navigation
Key | Function |
---|---|
Tab | When a calcite-card is focused, moves focus to the first focusable element slotted within the component, if one exists. If no focusable element exists, focus moves to the next calcite-card . If focus is on the last focusable element within the component, focus moves through the next calcite-card . If the current focus is the last calcite-card , or the last focusable element within the last calcite-card , focus will leave the component. |
Tab and Shift | When a calcite-card is focused, moves focus to the previous calcite-card . If the current focus is the first calcite-card , focus will leave the component. |
Arrow left | When a calcite-card is focused, moves focus to the previous calcite-card . If the current focus is the first calcite-card , focus will return to the last calcite-card . |
Arrow right | When a calcite-card is focused, moves focus to the next calcite-card . If the current focus is the last calcite-card , focus will return to the first calcite-card . |
Space | When a calcite-card is focused, when selection is not "none" , selects the focused calcite-card . |
Enter | When a calcite-card is focused, when selection is not "none" , selects the focused calcite-card . |
Home | When a calcite-card is focused, moves focus to the component's first calcite-card . |
End | When a calcite-card is focused, moves focus to the component's last calcite-card . |
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 | |
selectedItems | Specifies the component's selected items. | Array<HTMLCalciteCardElement> | ||
selectionMode | selection-mode | Specifies the selection mode of the component. | "multiple" | "none" | "single" | "single-persist" | "none" |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding one or more calcite-card s. |
Styles
Name | Description |
---|---|
--calcite-card-group-gap | --calcite-card-group-space . Specifies the gap between slotted elements. |
--calcite-card-group-space | Specifies the space between slotted elements. |
Events
Name | Description | Behavior |
---|---|---|
calciteCardGroupSelect | Emits when the component's selection changes and the selectionMode is not none . |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
setFocus | Sets focus on the component's first focusable element. | setFocus(): Promise<void> |