Skip to content

← Components

Structural component

Card grid

Two- or three-column card collection.

approved Version introduced: 1.0.0 Platforms: Rise Owner: Design and development steward

Live preview

Rendered with production Rise CSS
Title
Body text.

Light background shown; verify against a tinted or dark surface where the component is used that way in course.

Use when / avoid when

Use when

  • Comparing three or more parallel options with consistent criteria.

Avoid when

  • Fewer than three items — a split or standard panel is simpler.

Anatomy

  • Grid container (.isq-grid--two / --three)
  • Cards (.isq-card)

Variants

isq-grid--twoisq-grid--three

States

default

Responsive behaviour

Restacks to a single column at the 760px breakpoint without removing content.

Accessibility

  • Card title is the link where the card is interactive, so the accessible name stays meaningful.

Implementation

Type: css-foundation

Dependencies: Production CSS only.

Code

HTML 

  

    
Title

    
Body text.

Classes used: .isq-grid, .isq-grid--two, .isq-grid--three, .isq-card, .isq-card__header, .isq-card__body, .isq-card--recommended

Production stylesheet reference →

Related items

Related patterns: Comparison

Related components: Role split

Governance metadata

OwnerDesign and development steward
StatusApproved
Version introduced1.0.0
Last reviewed2026-07
Known limitations
  • "Grid" is named as a layout primitive in Document 2's prose but was missing from its technical class index — corrected here.