DesignAnalytika
⌘K
    • Přehled
  • Tokens

    • Barvy
    • Typografie
    • Tvary & pohyb
    • Motion
    • Ikony
    • Glass
  • Primitivy

    • Logo
    • Button / CTA
    • Badge
    • Price & PriceTag
    • TrustStars
    • Chip / UspTag
    • Avatar
    • Eyebrow & Num
    • Separator
    • Skeleton
    • Toast
    • Cards & Containers
    • Form controls
  • Komponenty

    • ProductCard

TrustStars

Hodnocení produktu i shopu. Mód stars = 5 hvězd s desetinným plněním; compact = jedna hvězda + 4,8 z 5 · 124 hodnocení (Heureka styl). Hvězdy jsou vždy jantarové.

2
Módy
stars · compact
3
Velikosti
14 · 16 · 20px
0,1
Krok
desetinné plnění
★
Barva
vždy --warning

Módy

stars pro PDP a karty; compact pro hustá místa a trust řádky.

4,8(124)
stars
4,8 z 5(124 hodnocení)
compact

Velikosti

sm · md (default) · lg, oba módy vedle sebe.

4,7(88)
4,7 z 5(88 hodnocení)
sm
4,7(88)
4,7 z 5(88 hodnocení)
md
4,7(88)
4,7 z 5(88 hodnocení)
lg

Desetinná hodnocení

Plnění je přesné na procenta — 4,3 = 86 % šířky.

5,0
4,8
4,3
3,5
2,0

Se zdrojem

source připíše původ recenzí (Heureka, Google).

4,9 z 5(2 480 hodnocení)/ Heureka
4,7 z 5(1 203 hodnocení)/ Google

Na gradientu (onDark)

tone='onDark' — hvězdy zůstávají jantarové, číslo a počet zbělají. Pro trust marky na hero, hlavičkách kategorií a USP pruzích.

grad-cover — trust na hero

4,9(342)
4,8 z 5(2 480 hodnocení)/ Heureka

Props & pravidla

<TrustStars>

components/shared/trust-stars.tsx
PropTypDefaultPoužití
ratingnumber—0–5, desetinné (povinné)
countnumber—Počet hodnocení
sourcestring—Původ (Heureka, Google)
mode"stars" | "compact""stars"5 hvězd vs 1 + text
size"sm" | "md" | "lg""md"14 / 16 / 20px
compactLabelstring"hodnocení"Slovo za počtem (compact)
tone"light" | "onDark""light"onDark = bílé číslo (hvězdy jantarové)
Hvězdy jsou vždy jantarové (--warning) — nikdy barva kategorie ani červená. Prázdné = hairline. Číslo i počet jedou tabular .num. Na gradientu / glassu nasaď tone="onDark" — číslo zbělá, hvězdy zůstanou jantarové.