Componentes

Card

Agrupar conteúdo relacionado em um bloco com título/ações.

Dados e layout

Carregando demonstração…

Código da demo
"use client";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export function Demo() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Projeto</CardTitle>
        <CardDescription>Resumo do card com ações.</CardDescription>
        <CardAction>
          <Button size="sm" variant="outline">
            Editar
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent>
        <p className="fe-body text-muted-foreground">
          Conteúdo principal usando tokens de superfície e tipografia.
        </p>
      </CardContent>
      <CardFooter>
        <Button className="w-full">Continuar</Button>
      </CardFooter>
    </Card>
  );
}

Use

  • Agrupar um conteúdo com título e, se preciso, uma ação.
  • O card é o degrau 1 da escada, sobre o fundo.

Não use

  • Não aninhe card em card: use o degrau 2 (superfície elevada).
  • Não use borda para separar: a separação vem da superfície.
Acessibilidade
Títulos semânticos; ações com rótulos claros.
Importar
import { Card, CardHeader, CardTitle, CardContent } from "@financeequity/ui/card"

Neste repositório:

import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"