Card
Superfície que agrupa informações e ações relacionadas.
Card é uma composição de sub-componentes tipo slot: CardHeader, CardTitle, CardDescription, CardContent, CardFooter. Você os monta manualmente — o componente não dita o layout além da superfície externa.
Projeto Apollo
Lançamento previsto para a próxima quinta-feira.
Dois sprints restam até o go-live. Acompanhe a timeline no quadro de missão.
import {
Button,
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@uranus-workspace/design-system';
export default function CardDefault() {
return (
<Card className="w-[360px]">
<CardHeader>
<CardTitle>Projeto Apollo</CardTitle>
<CardDescription>Lançamento previsto para a próxima quinta-feira.</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
Dois sprints restam até o go-live. Acompanhe a timeline no quadro de missão.
</p>
</CardContent>
<CardFooter className="justify-end gap-2">
<Button variant="outline" size="sm">
Cancelar
</Button>
<Button size="sm">Publicar</Button>
</CardFooter>
</Card>
);
}
Uso
import {
Button,
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@uranus-workspace/design-system';
<Card>
<CardHeader>
<CardTitle>Projeto Apollo</CardTitle>
<CardDescription>Um novo lançamento na plataforma Uranus.</CardDescription>
</CardHeader>
<CardContent>Conteúdo do corpo vai aqui.</CardContent>
<CardFooter className="justify-end gap-2">
<Button variant="ghost">Cancelar</Button>
<Button>Continuar</Button>
</CardFooter>
</Card>Quando usar
- Listar itens do mesmo tipo (projetos, usuários, faturas).
- Agrupar uma única tarefa com suas ações em uma superfície delimitada.
Quando não usar
- Não é substituto para layout. Se você se pegar aninhando cards dentro de cards, prefira espaçamento, divisores ou um
PageHeader. - Não é para navegação. Um card clicável é aceitável, mas envolva-o em um
<a>ou<button>real para que usuários de teclado consigam alcançá-lo.