stat grid — mica

Example

Team snapshot

Position: 3rdEastern Conference
Played: 24League matches
Wins: 1458% win rate
Goal difference: +18
Next match: Aug 29vs. Northbridge

Player snapshot

Appearances: 17Season total
Minutes: 1,284All competitions
Goals: 8
Assists: 11
Primary role: Attacking midfielderMost-used position
Availability: AvailableLast updated today

Basic usage

<dl class="stat-grid">
  <div class="stat">
    <dt>Appearances</dt>
    <dd>
      <data value="17">17</data>
      <small>Season total</small>
    </dd>
  </div>
</dl>

API

The grid adds an intrinsic fused layout to native description-list semantics. It owns no metric count, domain meaning, or behavior.

Content/markup contract

Part	Contract	Default	Description
Grid	`dl.stat-grid`	required	Groups the complete set of related name/value pairs.
Stat	`div.stat`, direct child	one or more	Groups exactly one `dt` followed by exactly one `dd`.
Label	`dt`	required	Names the value in the following description.
Description	`dd`	required	Its first direct child is the primary value. Use the appropriate native element, such as `span`, `data`, or `time`.
Supporting text	`small`, direct child of `dd`	omitted	Optional context anchored to the bottom of the stat while remaining part of its description.

Styling

Target	Value	Default	Description
`dl.stat-grid`	intrinsic wrapping grid	minimum `8rem` tracks	Fills available space and wraps without a media query. Incomplete final rows expand to fill the frame.
`div.stat`	individual item	surface with medium padding	The explicit hook for consumer item-level customization. Mica's zero-specificity rule lets a consumer `.stat` selector win.
`--radius-md`	`<length>`	theme	Controls the outer fused frame; internal one-pixel separators remain square.

Accessibility

Keep the native dl, dt, and dd elements so each stat retains its label/value relationship. Supporting text belongs inside the same dd as its primary value. Do not add list roles or recreate these semantics with custom elements.

Custom columns

The default is intrinsic. Product layouts with a fixed metric count can override columns directly; this is styling, not a component attribute.

.season-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}