Variation 1

Definition List

Legacy definition-list styles applied to semantic glossary content.

Box
A layout primitive that provides padding, border, and optional inversion.
Stack
A vertical layout utility that controls spacing between successive siblings.
Switcher
A responsive layout that switches from horizontal to vertical when space runs out.

Variation 2

Unordered List

The unordered-list entry is static styling only, so the standalone demo keeps the source semantics and spacing.

  • Semantic HTML first
  • Utility-friendly spacing
  • Readable default rhythm
  • Legacy SCSS ported into standalone form