Skip to main content
Digitaltableteur

Design system components

GridBlock

Responsive grid of case-study content cells with column, gap, spacing and background knobs, used across Work project pages.

Status: stable. Group: layout. Markdown version: /design-system/components/grid-block.md

When to use

GridBlock lays out case-study content cells in a responsive grid with columns, gap, spacing and background knobs. Work project pages use it for image/text mosaics between StoryBlock narrative sections. Cells are free-form nodes; for the bare layout primitive use Grid, since GridBlock adds section chrome (max-width, background, spacing) around it. The root is the as element (default <section>) and carries the background through a CSS Modules class; the inner PageLayout wrapper is always a <div>, so sections never nest. className lands on the inner grid div. Defaults: columns 2, gap medium, backgroundColor transparent, maxWidth md, spacing comfortable. An image cell without src is dropped. A missing alt still renders alt="" (decorative) but logs a development warning, so pass alt for every informative image and alt="" only on purpose.

When not to use

The contract records no forbidden uses.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

GridBlock props
PropTypeDefaultDescriptionRequired
cellsGridCell[]noneArray of grid cells to render.Yes
columns1 | 2 | 3 | 42Number of columns in the grid. Defaults to 2.No
gap"none" | "small" | "medium" | "large"mediumGap between cells. Defaults to "medium".No
backgroundColor"transparent" | "light" | "white"transparentBackground color variant, applied to the outer element through a CSS Modules class. Defaults to "transparent".No
maxWidth"sm" | "md" | "lg" | "full" | "xl"mdMaximum width constraint passed to the inner PageLayout. Defaults to "md".No
spacing"compact" | "default" | "comfortable" | "spacious"comfortableSpacing variant passed to the inner PageLayout. Defaults to "comfortable".No
classNamestring""Additional CSS class on the inner grid <div>, not on the root <section>.No
as"article" | "div" | "section"sectionOuter element. The inner PageLayout wrapper is always a <div>, so sections never nest. Defaults to "section".No

Variants

  • Allowed columns values: 1, 2, 3, 4 (default 2).
  • Available gaps: none, small, medium, large (default medium).
  • Allowed backgroundColor values: transparent, light, white (default transparent).
  • Allowed maxWidth values: sm, md, lg, full, xl (default md).
  • Available spacings: compact, default, comfortable, spacious (default comfortable).
  • Allowed as values: article, div, section (default section).

Invalid combinations

The contract records no invalid combinations.

Keyboard

The contract records no keyboard interaction.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

GridBlock rules
LevelRuleHow it is checked
MUSTRequired stories produce no axe violations at the configured severity.Automated by npm run test:stories:matrix:ci. WCAG 2.5.8.
MUSTThe accessibility tree (role, name, state) matches the committed snapshot for every required story.Automated by npm run test:stories:matrix:ci. WCAG 1.3.1, 4.1.2.
MUSTThe component remains legible and operable under a real browser forced-colors: active pass.Automated by npm run test:stories:hc.
MUSTA human completed an end-to-end accessibility review of this component.Manual review, last on 2026-11-04.
MUST NOTMaintainers: Do not bypass design tokens or skip forced-colors verification at beta.Release review; not machine-checked.

Install and import

  • In-repo only. GridBlock is not exported from @digitaltableteur/react, so there is no public import path.

Links