Data Display Grid · WB Design Wiki

Level: molecule.

Purpose and use

Arrange related read-only metrics as one group of Data Display items. Use Table for aligned records with column headers, sorting or row actions.

Anatomy, behavior, and accessibility

A single projected-content container controls item sizing and spacing. L/M sets the group size treatment; the children supply labels, values and semantics.
fill distributes items in one nonwrapping flex row. fit-content and fixed wrap; fixed items use fixedColumnWidth. custom uses CSS grid columns.
Non-null layout overrides itemSizing; hug means fit-content. In custom mode columns takes precedence over customColumns.
There are no interaction events, selection or table/grid ARIA roles. Keep DOM order meaningful and choose widths that preserve labels and values; CSS column strings and gaps are supplied by the caller.

Figma source and verified mapping

Figma component: Data Display/Grid — 9981:1386, key 9764bb222ebb29d110e2f9cf0162d6edf7af08b7.
Verified in D-021 (GitLab Issue).
The Figma component composes eight Data Display/Single instances in the published M/Text state. It uses an 8px item gap and 12px vertical padding; the local default gap="var(--space-200)" preserves that gap.
Figma's repeated Single instances map to the local projected wbl-data-display children. The grid's size keeps their presentation coherent when a consuming composition selects M or L.

Documented differences

Figma documents one eight-item M/Text arrangement. Angular deliberately accepts any number of projected Data Display children.
Local itemSizing, layout, fixedColumnWidth, columns, and customColumns are runtime layout controls; no corresponding Figma Grid property is published.

Local component contract

This is the active owned contract for component.data-display-grid. The API below is verified against the current local implementation, focused test and story. The Source commit 0112cba0779a2d2a4b6c7a17243201694344d70a remains migration provenance, not the runtime owner.

Classes and selectors

WblDataDisplayGridComponent — wbl-data-display-grid (src/app/design-system/patterns/data-display-grid/data-display-grid.component.ts).

Inputs

WblDataDisplayGridComponent.size = input<WblDataDisplaySize>('L')
WblDataDisplayGridComponent.itemSizing = input<WblDataDisplayGridItemSizing>('fill')
WblDataDisplayGridComponent.layout = input<WblDataDisplayGridLayout | null>(null)
WblDataDisplayGridComponent.fixedColumnWidth = input('10.875rem')
WblDataDisplayGridComponent.columns = input<string | null>(null)
WblDataDisplayGridComponent.customColumns = input<string | null>(null)
WblDataDisplayGridComponent.gap = input('var(--space-200)')

Public types and allowed values

type WblDataDisplaySize = 'M' | 'L';
type WblDataDisplayGridItemSizing = 'fill' | 'fit-content' | 'fixed' | 'custom';
type WblDataDisplayGridLayout = WblDataDisplayGridItemSizing | 'hug';

Models

None.

Outputs

None.

Slots and projection markers

WblDataDisplayGridComponent: <ng-content>

Local evidence

Code: src/app/design-system/patterns/data-display-grid/data-display-grid.component.ts.
Focused test: src/app/design-system/patterns/data-display-grid/data-display-grid.component.spec.ts.
Public export: export * from './patterns/data-display-grid/data-display-grid.component'; in src/app/design-system/index.ts.
Storybook: storybook/stories/data-display.stories.ts (Design System/Primitives/wbl-data-display). This is the shared active Storybook story for this family.

Figma status

The source above is the verified Figma Grid composition. figmaSidecar remains absent: this task links status and behavior without introducing a separate reusable Figma assembly contract.

Provenance

The archived source-document copy is historical evidence only. The active resolver is local code/test/export and the exact Storybook story above.