← Все MDC-примерыБазовые

CoreSeparator

Живой MDC-рендер и исходник для копирования.

Живой рендер

Так ContentRenderer отрисует этот контент на реальной странице.

Линия-разделитель между смысловыми блоками. Без состояния, рендерится из MDC без оговорок.

Разделитель блоков

Текст до разделителя.

Текст после разделителя.

С подписью

или

Ориентация

Горизонтальная — по умолчанию. Вертикальная растягивается по высоте flex-контейнера (align-self: stretch) — без него линия нулевой высоты: оборачивайте её в flex-строку с контентом по бокам.

Левый блок

Правый блок

С подписью — «или» между вариантами выбора:

Вход по логину

или

Вход по почте

Исходник (MDC)

Тот же код текстом — скопируйте в свой контент как есть.

MDC

Линия-разделитель между смысловыми блоками. Без состояния, рендерится из MDC без оговорок.

### Разделитель блоков

Текст до разделителя.

::core-separator
::

Текст после разделителя.

### С подписью

::core-separator{label="или"}
::

### Ориентация

Горизонтальная — по умолчанию. Вертикальная растягивается по высоте flex-контейнера (`align-self: stretch`) — без него линия нулевой высоты: оборачивайте её в flex-строку с контентом по бокам.

::div{.flex.items-center.gap-3}
  Левый блок
  :core-separator{orientation="vertical"}
  Правый блок
::

С подписью — «или» между вариантами выбора:

::div{.flex.items-center.gap-3}
  Вход по логину
  :core-separator{orientation="vertical" label="или"}
  Вход по почте
::