Design System v4 · Cards game

env: demo · UI Kit v0.3.6

Cards

suit: 1=♠, 2=♥, 3=♦, 4=♣ · rank: 2..14. Все размеры xs/sm/md/lg/xl доступны.

s1
s2
s3
s4

All sizes

xs
sm
md
lg
xl

Card backs — all sizes

b1
b2
b3
b4
b5
b6

Open card stacks

Веер tiny · small · normal из 5 открытых карт.

tiny · xs
small · sm
normal · md

Opponent hand — backs up

Рука соперника для 2 · 3 · 4 · 5+ карт, центрирована по горизонту.

2 backs
3 backs
4 backs
7
5+ backs

Fan 2–5 cards — md

2 cards
3 cards
4 cards
5 cards

CardHand — density

spread · compact · tight · stacked. Плотность меняет одну переменную --yc-card-hand-overlap, поэтому размер карты остаётся независимым.

spread
22
compact
22
tight
22
stacked
22

CardHand — state

Итог раунда: neutral · win · lose · tie · bust. Цвет бейджа общего балла и есть подсветка.

neutral
Rubicon· банкомёт
22 выиграл 10
win
Rubicon· банкомёт
22 выиграл 10
lose
Rubicon· банкомёт
22 выиграл 10
tie
Rubicon· банкомёт
22 выиграл 10
bust
Rubicon· банкомёт
22 выиграл 10

CardHand — sizes and surface

surface=table — то же зелёное сукно, что на страницах статей и за игровым столом.

xs
22
sm
22
md
22
lg
22

CardHand — locked

Не-VIP в журнале «21»: вместо карт и балла — замки. Номиналы в разметку не попадают.

Каспер· понтёр

CardHand — hidden cards

Нераскрытая рука соперника: рубашки вместо карт, общий балл не показывается.

Каспер
Каспер· открыта одна

CardHand — обе руки в одну строку

Мобильный режим блока раундов: грид 1fr 1fr, size=xs, density=tight. Сузьте окно — строка не переносится.

Rubicon
22
Каспер
21