Skip to main content

Looking for the old Design System website? View an archive of the Design System Version 2.

Cards (Vertical)

Overview

Display a series of related content objects, each with a call to action.

When to Use

When you have a long list of items and have photos for all items.

Content Guidelines

Component
ContentDescriptionMax Chars.
HeadingShort copy that grabs the user’s attention.56
SubheadingShort copy that expands on the heading.100
ItemsList of featured content items.N/A
PostscriptAdditional info e.g. to direct the user to resources.100
Items
ContentDescriptionMax Chars.
Thumbnail ImageA nice image that represents the content.N/A
Heading*Short copy that grabs the user’s attention.56
Body Copy*Describe what the user can expect when clicking the call to action.200
Call to Action(s)*The action(s) you want the user to take.25

*Required content.

Example 1 General Audience Default Tone Color Palette Option 1

Heading

Subheading.

Capitol Dome

Item 1 Title

Item 1 text.

People talking

Item 2 Title

Item 2 text.

Call to Action
Postscript text.

Example 2 General Audience Default Tone Color Palette Option 1

Heading

Stewart Hall

Item 1 Title

Item 1 text.

Call to Action
Stewart Hall

Item 2 Title

Item 2 text.

Call to Action

Example 3 General Audience Default Tone Color Palette Option 1

Heading

Students working on a computer

Item 1 Title

Item 1 text.

Call to Action
Students working on a computer

Item 2 Title

Item 2 text.

Call to Action