Card
Container de conteúdo agrupado (header/body/footer) — a unidade do dashboard (KPI e widgets).
UCard), ainda não internalizado no EletroDS — confira o comportamento antes de usar no ME.O Card agrupa conteúdo relacionado (header · body · footer) numa superfície com borda. Ele aparece em dois papéis no ME — não confunda:
- Card (conteúdo) — um item em modo de visualização: catálogo e listas renderizadas como cards. Mostra um registro (imagem/avatar, título, atributos, status, ações).
- Widget — a unidade do dashboard: um KPI com número ou um gráfico, com header, período e menu ⋮. É um card especializado, documentado em Widgets.
O Card também agrupa blocos em telas de detalhe e formulário.
Card × Widget
Mesma base (superfície com borda), papéis distintos: o Card apresenta um item; o Widget apresenta uma métrica/gráfico.
Card — item em modo de visualização
SKU-10293 · Fixadores
Fornecedor: Aço Brasil Ltda
Mostra um registro/item (catálogo, listas em modo card): imagem/avatar, título, atributos, status e ações.
Widget — KPI com número
124
+12%248
+5%Mostra uma métrica (KPI/contador) ou um gráfico no dashboard: número grande, variação e menu ⋮. Detalhe em Widgets.
Variantes
| Quero… | Use |
|---|---|
| Widget KPI (número + variação) | Card especializado: rótulo + número grande + delta + ⋮ — ver Widgets |
| Widget de gráfico | Card como moldura: o gráfico é um slot (lib externa) — não há componente de chart no DS/Nuxt UI |
| Card de conteúdo (modo view) | Imagem/avatar + título + atributos + status + ações (catálogo, listas em card) |
| Agrupar um bloco de formulário/detalhe | Card com header (título do bloco) + body |
| Densidade da borda | variant (outline padrão) |
Estados
| Estado | Comportamento |
|---|---|
| Default | Header opcional + body + footer opcional. |
| Loading | Skeleton no body enquanto carrega o dado do widget. |
| Vazio | Empty state dentro do card quando não há dado. |
No código
UCard — doc técnica em ui.nuxt.com/docs/components/card.
Card View (bloco) e carrossel — no documento
O modo cards de uma tabela e o carrossel de itens usam o block MeCardView (EletroDS) — não o UCard cru. Ele renderiza um grid de cards a partir de :data (CardViewItemData): { id, title, description, image, badges[{icon,color,description}], cart:{modelValue,min,onClick} }, com props selectable/favorite (v-model card-selection/card-favorite), card-height (default 448px) e slots #header, #card-header, #card-image, #card-default, #card-extra-content (ex.: "Por: fornecedor" + tags), #card-footer.
- Catálogo do fornecedor: MeCardView sem cart/select/favorite (só leitura); header/footer do card removidos.
- Itens com contrato / Itens relacionados: MeCardView com select + favoritar + cart (stepper + carrinho).
- Carrossel (Produto › Itens relacionados):
UCarousel(Nuxt UI, Embla) com 1MeCardViewpor slide (mesmo card). Setas via:ui="{ prev:'start-1', next:'end-1' }"(o default sai da tela). Ver Carousel edocs/documento-anatomia-me.md§9.
Acessibilidade
O título do card deve ser um heading real (não texto solto), para navegação por leitor de tela. Card puramente decorativo não deve capturar foco.