Перейти к содержимому

CoreSeparator

Примеры использования и документация.

Визуальная граница между блоками или вариантами: линия честно разделяет смысловые зоны, а подпись «или» между кнопками входа объясняет пользователю, что способы равноправны. Используйте между разделами страницы, внутри карточек и вокруг альтернативных действий.

Технические детали: orientation — горизонтальная или вертикальная линия (vertical растягивается по высоте контейнера); label выводит текст-разделитель по центру линии, перекрывается слотом default. Вертикальный labeled-вариант центрируется по горизонтали сам (margin-inline: auto); линия без подписи занимает свой слот как есть — для центрирования между панелями дайте родителю gap или обёртку. Отступы настраиваются снаружи. С flow линия переливается фирменным градиентом темы (--core-flow-image) в обеих ориентациях; при prefers-reduced-motion анимация отключается. Семантика для скринридеров — role="separator" + aria-orientation.

ВойтиРегистрацияПродолжить как гость