Structural component

Card grid

Two- or three-column card collection.

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

ISQ Rise implementation preview

Rendered with the governed ISQ production Rise CSS

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

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.

Current implementation

Theme and platform: ISQ · Articulate Rise

Implementation type: css-foundation

The classes below belong to the ISQ implementation namespace. A future theme may implement the same component contract with different tokens and class names.

Dependencies: Production CSS only.

Code

HTML

<div class="isq-grid isq-grid--three">
  <div class="isq-card">
    <div class="isq-card__header">Title</div>
    <div class="isq-card__body">Body text.</div>
  </div>
</div>

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

ISQ production stylesheet reference →

Related items

Related patterns: Comparison

Related components: Role split

Governance metadata

Owner	Design and development steward
Status	Approved
Version introduced	1.0.0
Last reviewed	2026-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.