Cards are presentational surfaces used to house data or information representing an entity, asset, or item.


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.


  • 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


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.


It is important to keep groups of Cards consistent in your application. For example, avoid mixing Cards that have images and Cards that do not have images within a Card Group. Ensure each Card within a group has the same visual structure, slotted content, and metadata.


Keyboard navigation

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





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