Web Standard: Cards

Note

All EPA public and internal content pages and web applications are required to follow this standard.

Definition

Cards contain content and actions about a single subject.

A card is often a subset or summary of a larger idea. A card acts as an entry point to more detailed information on a topic and may contain a variety of content types, such as text, images, or buttons. An individual card is typically part of a collection of related content, like articles or sections of a website, not a single card in isolation. Cards are modular. Cards can be moved around in a collection without destroying any individual card’s meaning.

A "Card group" creates a row of cards.

When to consider something else

Tabular data. Don't use a card as a substitute for a table row.
Simple calls to action. Use just a button instead. Buttons can be standalone elements.
Standalone content. Consider another standalone element.
Sequential, continuous text. Cards should be self-contained and modular. If the reader is meant to read from card to card, consider a list or simple body text and headings.

Content Requirements

Each card group (row) must contain either two cards (flag layout) or three cards (default layout).
No more than two card groups (row) should be used on a single webpage.
Each card must contain a heading (four to six words), a short introductory sentence or two (no more than 25 words) and a call to action (linked button of four to six words).
The call-to-action button should link to more detailed information about the card topic. The call-to-action button text should start with an action verb. Use clear and descriptive link text as per the Link Text web standard.
Don't repeat images or content common to all or most cards in a collection. Repeated information (like using the same image for each card in a collection) makes it more difficult to distinguish cards from one another.
Use the card component for cards, not for any type of content that's designed to have a border around it. Follow the guidance outlined in the Creating Cards How To.
Follow the Link Text, Graphics and Images, and Writing for the Web standards.

Example

See: Creating Cards How To in the WebCMS.
See: Adding a Card component to a Landing page in the Intranet CMS.

About this Standard

All EPA public web content must adhere to all federal requirements including; the EPA Web Standards, the U.S. Web Design System guidelines, federal plain language guidelines, and the 21st Century Integrated Digital Experience Act. Internal content, including Intranet and Microsoft 365, may differ from the public content. If not explicitly stated, content must adhere to all federal requirements.

Original effective date: 05/11/22
Last approved on: 09/11/2024
Web Council review by: 09/11/2027 (or earlier if deemed necessary)