Card
@vincisys/eyeson

Card

Container de agrupamento com cabeçalho, conteúdo e rodapé opcionais.

Voos do dia

Atualizado há 2 minutos

12 voos programados para hoje.
Visualizar 
import { Card } from "@vincisys/eyeson";

export function CardBasicDemo() {
	return (
		<Card className="max-w-sm">
			<Card.Header>
				<Card.Title>Voos do dia</Card.Title>
				<Card.Description>Atualizado há 2 minutos</Card.Description>
			</Card.Header>
			<Card.Content>
				<p className="text-sm text-eds-neutral-main">
					12 voos programados para hoje.
				</p>
			</Card.Content>
		</Card>
	);
}

Instalação

import { Card } from '@vincisys/eyeson';

Uso

import { Card } from '@vincisys/eyeson';

export function Example() {
return (
  <Card>
    <Card.Header>
      <Card.Title>Voos do dia</Card.Title>
      <Card.Description>Atualizado há 2 minutos</Card.Description>
    </Card.Header>
    <Card.Content>
      <p>12 voos programados</p>
    </Card.Content>
  </Card>
);
}

Exemplos

Básico

Voos do dia

Atualizado há 2 minutos

12 voos programados para hoje.
Visualizar 
import { Card } from "@vincisys/eyeson";

export function CardBasicDemo() {
	return (
		<Card className="max-w-sm">
			<Card.Header>
				<Card.Title>Voos do dia</Card.Title>
				<Card.Description>Atualizado há 2 minutos</Card.Description>
			</Card.Header>
			<Card.Content>
				<p className="text-sm text-eds-neutral-main">
					12 voos programados para hoje.
				</p>
			</Card.Content>
		</Card>
	);
}

Com ação no cabeçalho

Use Card.Action para posicionar um controle (geralmente um IconButton) ao lado do título e da descrição.

Manutenções

3 pendências abertas

Revise os itens antes do próximo voo.
Visualizar 
import { Card, IconButton } from "@vincisys/eyeson";
import { RefreshCw } from "lucide-react";

export function CardWithActionDemo() {
	return (
		<Card className="max-w-sm">
			<Card.Header>
				<Card.Title>Manutenções</Card.Title>
				<Card.Description>3 pendências abertas</Card.Description>
				<Card.Action>
					<IconButton icon={RefreshCw} label="Atualizar" size="sm" />
				</Card.Action>
			</Card.Header>
			<Card.Content>
				<p className="text-sm text-eds-neutral-main">
					Revise os itens antes do próximo voo.
				</p>
			</Card.Content>
		</Card>
	);
}

Com rodapé

Card.Footer segue o mesmo padrão do Dialog: fundo cinza claro (eds-neutral-background), borda superior e ações alinhadas à direita.

Nova aeronave

Cadastro rápido

Preencha os dados para concluir o cadastro.
Visualizar 
import { Button, Card } from "@vincisys/eyeson";

export function CardWithFooterDemo() {
	return (
		<Card className="max-w-sm">
			<Card.Header>
				<Card.Title>Nova aeronave</Card.Title>
				<Card.Description>Cadastro rápido</Card.Description>
			</Card.Header>
			<Card.Content>
				<p className="text-sm text-eds-neutral-main">
					Preencha os dados para concluir o cadastro.
				</p>
			</Card.Content>
			<Card.Footer>
				<Button text="Cancelar" variant="outline" size="sm" />
				<Button text="Salvar" size="sm" />
			</Card.Footer>
		</Card>
	);
}

API

Card é um compound component: Card.Header, Card.Title, Card.Description, Card.Action, Card.Content e Card.Footer. Todos aceitam className e demais props nativas de <div>/<h3>/<p>.