Карточка

Card собирает CardHeader, CardTitle, CardDescription, CardContent и CardFooter, поддерживает тона default, muted, outlined, dashed и danger, настраиваемые отступы и тень, а также рендерится как div, article или section (as) либо как ссылка/кнопка при передаче href или атрибутов кнопки — интерактивная карточка всегда настоящая ссылка или кнопка, а не div с onClick. При рендере как article/section с CardTitle внутри aria-labelledby на Card и id на CardTitle связываются вручную, как в обычном HTML.

Пример

Интерактивный пример

Командный тариф

Неограниченное число проектов с общими досками и документами.

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

Импортируйте компонент из публичной точки входа пакета.

import { Card, CardDescription, CardFooter, CardHeader, CardTitle, Button } from "denjs-ui";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Team plan</CardTitle>
        <CardDescription>
          Unlimited projects with shared boards and docs.
        </CardDescription>
      </CardHeader>
      <CardFooter>
        <Button size="sm">Upgrade</Button>
      </CardFooter>
    </Card>
  );
}