Блоки карточки разделяет проп divider у CdsCard — он рисует ту же линию, не добавляя разметки. Если части экрана нужно не разделить, а разнести по разным поверхностям, возьмите CdsSurface.

Вариации

Внешний вид

Свойство variant задаёт стиль линии: solid по умолчанию, а dashed, dotted и double помечают границу как временную или служебную.

Sandbox Storybook

<script setup lang="ts">
import { CdsDivider } from '@central-design-system/components';

const { variants } = CdsDivider.constants;
</script>

<template>
  <div class="m-auto flex w-[320px] flex-col gap-3">
    <div v-for="variant of variants" :key="variant" class="flex flex-col gap-1">
      <span class="text-100 text-content-secondary">{{ variant }}</span>
      <CdsDivider :variant="variant" :thickness="variant === 'double' ? 3 : undefined" />
    </div>
  </div>
</template>

Толщина и длина

Свойство thickness задаёт толщину линии в пикселях, length — её длину. Без length разделитель занимает всю ширину родителя (или всю его высоту, если разделитель вертикальный).

Sandbox Storybook

<script setup lang="ts">
import { CdsDivider } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto flex w-[320px] flex-col gap-3">
    <CdsDivider />
    <CdsDivider :thickness="2" />
    <CdsDivider :thickness="4" />
  </div>
</template>

Sandbox Storybook

<script setup lang="ts">
import { CdsDivider } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto flex w-[320px] flex-col items-center gap-3">
    <CdsDivider length="80" />
    <CdsDivider length="180" />
    <CdsDivider length="100%" />
  </div>
</template>

Цвет и прозрачность

Свойство color принимает цветовой алиас (green, red, purple) или токен дизайн-системы, opacity — прозрачность от 0 до 1. Цвет уместен, когда линия несёт смысл: граница просроченного периода, разрыв в истории событий.

Sandbox Storybook

<script setup lang="ts">
import { CdsDivider } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto flex w-[320px] flex-col gap-3">
    <div class="flex flex-col gap-1">
      <span class="text-100 text-content-secondary">По умолчанию</span>
      <CdsDivider :thickness="2" />
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-100 text-content-secondary">color="green"</span>
      <CdsDivider color="green" :thickness="2" />
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-100 text-content-secondary">color="brand-primary"</span>
      <CdsDivider color="brand-primary" :thickness="2" />
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-100 text-content-secondary">opacity="0.3"</span>
      <CdsDivider :thickness="2" opacity="0.3" />
    </div>
  </div>
</template>

Отступ

Свойство inset сдвигает горизонтальный разделитель на 72 px от начала строки — чтобы линия начиналась под текстом, а не под иконкой или аватаром. У вертикального разделителя inset укорачивает линию сверху и снизу.

Sandbox Storybook

<script setup lang="ts">
import { CdsDivider } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto flex w-[320px] flex-col gap-4">
    <div class="flex flex-col gap-3">
      <span class="text-100 text-content-secondary">Горизонтальный: отступ слева</span>
      <CdsDivider />
      <CdsDivider inset />
    </div>

    <div class="flex flex-col gap-2">
      <span class="text-100 text-content-secondary">Вертикальный: линия короче</span>
      <div class="flex h-[64px] justify-center gap-4">
        <CdsDivider vertical />
        <CdsDivider vertical inset />
      </div>
    </div>
  </div>
</template>

Затухание

Свойство gradient растворяет линию к краям. Такой разделитель мягче обычного и хорошо смотрится внутри плотных блоков, где резкая граница выглядела бы рамкой.

Sandbox Storybook

<script setup lang="ts">
import { CdsDivider } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto flex w-[320px] flex-col gap-4">
    <CdsDivider gradient :thickness="2" />

    <div class="flex h-[96px] justify-center">
      <CdsDivider gradient vertical :thickness="2" />
    </div>
  </div>
</template>

Ориентация

Свойство vertical разворачивает разделитель. Вертикальная линия тянется на высоту соседей, поэтому её родителю нужна высота — обычно это строка display: flex.

Sandbox Storybook

<script setup lang="ts">
import { CdsDivider } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto flex h-[56px] items-center justify-center gap-4">
    <div class="flex flex-col gap-0.5">
      <span class="text-100 text-content-secondary">Заявок</span>
      <span class="text-500">128</span>
    </div>

    <CdsDivider vertical />

    <div class="flex flex-col gap-0.5">
      <span class="text-100 text-content-secondary">В работе</span>
      <span class="text-500">34</span>
    </div>
  </div>
</template>

Контент

Содержимое слота default встаёт в разрыв линии: разделитель превращается в подпись границы — «или», дата, название секции.

Sandbox Storybook

<script setup lang="ts">
import { CdsDivider } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto flex w-[320px] flex-col gap-4">
    <CdsDivider>или</CdsDivider>

    <CdsDivider gradient>12 мая</CdsDivider>

    <div class="flex h-[120px] justify-center">
      <CdsDivider vertical>или</CdsDivider>
    </div>
  </div>
</template>

Свойство content-offset увеличивает расстояние от контента до линии. Массив из двух значений дополнительно смещает сам контент: вниз у горизонтального разделителя, вправо — у вертикального.

Sandbox Storybook

<script setup lang="ts">
import { CdsDivider } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto flex w-[320px] flex-col gap-4">
    <div class="flex flex-col gap-1">
      <span class="text-100 text-content-secondary">content-offset="32"</span>
      <CdsDivider content-offset="32">или</CdsDivider>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-100 text-content-secondary">:content-offset="[32, -10]"</span>
      <CdsDivider :content-offset="[32, -10]">или</CdsDivider>
    </div>
  </div>
</template>

Рекомендации

Storybook

Сценарии использования

Альтернативный способ входа

Разделитель с подписью «или» разводит два равнозначных пути и объясняет, что второй — не продолжение первого. content-offset даёт подписи воздух, чтобы она не сливалась с кнопками.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsDivider, CdsTextInput } from '@central-design-system/components';
import { ref } from 'vue';

const email = ref('');
const loading = ref(false);

const sendLink = async () => {
  loading.value = true;

  await new Promise((resolve) => setTimeout(resolve, 1500));

  loading.value = false;
};
</script>

<template>
  <div class="m-auto flex w-[320px] flex-col gap-2">
    <CdsTextInput v-model="email" label="Рабочая почта" placeholder="name@company.ru" hide-details />

    <CdsButton block text="Прислать ссылку для входа" :loading="loading" @click="sendLink" />

    <CdsDivider content-offset="8">или</CdsDivider>

    <CdsButton variant="soft" color="brand" block text="Войти по паролю" />
  </div>
</template>

Строки списка

Между строками списка разделитель заменяет рамки: границы видны, но список не превращается в таблицу. Линия ставится между элементами, а не после каждого — у первой и последней строки её нет.

Sandbox Storybook

<script setup lang="ts">
import { CdsDivider, CdsTextInput } from '@central-design-system/components';
import { computed, ref } from 'vue';

const query = ref('');

const documents = [
  { title: 'Договор поставки №1024', date: '12 мая' },
  { title: 'Договор аренды №87', date: '30 апреля' },
  { title: 'Акт сверки за I квартал', date: '14 апреля' },
  { title: 'Счёт на оплату №5512', date: '2 апреля' }
];

const filtered = computed(() =>
  documents.filter((document) => document.title.toLowerCase().includes(query.value.trim().toLowerCase()))
);
</script>

<template>
  <div class="m-auto flex w-[360px] flex-col gap-2">
    <CdsTextInput v-model="query" placeholder="Поиск по документам" hide-details />

    <div class="flex flex-col">
      <template v-for="(document, index) of filtered" :key="document.title">
        <CdsDivider v-if="index" />

        <div class="flex items-center justify-between gap-2 py-2">
          <span>{{ document.title }}</span>
          <span class="text-100 text-content-secondary">{{ document.date }}</span>
        </div>
      </template>

      <span v-if="!filtered.length" class="py-2 text-content-secondary">Ничего не найдено</span>
    </div>
  </div>
</template>

Метаданные записи

Вертикальные разделители разбивают строку фактов — статус, дату, автора — почти не занимая места. Родительской строке достаточно display: flex и высоты, чтобы линии вытянулись по тексту.

Sandbox Storybook

<script setup lang="ts">
import { CdsDivider } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto flex w-[360px] flex-col gap-1">
    <span class="text-300">Договор поставки №1024</span>

    <div class="text-100 text-content-secondary flex h-[16px] items-center gap-2">
      <span>На согласовании</span>
      <CdsDivider vertical />
      <span>12 мая</span>
      <CdsDivider vertical />
      <span>Иван Петров</span>
    </div>
  </div>
</template>

Секции формы

Разделитель с подписью в слоте называет новую группу полей. Это спокойнее заголовка: продолжение формы читается как продолжение, а не как начало другой формы.

Sandbox Storybook

<script setup lang="ts">
import { CdsDivider, CdsForm, CdsTextInput } from '@central-design-system/components';
import { ref } from 'vue';

const company = ref('');
const inn = ref('');
const email = ref('');
const phone = ref('');
</script>

<template>
  <CdsForm class="m-auto flex w-[350px] flex-col gap-2" @submit.prevent>
    <CdsTextInput v-model="company" label="Название компании" hide-details />
    <CdsTextInput v-model="inn" label="ИНН" hide-details />

    <div class="my-2">
      <CdsDivider content-offset="8">Контакты</CdsDivider>
    </div>

    <CdsTextInput v-model="email" label="Почта" hide-details />
    <CdsTextInput v-model="phone" label="Телефон" hide-details />
  </CdsForm>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
color	string | undefined	—	Цвет разделителя.
contentOffset	string | number | (string | number)[] | undefined	—	Увеличивает интервал между элементами контента и строками. Если передается в виде массива, второе значение смещает содержимое слота вниз (или вправо если vertical = true).
gradient	boolean | undefined	—	Добавляет эффект затухания с обеих сторон.
inset	boolean | undefined	—	Добавляет отступ для обычных разделителей и уменьшает максимальную высоту для вертикальных разделителей.
length	string | number | undefined	—	Длина разделителя. Единица измерения по умолчанию — пиксели.
opacity	string | number | undefined	—	Прозрачность разделителя.
theme	string | undefined	—	Тема компонента
thickness	string | number | undefined	—	Толщина разделителя. Единица измерения по умолчанию — пиксели.
variant	"solid" | "dotted" | "dashed" | "double" | undefined	'solid'	Вариант отображения разделителя
vertical	boolean | undefined	—	Отображает разделитель вертикально

Слоты

Имя	Тип	Описание
default	any	Текст или контент в разрыве разделителя