Card
Container multi-direção com slots opcionais (CardMedia, CardHeader, CardContent, CardMeta). Referência: sistema do Figma Alfabeto (60 variants = direction × media × footer × state).
Tudo via tokens. Visual segue o tema ativo (kumon azul, education azul, impactx verde) automaticamente. Border do active state usa var(--color-border-card-active).
Vertical · Media=Image · Footer=False
Card Title
Subtitle 1
Card Title
Subtitle 1
Card Title
Subtitle 1
Card Title
Subtitle 1
Vertical · Media=Icon · Footer=False
Card Title
Subtitle 1
Card Title
Subtitle 1
Card Title
Subtitle 1
Card Title
Subtitle 1
Vertical · Media=None · Footer=False
Card Title
Subtitle 1
Card Title
Subtitle 1
Card Title
Subtitle 1
Card Title
Subtitle 1
Vertical · Media=Image · Footer=True (com Avatar + Data + Actions)
Padrão usado em lista de matrículas / cards de aluno.
Card Title
Subtitle 1
Card Title
Subtitle 1
Card Title
Subtitle 1
Card Title
Subtitle 1
Horizontal · Media=Image · Footer=False
Card Title
Subtitle 1
Card Title
Subtitle 1
Card Title
Subtitle 1
Card Title
Subtitle 1
Horizontal · Media=Image · Footer=True
Padrão de lista compacta com meta-info.
Card Title
Subtitle 1
Card Title
Subtitle 1
Card Title
Subtitle 1
Card Title
Subtitle 1
Composições legadas
API antiga (Card + CardHeader + CardTitle + CardContent) continua funcionando.
Título do card
Conteúdo descritivo, ações ou qualquer composição.
Com badge
Composições heterogêneas no body.
Com ação
Card com botão dentro.
Configurações
- TemaEducation
- ModoLight