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

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.

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.

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 within a single Card Group. Ensure each Card within a group has the same visual structure, slotted content, and metadata.

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

Slots

Styles

Events

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