ItemCard

O ItemCard mostra um item como linha-cartão: ícone, título, descrição e um controle à direita (botão, chip, interruptor). No celular ele substitui as linhas das tabelas de Pedidos e de Fontes. O ItemCardGroup reúne vários cartões em lista ou grade, com título e descrição da seção.

import { ItemCard, ItemCardGroup } from "@rastreio-x/ui";

Padrão

Ícone, conteúdo e ação são opcionais; use só o que o item precisa.

Variantes

Cinco variantes: default (superfície com sombra suave), secondary (sem sombra, para usar dentro de outras superfícies), tertiary, outline e transparent.

Com interruptor

O interruptor leva aria-label, porque o título está em outro elemento.

Clicável

Para o cartão inteiro virar um botão (ou link), troque o elemento com render e adicione PressableFeedback.Highlight para o retorno ao toque.

Lista de Pedidos no celular

Cada linha da tabela vira um ItemCard com o estado em ícone mais texto.

Grupo com cabeçalho

ItemCardGroup junta os cartões num bloco, com ItemCardGroup.Header, .Title e .Description.

Grupo em grade

layout="grid" e columns (2 ou 3) distribuem os cartões lado a lado.

Variantes do grupo

O grupo aceita as mesmas variantes e as repassa aos cartões.

Fontes no Admin

Anatomia

• ItemCard.Icon: ícone à esquerda (decorativo, com aria-hidden).
• ItemCard.Content: coluna com ItemCard.Title e ItemCard.Description.
• ItemCard.Action: controle à direita.

• ItemCardGroup.Header, .Title (um h3) e .Description: o cabeçalho da seção.

Propriedades

ItemCard:

ItemCardGroup:

Animações

O ItemCard não anima sozinho. Quando clicável, PressableFeedback.Highlight (ou Ripple) dá o retorno ao toque, e a folha global da fachada reduz as transições a 0,01 ms com prefers-reduced-motion.

Acessibilidade

• O cartão é um div; quando clicável via render, vira button ou a e entra na ordem de tabulação.
• O título dá o nome do item; nunca deixe o cartão clicável sem texto.
• Controles em ItemCard.Action precisam do próprio aria-label quando o rótulo está fora deles.
• Estado vai em ícone mais texto (Chip), nunca só cor.
• ItemCardGroup.Title é um h3: respeite a hierarquia de títulos da página.

Boas práticas

• Use secondary ou transparent dentro de Widget e de Sheet.
• Tabela no desktop, ItemCard no celular: não force a tabela estreita.
• Cartão clicável leva um affordance (seta) à direita.

Relacionados

• DataGrid para a versão em tabela no desktop.
• ListView para listas com seleção e teclado.
• Switch e Chip como ações do cartão.