For photos take CdsImage — it is built on CdsResponsive and can also do lazy loading, a placeholder and cropping. If you need the columns of a page rather than the shape of a single block, take CdsGrid.

Variations

Aspect ratio

The aspect-ratio prop accepts a fraction (16/9) or a number (1.7778). The width comes from the parent, the height is calculated by the component itself — and recalculated on every change of the width. The calculated height works as a minimum: content that does not fit into it stretches the frame and breaks the proportions.

Sandbox Storybook

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

const ratios = ['16/9', '4/3', '1'];
</script>

<template>
  <div class="flex flex-wrap items-start justify-center gap-4">
    <div v-for="ratio in ratios" :key="ratio" class="w-[180px]">
      <CdsResponsive :aspect-ratio="ratio">
        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
          {{ ratio }}
        </div>
      </CdsResponsive>
    </div>
  </div>
</template>

Sizes

By default the frame takes the whole width of its parent. The width, max-width and min-width props limit it, and height, max-height and min-height limit its height; numbers turn into pixels, strings go into CSS as they are.

Sandbox Storybook

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

<template>
  <div class="m-auto flex w-[420px] flex-col gap-4">
    <div>
      <CdsResponsive aspect-ratio="16/9">
        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
          Во всю ширину родителя
        </div>
      </CdsResponsive>
    </div>

    <div>
      <CdsResponsive aspect-ratio="16/9" max-width="260">
        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
          max-width 260
        </div>
      </CdsResponsive>
    </div>

    <div>
      <CdsResponsive aspect-ratio="16/9" width="160">
        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
          width 160
        </div>
      </CdsResponsive>
    </div>
  </div>
</template>

Layout

The inline prop turns the frame into inline-flex — it stops stretching and stands in a row with its neighbors. Set the width yourself in this case: it will not take it from the content.

Sandbox Storybook

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

<template>
  <div class="m-auto flex w-[360px] flex-col gap-4">
    <div>
      <CdsResponsive aspect-ratio="4/1">
        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
          Блочный
        </div>
      </CdsResponsive>
    </div>

    <div class="flex flex-wrap gap-4">
      <CdsResponsive inline aspect-ratio="4/1" width="160">
        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
          inline
        </div>
      </CdsResponsive>

      <CdsResponsive inline aspect-ratio="4/1" width="120">
        <div class="flex h-full items-center justify-center rounded-200 bg-surface-secondary text-content-secondary">
          inline
        </div>
      </CdsResponsive>
    </div>
  </div>
</template>

Slots

The height of the frame is held by an invisible spacer, and the content lies on top of it. Hence two slots with different jobs.

Slot	Description
default	The main content inside a wrapper — it takes the whole frame
additional	Content without a wrapper, on top of the spacer — for backdrops and absolute layers

The content-class prop puts classes on the wrapper of the default slot — that is how the inner paddings and the layout are set. The root of the component is positioned (position: relative), so the elements from additional can be placed absolutely relative to the frame.

Sandbox Storybook

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

<template>
  <div class="m-auto w-[360px]">
    <CdsResponsive aspect-ratio="16/9" class="rounded-200" content-class="flex items-end p-3">
      <template #additional>
        <div class="absolute inset-0 bg-surface-secondary" />
        <span class="absolute right-3 top-3 rounded-200 bg-brand-primary px-2 py-1 text-xs text-content-on-dark">
          02:14
        </span>
      </template>

      <p class="text-content-primary">Подпись поверх подложки</p>
    </CdsResponsive>
  </div>
</template>

Guidelines

Storybook

Scenarios

An embedded map or video

Maps and video players arrive in an iframe with proportions of their own. Wrap the iframe into a CdsResponsive with the right aspect-ratio and stretch it with the h-full w-full classes — the player will look the same on a wide monitor and on a phone.

Sandbox Storybook

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

<template>
  <div class="m-auto w-full max-w-[480px]">
    <CdsResponsive aspect-ratio="16/9" class="rounded-200">
      <div
        class="flex h-full flex-col items-center justify-center gap-2 bg-surface-secondary text-content-secondary"
        role="img"
        aria-label="Карта офиса"
      >
        <CdsIcon icon="location" size="lg" />
        <span class="text-sm">Здесь будет карта — iframe на всю рамку</span>
      </div>
    </CdsResponsive>
  </div>
</template>

A grid of tiles

In a grid of categories the tiles have to be square regardless of the length of the caption. The aspect-ratio="1" value gives a square, and the width of every tile comes from the grid column — the number of columns changes the size, not the shape.

Sandbox Storybook

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

const categories = [
  { icon: 'delivery', title: 'Логистика' },
  { icon: 'tool', title: 'Оборудование' },
  { icon: 'file', title: 'Услуги' },
  { icon: 'education', title: 'Обучение' }
];
</script>

<template>
  <div class="m-auto grid w-full max-w-[480px] grid-cols-2 gap-4 sm:grid-cols-4">
    <CdsResponsive v-for="category in categories" :key="category.title" aspect-ratio="1" class="rounded-200">
      <button
        type="button"
        class="flex h-full w-full flex-col items-center justify-center gap-2 border-0 bg-surface-secondary text-content-secondary"
      >
        <CdsIcon :icon="category.icon" size="lg" />
        <span class="text-sm">{{ category.title }}</span>
      </button>
    </CdsResponsive>
  </div>
</template>

Space for a widget while it loads

A report, a chart or a map arrives from the server a second or two later. A frame with proportions takes their place right away: while the loader spins inside, the caption and the buttons below the widget stay exactly where they will end up after the loading.

Sandbox Storybook

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

const loading = ref(true);

const load = () => {
  loading.value = true;

  setTimeout(() => {
    loading.value = false;
  }, 2000);
};

onMounted(load);
</script>

<template>
  <div class="m-auto flex w-full max-w-[420px] flex-col gap-3">
    <CdsResponsive aspect-ratio="16/9" class="rounded-200">
      <div class="flex h-full items-center justify-center bg-surface-secondary text-content-secondary">
        <CdsLoader v-if="loading" description="Загружаем отчёт" />
        <span v-else class="text-sm">Отчёт за июль: 128 закупок</span>
      </div>
    </CdsResponsive>

    <p class="text-sm text-content-secondary">Подпись под виджетом остаётся на месте всё время загрузки.</p>

    <CdsButton
      class="self-start"
      variant="soft"
      color="neutral"
      text="Загрузить заново"
      :disabled="loading"
      @click="load"
    />
  </div>
</template>

Switching the proportions

The aspect-ratio value is reactive and the change of the height is animated — a crop switcher does not jerk the neighboring blocks.

Sandbox Storybook

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

const ratios = ['16/9', '4/3', '1'];
const selected = ref(0);

const ratio = computed(() => ratios[selected.value]);
</script>

<template>
  <div class="m-auto flex w-full max-w-[420px] flex-col items-center gap-4">
    <CdsButtonToggle v-model="selected" variant="soft" color="neutral" mandatory>
      <CdsButton v-for="item in ratios" :key="item" :text="item" />
    </CdsButtonToggle>

    <div class="w-full">
      <CdsResponsive :aspect-ratio="ratio" class="rounded-200">
        <div class="flex h-full items-center justify-center bg-surface-secondary text-content-secondary">
          {{ ratio }}
        </div>
      </CdsResponsive>
    </div>
  </div>
</template>

API

Props

Name	Type	Default	Description
aspectRatio	string | number | undefined	—	Aspect ratio of the content. For example 1.7778 (16/9) or '4/3'.
contentClass	any	—	CSS class applied to the content wrapper.
height	string | number | undefined	—	Component height
inline	boolean | undefined	—	Renders the component as an inline block (inline-flex) instead of a block one.
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
width	string | number | undefined	—	Component width

Slots

Name	Type	Description
additional	any	Extra content rendered on top of the sizer, outside the content wrapper.
default	any	The main content of the component, wrapped so the aspect ratio is kept.