Card

Паттерны

Поверхность настроек

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

• Небольшой набор связанных настроек должен находиться на одной поверхности.

Заметки по композиции:

• Явно задавайте заголовки и внутренние отступы.
• Поверхность отвечает за группировку, а не за каждое решение об отступах.

Компромиссы:

• Сильная визуальная группировка.
• Легко злоупотребить ею как универсальной обёрткой с отступами.

import { FormEvent, useState } from 'react';
import { Button, Card, Heading, Label, Text, TextField, TextFieldInput } from '@vega-ui/react';

export default function SettingsFormCard() {
  const [saved, setSaved] = useState('');

  const submit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    setSaved(`Saved “${data.get('workspace')}” at ${data.get('slug')}.vega.app`);
  };

Поверхность метрик или сводки

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

• Дашборду или экрану оплаты нужно сгруппированное сводное содержимое.

Заметки по композиции:

• Делайте ключевые метрики визуально заметными внутри карточки.
• Используйте иерархию содержимого, а не только оформление поверхности.

Компромиссы:

• Хорошо подходит для сводок и сгруппированных метаданных.
• Плохо подходит, когда содержимое на деле — одна встроенная метка.

import { useState } from 'react';
import { Button, Card, Heading, Spinner, Text } from '@vega-ui/react';

const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });

export default function MetricsCard() {
  const [revenue, setRevenue] = useState(48210.4);
  const [updatedAt, setUpdatedAt] = useState('09:00');
  const [loading, setLoading] = useState(false);

  const refresh = () => {
    setLoading(true);

Навигационная поверхность

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

• Одна сгруппированная поверхность должна вести на более глубокий экран.

Заметки по композиции:

• Используйте asChild с настоящей ссылкой или ссылкой роутера.
• Из содержимого карточки должно быть понятно, куда она ведёт.

Компромиссы:

• Хорошо подходит для точек входа на дашборде.
• При злоупотреблении легко смешать семантику раскладки и навигации.

import { Card, Heading, Text } from '@vega-ui/react';
import './examples.css';

const destinations = [
  { href: '#billing', title: 'Billing', description: 'Plan, invoices and payment methods.' },
  { href: '#members', title: 'Members', description: '18 members, 3 pending invitations.' },
  { href: '#security', title: 'Security', description: 'Two-factor authentication, sessions and SSO.' },
];

export default function LinkCards() {
  return (
    <nav aria-label='Workspace settings' style={{ width: '100%' }}>

Сравнение

Быстрое правило выбора

Используйте Card, когда сгруппированному содержимому нужен контейнер-поверхность.

Card или Alert

Используйте Card, когда:

• содержимое — сгруппированная раскладка, а не сообщение обратной связи

Используйте Alert, когда:

• содержимое — короткое семантическое сообщение обратной связи или статуса

Главный компромисс: карточка — поверхность для содержимого, а alert — обратная связь в виде сообщения.

Card или Badge

Используйте Card, когда:

• нужно сгруппировать несколько связанных фрагментов содержимого

Используйте Badge, когда:

• нужна лишь маленькая метка статуса или категории

Главный компромисс: карточка — контейнер, а badge — компактная метка.

Card или Fieldset

Используйте Card, когда:

• группировка относится к раскладке или представлению

Используйте Fieldset, когда:

• группировка — семантическая структура формы

Выбирайте этот компонент, когда

• Сгруппированному содержимому нужна отдельная поверхность.
• Раскладке полезен один ограниченный контейнер.
• Заголовки, метрики или настройки должны восприниматься как связанные.
• компонент должен оставаться нейтральным и не нести семантику обратной связи или статуса

Не выбирайте этот компонент, когда

• Содержимое — просто короткое сообщение обратной связи.
• Интерфейсу нужна только маленькая метка статуса.
• Оформление поверхности было бы единственным источником иерархии.

Решение проблем

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

Симптом

Поверхность есть, но пользователь всё равно не может быстро просмотреть содержимое.

Вероятная причина

Карточка используется как универсальная обёртка без внутренней структуры заголовков и отступов.

Как проверить

• Мысленно уберите рамку карточки и оцените оставшуюся иерархию содержимого.

Исправление

• Добавьте заголовки, отступы и более понятную внутреннюю раскладку.
• Рассматривайте карточку как группировку, а не как всю информационную архитектуру.

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

Симптом

Сгруппированная поверхность теряет отделение и выглядит визуально плоской.

Вероятная причина

appearance='transparent' используется на низкоконтрастном или шумном фоне.

Как проверить

• Сравните прозрачную карточку с реальной родительской поверхностью.

Исправление

• Вернитесь к outline.
• Усильте контраст родительской поверхности или иерархию содержимого.