Eyebrow & Num
Dva typografické helpery. Eyebrow = malý štítek sekce (General Sans, uppercase, tracking). Num = tabular číslice, ať se ceny a počty zarovnají a při změně neposkakují.
5
Eyebrow tóny
dle podkladu
tab
Num
tabular-nums
0–9
Šířka
stejná na číslici
util
Helpery
General Sans
Eyebrow
Štítek sekce. Tón dle podkladu — na tmavém on-dark.
Muted (default)
Default
Brand
na tmavém
On dark
On dark muted
Num — tabular číslice
Vlevo proporcionální (sloupce neladí), vpravo Num (číslice zarovnané). Pro ceny, počty, mezisoučty.
Bez Num
Kreatin monohydrát349 Kč
Omega-3 Premium1 290 Kč
Vitamin D3 + K289 Kč
Cordyceps extrakt12 990 Kč
S Num
Kreatin monohydrát349 Kč
Omega-3 Premium1 290 Kč
Vitamin D3 + K289 Kč
Cordyceps extrakt12 990 Kč
Props & pravidla
<Eyebrow>
components/shared/eyebrow.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| tone | "muted" | "default" | "brand" | "on-dark" | "on-dark-muted" | "muted" | Barva dle podkladu |
| as | "p" | "span" | "div" | "p" | HTML tag |
| margin | "none" | "sm" | "md" | "none" | Spodní mezera |
<Num>
components/shared/num.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| children | ReactNode | — | Číslo / cena (tabular) |
| className | string | — | Doplň styl |
Num dej na vše, co se zarovnává ve sloupci nebo se mění (cena, počet, sklad). Pro živě se měnící čísla (košík, množství) použij
<AnimatedNum> z components/motion.