Base: 2-column grid with semibold labels and normal-weight values. Each item is a label–value pair occupying one grid cell. Uses semantic <dl>/<dt>/<dd> markup.

Values: The .info-grid-value cell can contain any content — text, badges, links, or other components.

Compact: Tighter gaps and smaller value text for tw-expanded cards and narrow panels. Add .info-grid-sm alongside .info-grid.

Inline: Label and value on the same line, each pair stacking vertically. Labels get a consistent minimum width; values fill remaining space. Add .info-grid-inline alongside .info-grid.

Bordered: Subtle bottom border between each pair for visual separation. Works well with .info-grid-inline and .info-grid-1 for list-style layouts.

Layout: Override the default 2-column layout with .info-grid-1 (single column) or .info-grid-3 (three columns) for different contexts.

Set once on the grid, never per-<dt>: the inline variant's label column is min-w-28 (7rem), which is right for one-word labels and cramped for anything longer — so pages were stacking tw:min-w-* utilities on individual <dt> elements, where they lose to the pattern's own rule and silently do nothing. Put .tw-info-grid-labels-lg (9rem, two-word labels) or .tw-info-grid-labels-wide (13rem, sentence-style labels — the student-profile card) on the <dl> and every row lines up.