Для карточки с заголовком и действиями возьмите CdsCard, для разделов страницы — CdsLayout. CdsSurface — самый нижний слой, без собственного содержимого и отступов.

Вариации

Цвет

Свойство color задаёт фон из токенов темы и подбирает контрастный цвет текста. Кроме surface-* подходят любые цвета палитры и произвольный CSS-цвет. Какие именно цвета скрыты за токенами, решает тема: свойство theme переключает её для поверхности и всего, что внутри неё.

Sandbox Storybook

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

<template>
  <div class="flex flex-wrap justify-center gap-2">
    <CdsSurface color="surface-primary" class="p-3 rounded-200">surface-primary</CdsSurface>
    <CdsSurface color="surface-secondary" class="p-3 rounded-200">surface-secondary</CdsSurface>
    <CdsSurface color="surface-elevated" class="p-3 rounded-200">surface-elevated</CdsSurface>
    <CdsSurface color="surface-inverse" class="p-3 rounded-200">surface-inverse</CdsSurface>
  </div>
</template>

Размеры

Свойства width, height, min-width, max-width, min-height и max-height принимают число (пиксели) или строку с любой CSS-единицей.

Sandbox Storybook

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

<template>
  <div class="flex flex-wrap items-start justify-center gap-2">
    <CdsSurface color="surface-secondary" width="120" height="80" class="p-2 rounded-200"> 120 × 80 </CdsSurface>

    <CdsSurface color="surface-secondary" min-height="80" max-width="200" class="p-2 rounded-200">
      Ширина не больше 200, высота не меньше 80
    </CdsSurface>
  </div>
</template>

Позиционирование

Свойство position задаёт CSS-позицию, location прижимает поверхность к краю контейнера — top end, bottom start, center. Вместе они собирают плашку поверх другого блока.

Sandbox Storybook

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

<template>
  <CdsSurface color="surface-secondary" position="relative" height="140" class="w-[280px] m-auto rounded-200">
    <CdsSurface color="surface-inverse" position="absolute" location="top end" class="p-1 rounded-100">
      top end
    </CdsSurface>

    <CdsSurface color="surface-inverse" position="absolute" location="bottom start" class="p-1 rounded-100">
      bottom start
    </CdsSurface>
  </CdsSurface>
</template>

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

Панель с итогами

Поверхность даёт фон и размеры, а отступы и раскладку внутри вы задаёте сами. Свойство tag меняет тег обёртки — здесь section, чтобы блок остался осмысленным в структуре страницы.

Sandbox Storybook

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

const rows = [
  { label: 'Позиций', value: '12' },
  { label: 'Доставка', value: '1 500 ₽' },
  { label: 'Итого', value: '48 900 ₽' }
];
</script>

<template>
  <CdsSurface tag="section" color="surface-secondary" class="w-[320px] m-auto p-4 rounded-200">
    <div class="flex flex-col gap-1">
      <div v-for="row of rows" :key="row.label" class="flex justify-between">
        <span>{{ row.label }}</span>
        <b>{{ row.value }}</b>
      </div>
    </div>

    <CdsDivider class="my-3" />

    <CdsButton block text="Оформить заказ" />
  </CdsSurface>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
color	string | undefined	—	Цвет фона поверхности
height	string | number | undefined	—	Высота компонента
location	Anchor | null | undefined	—	Позиционирование элемента относительно его контейнера. Например, "top left", "center", "bottom right" и т.д.
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
position	"absolute" | "static" | "fixed" | "relative" | "sticky" | undefined	—	CSS-позиционирование компонента — значение свойства position
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
theme	string | undefined	—	Тема компонента
width	string | number | undefined	—	Ширина компонента

Слоты

Имя	Тип	Описание
default	any	Основной контент поверхности.