Card

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

3 samples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
v3.0.3

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

CardThis component
Most often used to represent a single entity or item that is part of a group.
Can contain custom content and supports multiple slotted focusable elements.
TileAlternative
Best used to represent one of a limited number of options, actions, or choices.
The component is wholly focusable - it may not contain slotted focusable elements.

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

KeyFunction
TabMoves focus to the next focusable element. If the currently focused element is the last, the focus will leave the component.
Tab and ShiftMoves focus to the previous focusable element. If the currently focused element is the first, the focus will leave the component.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
labellabelAccessible name for the component.string
loadingloadingWhen true, a busy indicator is displayed.booleanfalse
messageOverridesUse this property to override individual strings used by the component.{ select?: string; loading?: string; }
selectableselectable
deprecateduse selectionMode property on a parent calcite-card-group instead.
When true, the component is selectable.
booleanfalse
selectedselectedWhen true, the component is selected.booleanfalse
thumbnailPositionthumbnail-positionSets the placement of the thumbnail defined in the thumbnail slot."block-end" | "block-start" | "inline-end" | "inline-start""block-start"

Slots

NameDescription
default (unnamed)A slot for adding content.
title
deprecated use heading instead. A slot for adding a heading.
subtitle
deprecated use description instead. A slot for adding a description.
thumbnailA slot for adding a thumbnail.
headingA slot for adding a heading.
descriptionA slot for adding a description.

Styles

NameDescription
--calcite-card-accent-color-selectedSpecifies the component's accent color when selected.
--calcite-card-background-colorSpecifies the component's background color.
--calcite-card-border-colorSpecifies the component's border color.
--calcite-card-corner-radiusSpecifies the component's corner radius.
--calcite-card-selection-background-color-active
deprecated Use --calcite-card-selection-background-color-press. Specifies the component's selection element background color when active.
--calcite-card-selection-background-color-hoverSpecifies the component's selection element background color when hovered.
--calcite-card-selection-background-color-pressSpecifies the component's selection element background color when active.
--calcite-card-selection-background-color-selected
deprecated Use --calcite-card-background-color. Specifies the component's selection element icon color when selected.
--calcite-card-selection-background-color
deprecated Use --calcite-card-background-color. Specifies the component's selection element background color.
--calcite-card-selection-color-hoverSpecifies the component's selection element color when hovered or focused.
--calcite-card-selection-colorSpecifies the component's selection element color.
--calcite-card-selection-icon-color-hover
deprecated Use --calcite-card-selection-color-hover. Specifies the component's selection element icon color when hovered.
--calcite-card-selection-icon-color-selected
deprecated Use --calcite-card-accent-color-selected. Specifies the component's selection element icon color when selected.
--calcite-card-selection-icon-color
deprecated Use --calcite-card-selection-color. Specifies the component's selection element icon color.
--calcite-card-shadowSpecifies the component's shadow.

Events

NameDescriptionBehavior
calciteCardSelectFires when the deprecated selectable is true, or selectionMode set on parent calcite-card-group is not none and the component is selected.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.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