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

Default
Paisagem montanhosa

Card Title

Subtitle 1

Hover (hover me)
Paisagem montanhosa

Card Title

Subtitle 1

Active / Selected
Paisagem montanhosa

Card Title

Subtitle 1

Disabled
Paisagem montanhosa

Card Title

Subtitle 1

Loading

Vertical · Media=Icon · Footer=False

Default

Card Title

Subtitle 1

Hover (hover me)

Card Title

Subtitle 1

Active / Selected

Card Title

Subtitle 1

Disabled

Card Title

Subtitle 1

Loading

Vertical · Media=None · Footer=False

Default

Card Title

Subtitle 1

Hover (hover me)

Card Title

Subtitle 1

Active / Selected

Card Title

Subtitle 1

Disabled

Card Title

Subtitle 1

Loading

Vertical · Media=Image · Footer=True (com Avatar + Data + Actions)

Padrão usado em lista de matrículas / cards de aluno.

Default
Paisagem montanhosa

Card Title

Subtitle 1

Atualizado em 19/4/2021
Hover (hover me)
Paisagem montanhosa

Card Title

Subtitle 1

Atualizado em 19/4/2021
Active / Selected
Paisagem montanhosa

Card Title

Subtitle 1

Atualizado em 19/4/2021
Disabled
Paisagem montanhosa

Card Title

Subtitle 1

Atualizado em 19/4/2021
Loading

Horizontal · Media=Image · Footer=False

Default
Paisagem

Card Title

Subtitle 1

Hover (hover me)
Paisagem

Card Title

Subtitle 1

Active / Selected
Paisagem

Card Title

Subtitle 1

Disabled
Paisagem

Card Title

Subtitle 1

Loading

Horizontal · Media=Image · Footer=True

Padrão de lista compacta com meta-info.

Default
Paisagem

Card Title

Subtitle 1

Atualizado em 19/4/2021
Hover (hover me)
Paisagem

Card Title

Subtitle 1

Atualizado em 19/4/2021
Active / Selected
Paisagem

Card Title

Subtitle 1

Atualizado em 19/4/2021
Disabled
Paisagem

Card Title

Subtitle 1

Atualizado em 19/4/2021
Loading

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

Ativo

Composições heterogêneas no body.

Com ação

Card com botão dentro.

Configurações

  • TemaEducation
  • ModoLight