Block

Block — универсальный контейнер-слот с акриловой подложкой (backdrop-blur). Подходит для плавающих панелей, карточек над изображением, оверлеев и всплывающих блоков, где нужно сохранить читаемость контента на любом фоне.

Демо

<Block backgroundPredefined="neutralBackground1Level" size="l" view="simple" children="# slot content" />

Когда использовать

• Плавающие карточки или панели поверх фоновых изображений.
• Модальные и всплывающие поверхности, где важна глубина.
• Любой контент, который нужно визуально отделить от сложного фона без использования сплошного цвета.

Когда не нужен Block: для обычных блоков на плоском фоне используйте свёрстанную карточку без акрилового эффекта — Block заметно дороже по отрисовке.

Анатомия

View (default simple)

Способ визуального отделения поверхности:

• simple — только акриловая подложка, без рамки и тени.
• outline — с контурной рамкой.
• elevated — с тенью для подъёма над фоном (l берёт elevation-level2, m/s — level1).

BackgroundPredefined (default neutralBackground1Level)

Палитра подложки — тот же набор, что у слота backgroundPredefined в Figma (BACKGROUND_PREDEFINED_FILL из @cloud-ru/ds-materials):

• цветные заливки — primaryBackground, neutralBackground1Level, redBackground, orangeBackground, yellowBackground, greenBackground, blueBackground, violetBackground, pinkBackground;
• decorTransparent — полупрозрачная декоративная подложка;
• transparent — без заливки, остаётся только blur.

Ось независима от view: рамка и тень комбинируются с любой подложкой.

Size

Плотность внутренних отступов и радиуса скругления: s — компактный (нестед-карточки, попсайды), m — дефолт, l — крупные карточки и модальные поверхности.

Установка

pnpm add @cloud-ru/ds-block

import { Block, SIZE, VIEW } from '@cloud-ru/ds-block'

Примеры использования

Базовое использование

import { Block } from '@cloud-ru/ds-block';

export function Basic() {
  return (
    <Block>
      <span>Your content here</span>
    </Block>
  );
}

С обводкой и большим размером

import { Block } from '@cloud-ru/ds-block';

export function OutlineLarge() {
  return (
    <Block view='outline' size='l'>
      <span>Outline size L</span>
    </Block>
  );
}

Прозрачное матовое стекло

import { Block } from '@cloud-ru/ds-block';
import { BACKGROUND_PREDEFINED_FILL } from '@cloud-ru/ds-materials';

export function Transparent() {
  return (
    <Block backgroundPredefined={BACKGROUND_PREDEFINED_FILL.DecorTransparent} size='m'>
      <span>Transparent</span>
    </Block>
  );
}

Палитра подложек

import { Block } from '@cloud-ru/ds-block';
import { BACKGROUND_PREDEFINED_FILL } from '@cloud-ru/ds-materials';

const FILLS = [
  BACKGROUND_PREDEFINED_FILL.PrimaryBackground,
  BACKGROUND_PREDEFINED_FILL.GreenBackground,
  BACKGROUND_PREDEFINED_FILL.YellowBackground,
  BACKGROUND_PREDEFINED_FILL.RedBackground,
  BACKGROUND_PREDEFINED_FILL.VioletBackground,
] as const;

export function BackgroundPalette() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      {FILLS.map(fill => (
        <Block key={fill} backgroundPredefined={fill} size='m'>
          <span>{fill}</span>
        </Block>
      ))}
    </div>
  );
}

Props

Types

BlockProps

Storybook

Figma