Card

Container de superfície composto por `mk-card` e sete sub-componentes de composição (capa, cabeçalho, corpo, badges, avaliação, estatística e ações).

O Card não é um componente único — é uma composição. Você monta o card combinando blocos (mk-card-*) dentro do container raiz mk-card, que renderiza como um <article> semântico de superfície (borda, raio, elevação). Cada bloco é um wrapper de composição: recebe outros componentes como filhos, carrega o próprio espaçamento e não expõe props de dados. Não existe um "conteúdo solto" do card — todo conteúdo vive dentro de um bloco.

Anatomia

Um card é sempre montado a partir de blocos. Todos são opcionais — use apenas os que precisar, em qualquer combinação:

<MkCard>
  <MkCardCover>…</MkCardCover>     {/* topo — slot "cover" (auto) */}
  <MkCardHeader>…</MkCardHeader>   {/* cabeçalho — slot "header" (auto) */}
  <MkCardBadges>…</MkCardBadges>   {/* fluxo — slot padrão */}
  <MkCardBody>…</MkCardBody>       {/* fluxo — slot padrão */}
  <MkCardRating>…</MkCardRating>   {/* fluxo — slot padrão */}
  <MkCardStat>…</MkCardStat>       {/* fluxo — slot padrão */}
  <MkCardActions>…</MkCardActions> {/* rodapé — slot "actions" (auto) */}
</MkCard>

<mk-card>
  <mk-card-cover>…</mk-card-cover>     <!-- topo — slot "cover" (auto) -->
  <mk-card-header>…</mk-card-header>   <!-- cabeçalho — slot "header" (auto) -->
  <mk-card-badges>…</mk-card-badges>   <!-- fluxo — slot padrão -->
  <mk-card-body>…</mk-card-body>       <!-- fluxo — slot padrão -->
  <mk-card-rating>…</mk-card-rating>   <!-- fluxo — slot padrão -->
  <mk-card-stat>…</mk-card-stat>       <!-- fluxo — slot padrão -->
  <mk-card-actions>…</mk-card-actions> <!-- rodapé — slot "actions" (auto) -->
</mk-card>

mk-card-cover, mk-card-header e mk-card-actions se auto-atribuem ao slot correto quando filhos diretos de mk-card. Os blocos de fluxo (mk-card-body, mk-card-badges, mk-card-rating, mk-card-stat) ocupam o slot padrão e aparecem na ordem do documento — você controla a sequência pela ordem em que os escreve.

Bloco	Região	Papel
`mk-card-cover`	Topo (slot `cover`, auto)	Imagem ou vídeo edge-to-edge. Aceita a prop `ratio`.
`mk-card-header`	Cabeçalho (slot `header`, auto)	Avatar, título e subtítulo, com padding interno.
`mk-card-body`	Fluxo (slot padrão)	Bloco de conteúdo principal — texto, listas, composição livre.
`mk-card-badges`	Fluxo (slot padrão)	Fileira de `mk-chip`.
`mk-card-rating`	Fluxo (slot padrão)	`mk-rating` + `mk-rating-tag` lado a lado.
`mk-card-stat`	Fluxo (slot padrão)	Valor em destaque sobre rótulo. Aceita a prop `size`.
`mk-card-actions`	Rodapé (slot `actions`, auto)	Botões/ações alinhados à direita, com divisória superior.

Padrão

Mesmo o card mais simples é uma composição: combine mk-card-header e mk-card-body.

import { MkCard, MkCardHeader, MkCardBody } from '@db1/makuco-ui-react';

<MkCard>
  <MkCardHeader>
    <h3 className="mk-typography-title-md">Título do card</h3>
  </MkCardHeader>
  <MkCardBody>
    <p className="mk-typography-body-md-regular">Conteúdo principal do card.</p>
  </MkCardBody>
</MkCard>

<mk-card>
  <mk-card-header>
    <h3 class="mk-typography-title-md">Título do card</h3>
  </mk-card-header>
  <mk-card-body>
    <p class="mk-typography-body-md-regular">Conteúdo principal do card.</p>
  </mk-card-body>
</mk-card>

Dimensões

O mk-card não define largura nem altura próprias — o dimensionamento vem do contexto, não do componente:

Largura — o card é display: block e ocupa 100% da largura do elemento pai. Para limitá-lo, defina width ou max-width no container que o envolve (ou no próprio mk-card).
Altura — segue o conteúdo. Os blocos são empilhados em coluna e cada um carrega o próprio espaçamento; não há altura fixa nem aspect-ratio no card.

Para travar uma proporção fixa, use a prop ratio em mk-card-cover (veja Capa). Ela trava apenas a área da capa — não o card inteiro.

Capa

mk-card-cover ocupa toda a largura no topo, edge-to-edge, sem espaçamento interno. Ideal para imagens e vídeos.

import { MkCard, MkCardCover, MkCardBody } from '@db1/makuco-ui-react';

<MkCard>
  <MkCardCover>
    <img src="cover.jpg" alt="Capa do produto" />
  </MkCardCover>
  <MkCardBody>
    <p className="mk-typography-body-md-regular">Descrição.</p>
  </MkCardBody>
</MkCard>

<mk-card>
  <mk-card-cover>
    <img src="cover.jpg" alt="Capa do produto" />
  </mk-card-cover>
  <mk-card-body>
    <p class="mk-typography-body-md-regular">Descrição.</p>
  </mk-card-body>
</mk-card>

Proporção (`ratio`)

A prop ratio em mk-card-cover trava a capa em uma proporção fixa e faz a mídia preencher a área (object-fit: cover, recortando o excesso): square (1:1), wide (16:9) ou standard (4:3). Quando ausente, a capa segue a altura natural da mídia.

Como a mídia é posicionada fora do fluxo para respeitar a proporção, ela não contribui com largura intrínseca — por isso o card precisa de uma width própria quando ratio é usado, senão a capa colapsa.

import { MkCard, MkCardCover } from '@db1/makuco-ui-react';

<MkCard style={{ width: '240px' }}>
  <MkCardCover ratio="wide">
    <img src="cover.jpg" alt="Capa do produto" />
  </MkCardCover>
</MkCard>

<mk-card style="width: 240px">
  <mk-card-cover ratio="wide">
    <img src="cover.jpg" alt="Capa do produto" />
  </mk-card-cover>
</mk-card>

Cabeçalho

mk-card-header dispõe avatar, título e subtítulo alinhados ao centro, com padding interno.

import { MkCard, MkCardHeader, MkAvatar } from '@db1/makuco-ui-react';

<MkCard>
  <MkCardHeader>
    <MkAvatar size="md" shape="circle" />
    <div>
      <span className="mk-typography-body-md-semi-bold">Card title</span>
      <span className="mk-typography-body-sm-regular">Supporting subtitle</span>
    </div>
  </MkCardHeader>
</MkCard>

<mk-card>
  <mk-card-header>
    <mk-avatar size="md" shape="circle"></mk-avatar>
    <div>
      <span class="mk-typography-body-md-semi-bold">Card title</span>
      <span class="mk-typography-body-sm-regular">Supporting subtitle</span>
    </div>
  </mk-card-header>
</mk-card>

Badges

mk-card-badges dispõe uma fileira de mk-chip. É um wrapper de composição: não recria os chips, apenas os organiza. Com um único chip, o espaçamento entre itens é zerado.

import { MkCard, MkCardBadges, MkChip } from '@db1/makuco-ui-react';

<MkCard>
  <MkCardBadges>
    <MkChip variant="subtle" color="violet" label="Novo" />
    <MkChip variant="subtle" color="cyan" label="Promoção" />
  </MkCardBadges>
</MkCard>

<mk-card>
  <mk-card-badges>
    <mk-chip variant="subtle" color="violet" label="Novo"></mk-chip>
    <mk-chip variant="subtle" color="cyan" label="Promoção"></mk-chip>
  </mk-card-badges>
</mk-card>

Avaliação

mk-card-rating dispõe mk-rating e mk-rating-tag lado a lado, reaproveitando os componentes de avaliação existentes.

import { MkCard, MkCardRating, MkRating, MkRatingTag } from '@db1/makuco-ui-react';

<MkCard>
  <MkCardRating>
    <MkRating value={4.5} allowHalf readonly showScore />
    <MkRatingTag value={4.5} count="128" />
  </MkCardRating>
</MkCard>

<mk-card>
  <mk-card-rating>
    <mk-rating [value]="4.5" allow-half readonly show-score></mk-rating>
    <mk-rating-tag [value]="4.5" count="128"></mk-rating-tag>
  </mk-card-rating>
</mk-card>

Estatística

mk-card-stat exibe um valor em destaque sobre um rótulo descritivo. A prop size controla a escala visual do valor (sm, md, lg); value e label são fornecidos via slots nomeados.

import { MkCard, MkCardStat } from '@db1/makuco-ui-react';

<MkCard>
  <MkCardStat size="md">
    <span slot="value">24.890</span>
    <span slot="label">Usuários totais</span>
  </MkCardStat>
</MkCard>

<mk-card>
  <mk-card-stat size="md">
    <span slot="value">24.890</span>
    <span slot="label">Usuários totais</span>
  </mk-card-stat>
</mk-card>

Ações

mk-card-actions ocupa o rodapé com botões alinhados à direita, separados do conteúdo acima por uma divisória superior automática.

import { MkCard, MkCardBody, MkCardActions, MkButton } from '@db1/makuco-ui-react';

<MkCard>
  <MkCardBody>
    <p className="mk-typography-body-md-regular">Conteúdo do card.</p>
  </MkCardBody>
  <MkCardActions>
    <MkButton variant="outlined">Cancelar</MkButton>
    <MkButton variant="filled">Confirmar</MkButton>
  </MkCardActions>
</MkCard>

<mk-card>
  <mk-card-body>
    <p class="mk-typography-body-md-regular">Conteúdo do card.</p>
  </mk-card-body>
  <mk-card-actions>
    <mk-button variant="outlined">Cancelar</mk-button>
    <mk-button variant="filled">Confirmar</mk-button>
  </mk-card-actions>
</mk-card>

Composição completa

Todos os blocos combinados — capa, cabeçalho, badges, corpo, avaliação e ações — em ordem de documento.

Props — mk-card-cover

Prop	Tipo	Padrão	Descrição
`ratio`	`"square" \| "wide" \| "standard"`	—	Proporção fixa da capa: `square` (1:1), `wide` (16:9), `standard` (4:3). Quando ausente, a capa segue a altura natural da mídia.

Props — mk-card-stat

mk-card-cover e mk-card-stat são os sub-componentes com prop. Os demais configuram-se exclusivamente via slots.

Prop	Tipo	Padrão	Descrição
`size`	`"sm" \| "md" \| "lg"`	`"sm"`	Escala visual do valor em destaque. `sm`: valor heading-sm / rótulo caption. `md`: valor heading-md / rótulo body-sm. `lg`: valor heading-lg / rótulo body-sm.

Slots

Componente	Slot	Descrição
`mk-card`	`cover`	Capa edge-to-edge. Preenchido por `mk-card-cover`.
`mk-card`	`header`	Cabeçalho. Preenchido por `mk-card-header`.
`mk-card`	(default)	Área de fluxo: `mk-card-body`, `mk-card-badges`, `mk-card-rating` e `mk-card-stat` em ordem de documento.
`mk-card`	`actions`	Área de ações com divisória. Preenchido por `mk-card-actions`.
`mk-card-stat`	`value`	Valor em destaque (alta ênfase).
`mk-card-stat`	`label`	Rótulo descritivo (baixa ênfase).

Acessibilidade

O mk-card renderiza como um elemento <article> semântico, apropriado para um bloco de conteúdo independente e autocontido.
Nenhum role interativo é aplicado — o card é um container e não captura foco nem eventos de clique.
A hierarquia de heading dentro do mk-card-header é responsabilidade do consumidor: use o nível de <h2>–<h6> adequado ao contexto da página.
Conteúdo de mídia no mk-card-cover deve incluir alt descritivo quando relevante.
Em mk-card-stat, mantenha o slot value antes do label para que leitores de tela anunciem a métrica seguida da sua descrição.

Card

On this page