Design System v4 · Ribbons
env: prodBetaMark — ribbon
Тот же компонент, что бейдж на /ui-kit/badges, но style=ribbon. Хост — .yc-ribbon-host.
position=tr
position=tl
position=br
position=bl
Sizes — xxs / xs / sm / md / lg
xxs — отдельная ширина (90px), остальные 130px+. md и lg заметно крупнее sm.
size=xxs
size=xs
size=sm
size=md
size=lg
Muted — opacity 0.5
Добавляется к любому variant. Используй для «неактивных» карточек.
variant=default + yc-ribbon-muted
variant=vip + yc-ribbon-muted
variant=fire + yc-ribbon-muted
variant=ocean + yc-ribbon-muted
4 угла — corner positions
tr / tl / br / bl (top-right default).
position=tr
Контент карточки.
position=tl
Контент карточки.
position=br
Контент карточки.
position=bl
Контент карточки.
Corner — все варианты цвета
variant=default
variant=success
variant=danger
variant=vip
variant=beta
variant=fire
variant=ice
variant=emerald
20 градиентов — corner
Все градиенты доступны и для banner (direction 90deg).
variant=sunset
variant=ocean
variant=forest
variant=royal
variant=rose
variant=aurora
variant=berry
variant=dusk
variant=copper
variant=lagoon
variant=galaxy
variant=lava
variant=plum
variant=midnight
variant=neon
variant=coral
variant=steel
variant=mango
variant=mint
variant=lilac
Banner — размеры
xxs / xs / sm / default / lg — высота и шрифт.
xxsxssmdefaultlgBanner — горизонтальная полоса
position: top (default) / bottom.