Card

 

A card is a surface that displays content and actions on a single topic.

Overview

A card is a foundational, customizable surface that can present any content type. While customizable, it’s meant to be an entry point or navigation to one app, experience, or topic.

Anatomy

null
  1. Drop shadow: To show the elevation of the surface.
  2. Surface: Contains the header, content area, and footer. Clickable and interactive for the clickable variant.
  3. Header: Can contain an overline (optional), an image, icon, or logo (optional), a title (optional), and an overflow menu (optional).
  4. Content area: Contains support copy (optional) or optional components.
  5. Footer: Contains the action (optional) for the default variant.

Demo

Open the component in Figma.

 

When to use

Use a card when you need an entry point to one app, experience, or topic.

  • Generally, use multiple cards to present all related entry points. For example, tiles on the end-user dashboard, OIN integrations, or available authenticators.
null

 

When not to use

Use another component for scenarios when:

  • You need to reveal more content, including secondary information, without navigating from the same screen or page.

Use an accordion instead:

To allow the component to expand and share additional content on the same screen.

Use a drawer instead:

To provide information and actions contextual to the page and the workflow.

  • You need to include multiple related topics or actions. An Odyssey widget component will be developed.
null

 

Variants

Default

For cards that include a button and/or overflow menu.

null

 

Clickable

For cards that don’t need a button to make the action clear, the entire tile is clickable. Due to accessibility concerns, clickable cards can’t contain separate internal CTAs.

null

 

 

Behaviors

 

States

Default

When a card is live but a user is not directly interacting with it.

Hover

When a user hovers over the card with the cursor to interact with it.

Focus

When a user has successfully navigated to the card with a cursor or keyboard action.

Selected

When a user enters or clicks on the clickable card or an action of the default card.

Disabled

When the user isn’t allowed to interact with a card due to permissions, dependencies, or prerequisites.

Actions

Overflow menu

An overflow menu contains related actions. It is placed in the upper-right of a default card.

Layout

Cards have flexible layouts and dimensions based on the context of the screen.

  • Their layout is reliant on grid (layout component in progress).
  • Card elevation is expressed by the surface.

Size

Card height and width are determined by the container, either a layout component or template.

  • Cards expand or contract to fill the space available.
  • Content in the header or content area will truncate if the card dimensions are smaller than the amount of content included.

 

Accessibility

Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.

Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone.

Content guidelines

Cards can contain any type of content. Whatever content is included: keep the content easy to scan for relevant and actionable information. Don’t overload cards with more information than necessary.Our current use cases usually include titles, supporting text, and button labels.

Overline (optional)

  • Shows a relationship between a number of cards in a group.
  • For example, this may be a category or a location.

Title (optional)

  • Communicate the subject of the card.
  • Focus on the value users will get from interacting with the card.
  • Be concise, aim for five to seven words.
  • Use sentence case capitalization.

Support copy (optional)

  • Complement the title with more in-depth context.
  • Keep it brief, about 10-15 words.

Button label (optional)

  • Use a verb phrase to state the action that the user should take or what the user will find at the card’s destination.
  • Keep button text at one to three words. See button

Content accessibility

If using icons or images, avoid placing them on images. If doing so is necessary, ensure that the background image provides sufficient contrast to make the text accessible. Adding a translucent scrim or bounding shape under the text or icon can help ensure proper contrast.

Figma: Card