Description List

Recipe CSS

This is the exact CSS your kit ships for Description List — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Description list ===
   Key-value pairs (account info, plan details, profile fields). Uses
   semantic <dl><dt><dd>. Two-column grid keeps labels right-aligned-ish
   while values flow naturally to the right. */
.dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--k-s-10) var(--k-s-24);
  margin: 0;
}
.dl dt {
  font-size: var(--k-type-small);
  color: var(--k-fg-muted);
  font-weight: var(--k-ui-weight, 500);
  text-transform: var(--k-label-transform, none);
  letter-spacing: var(--k-label-tracking, 0);
}
.dl dd {
  font-size: var(--k-type-small);
  color: var(--k-fg);
  margin: 0;
}