Design System v4 · Layouts

env: prod

Section + Container

.yc-section — вертикальные отступы. .yc-container — max-width + горизонтальные padding'и.

.yc-section > .yc-container

Stack

Вертикальный flex с gap (--yc-stack-gap, default --space-4).

item 1
item 2
item 3

Cluster

Горизонтальный flex-wrap. Для группы кнопок, тегов, бейджей.

tag 1
tag 2
tag 3
tag 4
tag 5
tag 6
tag 7
tag 8

Split

Mobile: stacked. Desktop (≥768px): 2 колонки. Шаблон — --yc-split-template.

1fr
1fr

--yc-split-template: 1fr 2fr

1fr
2fr

Grid

Адаптивный grid через CSS-переменные. Никаких col-N — только --yc-grid-cols-{base|sm|md|lg|xl}.

2 / 3 / 4 (games grid)

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8

1 / 2 / 3 (tournaments)

item 1
item 2
item 3
item 4
item 5
item 6

1 / 1 / 2 (профиль / сайдбар)

item 1
item 2

«Разорванная» секция — full-width промо внутри container

Класс .yc-bleed — ребёнок выходит на 100vw, ломая container. Используется когда нужна промо-полоса/баннер в потоке статьи.

Контент перед промо (внутри container)

Промо во всю ширину

Этот блок ломает container и растягивается на весь viewport.

Продолжение section после промо (снова в container)

API

--yc-stack-gap, --yc-cluster-gap
--yc-split-gap, --yc-split-template
--yc-grid-gap
--yc-grid-cols-base | -sm | -md | -lg | -xl

.yc-bleed — full-width breakout (ребёнок выходит на 100vw)