Vertical Cards

Purpose of the Vertical Cards

Display multiple content items with equal weight

This component presents structured content previews in a vertical card layout to support browsing and exploration.

Vertical Cards component in layout

Example page context showing where a Vertical Component is typically used

✓ Use this component when:

  • You need to present multiple content items of equal importance
  • Each item includes a title, optional image, and brief summary
  • Users are browsing rather than following a single primary message
  • A grid layout improves scanning

✕ Avoid using this component when:

  • You are highlighting a single primary feature (use 50/50 Card)
  • You need quick navigation links without summaries (use Button-Style Cards)
  • Content is dynamically generated from a content type (use List)
  • The page requires dense or sequential reading

Choosing between similar components

If your goal is…

Your goalUse this component
Display multiple equal content previews
Vertical Cards
Feature one story, event, or initiative
50/50 Card
Provide quick links or actions
Button-Style Cards
Display multiple content entries
List

 

Vertical Cards overview

A Vertical Card is a vertical element that displays an image on top and information below. Vertical Cards can be used to provide high-level information with links for more details. Vertical Cards are often grouped and displayed as a grid of related content. 

Example: Showcasing related programs

This example shows Vertical Cards used to present related programs. Each card includes an image and summary, allowing users to browse multiple options easily.

U.S. Web Design System
Design Systems

The U.S. Web Design System (USWDS) is a toolkit of principles, guidance, and code designed to make it easier for government teams to build accessible, mobile-friendly government websites.

Five multi-colored triangles arranged to form a circular shape.

Neurodiversity Design System
Design Systems

The Neurodiversity Design System (NDS) focuses on neurodiversity and user experience design for Learning Management Systems.

A collection of speech bubbles in various sizes.

Elements of Vertical Cards

 

ElementPurpose
Image
Displays at the top of the card
Eyebrow
Describes the topic category
Heading
Describes the topic of the card and links to more details about the topic
Text
Provides descriptive details about the topic and links

Guidance on using Vertical Cards

  • Invite exploration. Use a group of Vertical Cards to provide entry points to more details about topics and tasks.
  • Summarize topics. Provide a card for each topic, with an image, topic summary, and links to support exploration.
  • Include high quality, engaging images. Use images that fit well within the Vertical Card aspect ratio.
  • Use concise, descriptive headings. Provide headings that both describe the topic of the card and serve as descriptive link text.
  • Provide a summary. Provide a brief summary of the topic or task supported by the linked content.
  • Optimize space. Use in regions with sufficient space. Avoid using in regions that are narrow due to side navigation or other elements.

Content guidelines

Write clear, descriptive headings
Headings should communicate the destination or topic clearly.

Avoid redundant information
Do not repeat metadata already visible elsewhere on the page.

Use meaningful imagery
Images should reinforce the content, not decorate it.

Accessibility considerations

  • Ensure sufficient contrast between text and background
  • Provide descriptive alternative text for images
  • Maintain logical focus order for card links
  • Avoid relying solely on images to communicate meaning

Vertical Cards features

 

FeatureStandard
Optimized color contrast
Minimum Contrast
Left-aligned headings and text
Text Block Alignment
Underlining used to indicate links
Link Indicators
See also:

Vertical Cards Showcase