Skip to main content

Card Grid Component

Group Items Together

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

If cards include images, all images must use the same aspect ratio. For consistency, either all cards in a grid should include images or none should, and either all should link or none should. When a link is added, the entire card becomes clickable.

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

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

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).

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.