For a card with a title and actions take CdsCard, for the sections of a page take CdsLayout. CdsSurface is the lowest layer, without content or paddings of its own.

Variations

Color

The color prop sets the background from the theme tokens and picks a contrasting text color. Besides surface-*, any color of the palette and any CSS color will do. Which colors exactly hide behind the tokens is decided by the theme: the theme prop switches it for the surface and for everything inside it.

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>

Sizes

The width, height, min-width, max-width, min-height and max-height props accept a number (pixels) or a string with any CSS unit.

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>

Positioning

The position prop sets the CSS position, location pins the surface to an edge of the container — top end, bottom start, center. Together they build a plate on top of another block.

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>

Scenarios

A summary panel

The surface gives the background and the sizes, while the paddings and the layout inside are up to you. The tag prop changes the tag of the wrapper — here it is section, so the block stays meaningful in the structure of the page.

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

Props

Name	Type	Default	Description
color	string | undefined	—	Background color of the surface
height	string | number | undefined	—	Component height
location	Anchor | null | undefined	—	Position of the element relative to its container, for example "top left", "center", "bottom right".
maxHeight	string | number | undefined	—	Maximum component height
maxWidth	string | number | undefined	—	Maximum component width
minHeight	string | number | undefined	—	Minimum component height
minWidth	string | number | undefined	—	Minimum component width
position	"absolute" | "static" | "fixed" | "relative" | "sticky" | undefined	—	CSS positioning of the component — the value of the position property
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render
theme	string | undefined	—	Component theme
width	string | number | undefined	—	Component width

Slots

Name	Type	Description
default	any	The main content of the surface.