Card

Cards are rectangular containers that can have images, buttons, and other custom content within.

Overview

Cards are containing rectangles that have many slots available to hold your dynamic content. Cards can be handy in creating uniform groups of content for the user to quickly browse or link to other pages.

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 group.

Be mindful of your content's copy length, as Cards are intended to be scannable slices of the content they represent.

Usage

  • A snapshot of content for data, documentation, or maps
  • A succinct preview of content with links and a description
  • Groups of content for scan-ability
  • As marketing style visuals to draw focus

Sample

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

Events

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