CardItem

Tipo: Componente Angular

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-stylesAinda não disponível
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

O CardItem é um componente interativo utilizado para listar opções de ação, links ou modos de visualização. Ele combina elementos visuais e descritivos para orientar a escolha do usuário, oferecendo um feedback visual claro de que a área é clicável.

Anatomia e Diretrizes de Escrita

Ícone de Contexto (Esquerda): Ajuda no reconhecimento visual da categoria da ação (ex: ícone de tabela para Visão Tabela).
Rótulo (Label): O nome da ação ou opção. Use Caixa de Título e negrito.
- Exemplo: Visão em Tabela, Configurações de Pátio.
Descrição (Description): Texto curto que detalha o que acontecerá ao clicar. Use Caixa de Sentença.
- Exemplo: Exiba seus fretes em formato de lista detalhada ou Ajuste os parâmetros das suas docas.
Indicador de Navegação (Chevron): Seta à direita (proximo) que reforça a natureza de “link” do componente.
Interatividade: Todo o corpo do card deve possuir um estado de hover (mudança leve de cor ou elevação) para confirmar que é clicável.

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

Angular (mds-angular)

Seletor

mds-card-item

Card de ação para listagem de itens com link

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`'d-flex flex-grow-1'`	Classe CSS customizada adicionada ao host
`mode`	`'vertical' \| 'horizontal'`	`'horizontal'`	Modo da disposição de visualização do componente
`label`	`string`	`''`	Titulo do card
`labelEllipsis`	`boolean`	`true`	Habilita ellipsis para cortar o tamanho do label excedente a largura
`description`	`string`	`''`	Texto de apoio / descrição
`additionalClass`	`string`	`''`	Classe adicional para o card
`size`	`MdsSizes`	`'sm'`	Tamanho do card
`icon`	`MdsIconAlias \| null`	`null`	Icone do item
`showAvatar`	`boolean`	`true`	Exibe o avatar
`autoVariant`	`boolean`	`false`	Variante do Avatar automático
`variant`	`MdsAvatarVariants`	`'default'`	Variante do Avatar
`routerLink`	`string[] \| undefined`	`undefined`	Link da rota usando o Router
`href`	`string \| undefined`	`undefined`	href normal para o link
`target`	`string`	`'self'`	Target do link
`highlight`	`string \| undefined`	`undefined`	Texto para destacar
`showArrow`	`boolean`	`true`	Exibe a seta indicativa de ação
`loading`	`boolean`	`false`	Controla animação de destaque para ação ocorrendo no card
`updated`	`boolean`	`false`	Destaca o card para informar que teve atualização
`disabled`	`boolean`	`false`	Alteração visual para o item desabilitado
`menuItem`	`boolean`	`false`	Ajustes para item de menu

Outputs

Output	Payload	Descrição
`onCtrlClick`	`MouseEvent`	Evento emitido no ctel+click no elemento

Slots

Conteúdo projetado com o atributo data-position:

data-position="after-label"
data-position="after-content"

CardItem — Figma (Design System 2.0) ↗