InfoBlock
Типовой блок информации: заголовок, описание, опциональные иконка и футер с действиями. Используется в пустых состояниях, онбординге, подсказках и хедерах разделов.
Демо
Заголовок блока
Пояснительный текст, который помогает пользователю понять контекст.
Prop
Type
Value
alignvertical | horizontal
contenttext
data-test-idtext
sizes | m | l
titletext
Code
<InfoBlock align="vertical" size="s" title="Заголовок блока" content="Пояснительный текст, который помогает пользователю понять контекст." />Когда использовать
- Пустое состояние списка/таблицы («Нет данных», «Ничего не найдено»).
- Подсказка внутри формы или карточки.
- Заголовок раздела с подзаголовком и кнопками действия.
- Информационная вставка над списком — например, объяснение статуса.
Когда не нужен: если нужен только заголовок без описания — возьмите Typography. Если нужна полноценная карточка с рамкой — возьмите компонент-карточку.
Анатомия
Size
Три размера: s — для плотных мест (карточки, тосты), m — дефолт, l — для крупных empty-states и лендинг-секций.
Align
vertical — иконка сверху, текст под ней (центрированные empty-states); horizontal — иконка слева, текст справа (строки списков, инлайн-подсказки).
Установка
pnpm add @cloud-ru/ds-info-blockimport { InfoBlock } from '@cloud-ru/ds-info-block'Примеры использования
Базовый блок
Заголовок
Короткое описание под заголовком.
tsx
import { InfoBlock } from '@cloud-ru/ds-info-block';
export function Basic() {
return <InfoBlock title='Заголовок' content='Короткое описание под заголовком.' />;
}Горизонтальное выравнивание
Горизонтальный вариант
Иконка (если есть) и текст располагаются в строку.
tsx
import { InfoBlock } from '@cloud-ru/ds-info-block';
export function Horizontal() {
return (
<InfoBlock
align='horizontal'
size='m'
title='Горизонтальный вариант'
content='Иконка (если есть) и текст располагаются в строку.'
/>
);
}Три размера
Size S
Компактный блок
Size M
Средний блок
Size L
Крупный блок для пустых состояний
tsx
import { InfoBlock } from '@cloud-ru/ds-info-block';
export function Sizes() {
return (
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
<InfoBlock size='s' title='Size S' content='Компактный блок' />
<InfoBlock size='m' title='Size M' content='Средний блок' />
<InfoBlock size='l' title='Size L' content='Крупный блок для пустых состояний' />
</div>
);
}С иконкой
С иконкой
Иконка передаётся через проп icon как IconPredefinedProps.
tsx
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { InfoBlock } from '@cloud-ru/ds-info-block';
export function WithIcon() {
return (
<InfoBlock
title='С иконкой'
content='Иконка передаётся через проп icon как IconPredefinedProps.'
icon={{ icon: PlaceholderSVG, appearance: 'primary', background: true }}
/>
);
}Props
Types
Props
InfoBlockProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
align | "horizontal" | "vertical" | vertical | no | Расположение элементов |
className | string | — | no | Дополнительный класс |
content | ReactNode | — | no | Подзаголовок |
data-test-id | string | — | no | |
footer | ReactNode | — | no | Вложенный контент (например ButtonGroup) |
icon | IconPredefinedProps | — | no | Иконка |
size | "l" | "m" | "s" | m | no | Размер |
title | string | — | no | Заголовок |