Horizontal
orientation=horizontal
Contrast: low (default)
Первичный контент — заголовки и основной текст страницы
Вторичный контент — подробности, метаданные, дополнительный контекст
Contrast: medium contrast=medium
Средняя интенсивность — для разделения секций внутри компонента
Contrast: high contrast=high
Высокая интенсивность — акцентное разделение между крупными блоками
Vertical
orientation=vertical
Low contrast=low
Тонкое разделение
Medium contrast=medium
Среднее разделение
High contrast=high
Акцентное разделение
Padding
margin-block вокруг линии
Props
| Prop | Type | Default | Values |
|---|
| orientation |
string |
'horizontal' |
horizontal vertical |
| contrast |
string |
'low' |
low medium high |
| padding |
number |
0 |
0 2 4 |
Tokens
| Token | Style | Swatch |
|---|
| --ds-stroke-low |
low |
|
| --ds-stroke-mid |
medium |
|
| --ds-stroke-high |
high |
|
Доступность
WCAG 2.2 AA · ARIA · статический компонент
ARIA
Разметка
- Смысловой разделитель →
role="separator" (по умолчанию у <hr>)
- Чисто декоративная линия →
aria-hidden="true" — исключить из дерева доступности
- Вертикальная ориентация →
aria-orientation="vertical" (по умолчанию horizontal)
- Divider статический — без фокуса, состояний и обработчиков событий
- Не носит смысловую нагрузку: группировку выражать заголовком, а не линией
WCAG 2.2 AA
Контраст и цвет
- Линия должна быть различима относительно фона — контраст через токены
--ds-stroke-*
- Low / Medium контраст по умолчанию, чтобы divider не конкурировал с контентом
- High контраст — только для строго выраженных границ (карточки, панели, навигация)
- Не использовать слишком контрастный цвет в информационных интерфейсах
- Не передавать смысл только линией — дополнять текстовыми обозначениями (WCAG 1.4.1)
Правила использования
Когда · Чего избегать
Правила
Когда использовать Divider
- Внутреннее разделение в карточках и панелях — основной текст от вспомогательной информации, итоги от деталей
- Разделение элементов в списках — тонкая линия между строками при высокой плотности данных
- Разграничение зон навигации и контента — боковое меню, тулбар, фильтры от рабочего поля
- Использовать Low / Medium контраст по умолчанию, чтобы divider не конкурировал с контентом
- Использовать divider только как визуальное дополнение к структуре
- Меньше divider — лучше
Чего избегать
Когда НЕ использовать
- Для смысловой группировки — выражай заголовком / подзаголовком (Heading), а не линией
- Как разделитель между каждым мелким элементом — разделяй whitespace / отступами
- Чтобы отделить целую зону или карточку — используй Surface с границей
Stroke/Neutral/Low или фоном
- Между перекрывающимися однотипными элементами (стек аватаров, чипы вплотную) — там
Stroke/Neutral/Group-separator на каждом элементе
- Как интерактивный разделитель (resize-handle, drag-splitter) — Divider статический; для ресайза нужен splitter
- У последнего элемента списка — правило последней линии
State Explorer
Интерактивный тест состояний — переключай и смотри