Card Group

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

3 samples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<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>
v3.0.3

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.

Do use Card Group to represent items in a set, such as projects within an organization.
Do ensure content within each Card within a Card Group is consistent and related to the item it represents.
Avoid using Cards to represent a known quantity of items, such as user preferences.

Accessibility

Keyboard navigation

KeyFunction
TabWhen 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 ShiftWhen 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 leftWhen 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 rightWhen 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.
SpaceWhen a calcite-card is focused, when selectionMode is not "none", selects the focused calcite-card.
EnterWhen a calcite-card is focused, when selectionMode is not "none", selects the focused calcite-card.
HomeWhen a calcite-card is focused, moves focus to the component's first calcite-card.
EndWhen a calcite-card is focused, moves focus to the component's last calcite-card.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
labelrequiredlabelAccessible name for the component.string
selectedItemsread-onlySpecifies the component's selected items.Array<HTMLCalciteCardElement>
selectionModeselection-modeSpecifies the selection mode of the component."multiple" | "none" | "single" | "single-persist""none"

Slots

NameDescription
default (unnamed)A slot for adding one or more calcite-cards.

Styles

NameDescription
--calcite-card-group-gap
deprecated Use --calcite-card-group-space. Specifies the gap between slotted elements.
--calcite-card-group-spaceSpecifies the space between slotted elements.

Events

NameDescriptionBehavior
calciteCardGroupSelectEmits when the component's selection changes and the selectionMode is not none.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component's first focusable element.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close