UI component · dimensional drawing

Card

Architecture only: slots, spacing, radii and layers. Content is out of scope.
Dwg no.
UI-CARD-001
Rev
B · 2026-10-23
Sheets
1
Units
CSS px @ 1×
Scale
1:1 unless noted
Source
Card Showcase · 20 instances
NOTES:(UNLESS OTHERWISE SPECIFIED)
  1. Do not scale from screen. Read the numbers.
  2. All dimensions in CSS px at 1×. Padding is measured inside the 1 px border.
  3. Slots are placeholders. Text, icons and copy are not part of the drawing.
  1. Every dimension is a variable (S1, R2, H3…). Values and formulas are in the variable tables; derived values are written as formulas.
  2. HUG = sized by its content · FLEX = takes the remaining space · FILL = full width of its parent.
  3. R4 (pill) = border-radius 999px, which renders as height ÷ 2.
  4. Grayscale by design. Color is out of scope.
W · card-w
420–680
S1 · card-pad
14
S2 · well-pad
12
S6 · well-inset
4
H1 · header-min
2·S1 + H3
R1 · r-card
16
R2 · r-well
R1 − B − S6
2026-10-23  |  UI component referenceCard, architecture  |  1