INFO GRID: 2-column label–value grid for structured data display
COMPOSES: Typography utilities | Color utilities
VARIANTS: Default (2-col) | Compact (.info-grid-sm) | Inline (.info-grid-inline) | Bordered (.info-grid-bordered) | Single column (.info-grid-1) | Three column (.info-grid-3)
Used in drawer summaries, record sidebars, and tw-expanded tw-card details to display key–value information in a scannable grid layout.
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.
<dl class="tw-info-grid"><div><dt class="tw-info-grid-label">Label</dt><dd class="tw-info-grid-value">Value</dd></div>...</dl>
Values: The .info-grid-value cell can contain any content — text, badges, links, or other components.
<dd class="tw-info-grid-value"><span class="tw-badge tw-badge-success-subtle tw-badge-sm">Active</span></dd>
Compact: Tighter gaps and smaller value text for tw-expanded cards and narrow panels.
Add .info-grid-sm alongside .info-grid.
<dl class="tw-info-grid tw-info-grid-sm">...</dl>
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.
<dl class="tw-info-grid tw-info-grid-inline">...</dl>
Bordered: Subtle bottom border between each pair for visual separation.
Works well with .info-grid-inline and .info-grid-1 for list-style layouts.
<dl class="tw-info-grid tw-info-grid-inline tw-info-grid-bordered">...</dl>
Layout: Override the default 2-column layout with .info-grid-1 (single column)
or .info-grid-3 (three columns) for different contexts.
<dl class="tw-info-grid tw-info-grid-1">...</dl> |
<dl class="tw-info-grid tw-info-grid-3">...</dl>