Skip to main content

Card Grid Component

Group Items Together

The card grid is a stylized list that displays a set of list items in a scannable, card-based layout. Cards can use a white, sand, or denim background. When denim is selected, the grid itself appears on a sky background.

Each list item is displayed on a separate card. Each card can include additional text, an image, and a link.

Each card in the card grid should be formatted identically. For consistency, either all cards in a grid should include images or none should, and either all should link or none should. If cards include images, all images must use the same aspect ratio. When a link is added, the entire card becomes clickable. Links are added to the card. Do not include a link in card text.

On pages with left-hand navigation, the grid shows two cards across. On mobile devices, cards stack vertically.

Usage Guidelines

  • Navigation: Use card grids to direct visitors to related pages or resources.
  • Directories: Present services, programs, or opportunities in an organized format.
  • Next Steps: Place at the bottom of a page to guide further exploration.
  • Consistency: Ensure all cards in a grid follow the same rules for images, links, and formatting. Use images with the same aspect ratio (e.g.,16x9, square).

Minimum Required Fields

  • Background Color: White, Sand, or Denim (sky background applied only with denim cards)
  • Headline
  • Description
  • Card Headline
  • Card Description (optional)
  • Image (optional, but required for all cards if used; all must match aspect ratio)
  • Link (optional, but required for all cards if used)

Character Limits

  • Headline: 35 characters
  • Description: 200 characters
  • Card Headline: 40 characters
  • Card Description: 120 characters

Card Requirements

  • Minimum of 2 cards per grid

Key Takeaway

The card grid is a versatile component that presents related content side by side. With consistent formatting, it helps prospective students scan options quickly and engage with the areas most relevant to them.

 

Variation examples

Card Grid Headline 35 Characters

Optional description 200 characters maximum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur.

Card Grid Headline 35 Characters

Card Grid Headline 35 Characters

Card Grid Headline 35 Characters

Optional description 200 characters maximum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur.

Updated 6/15/26