Карточки

1. Базовые карточки

Заголовок карточки

Автоматически добавляет заголовок и разделитель

Минимальная карточка

Без заголовка, без стикеров

Длинный заголовок который может переноситься на несколько строк

Демонстрация переноса текста заголовка

2. Стикер-иконки

Квадратные стикеры со скруглением как у карточки

Важно

Желтая звезда

Новинка

Зеленая молния

Скидка

Красный ярлык

Инфо

Синяя информация

3. Цветные шапки, фоны и подвалы

Важное объявление

Шапка красная (#dc3545), подвал темно-серый (#6c757d)

Опубликовано: сегодня

Фон с поддержкой темы

Светлая тема: светло-зеленый (#e8f5e9)

Темная тема: темно-зеленый (#1a2e1a)

Переключите тему — цвет изменится

4. Состояния

Кликабельная

Наведите курсор - появится тень

Кликните для перехода

С наведением

Эффект тени при наведении

Без ссылки

5. Сложная сетка

Разная ширина, разная высота, 2D расположение

Профиль пользователя

Иван Петров

ivan@example.com

Онлайн

Статистика

Посещения

1,234

Заказы

Доход

124,500 ₽

Новые

Активные сессии

Chrome 127.0.0.1

Firefox 192.168.1.5

Safari 10.0.0.12

Безопасность

2FA Включена

Последний вход 11.02.2026

Неудачные попытки 3

Системная информация

Версия 2.5.0 Stable Python 3.11 Flask 2.3

Последнее обновление: 11.02.2026

6. Ширина в сетке

1/4 ширины (4 колонки)

1/4

Колонка 1

1/4

Колонка 2

1/4

Колонка 3

1/4

Колонка 4

1/2 ширины (2 колонки)

1/2

Левая колонка

1/2

Правая колонка

2/3 + 1/3

1/3 ширины

Боковая панель

2/3 ширины

Основной контент

7. Равная высота

* Карточки растягиваются до высоты самой высокой

Короткий контент

Одна строка

Средний контент

Первая строка

Вторая строка

Третья строка

Длинный контент

Строка 1

Строка 2

Строка 3

Строка 4

Строка 5

8. Разная высота

* Высота карточек зависит только от контента