Componentes

cards

Módulos que contém informação sobre um objeto.

índice

interactive demo
formatação
uso
guia de conteúdo
guia de design
conteúdo relacionado

interactive demo

Uma versão de interativa do componente desenvolvido.

default

border

interactive

colored

image

propriedades*

property	description	required	default value	type
direction	Choose if card is in column or row direction	`false`	`undefined`	`rowcolumn`
borderDirection	Choose the colored border direction, must be used within `borderColor` prop	`false`	`undefined`	`leftbottom`
borderColor	Choose border color	`false`	`undefined`	`neutralprimarysuccessalertaccentinformativenotice`
variation	Display a colored card based on the value of this prop	`false`	`undefined`	`neutralprimarysuccessalertaccentinformativenotice`
href	Renders an anchor tag with an href attribute	`false`	`undefined`	`string`
target	Specifies where to open the linked document	`false`	`undefined`	`string`
maxWidth	set a maxWidth at Card Component	`false`	`undefined`	`string`

*valores gerados automaticamente.

formatação

Ilustração em baixa fidelidade de um card. Na área externa, marcação de número 1. Na área interna do card, marcação de número 2.

Container: é o objeto que vai conter as informações do card.
Content: é a área onde vai ser inserido o conteúdo do card.

uso

Normalmente são utilizados para apresentar uma pré-visualização de um conteúdo mais denso, apresentando a informação de uma maneira modular e flexível.

Cada card é independente do outro e apresenta informação sobre um determinado assunto. Caso os cards possuam informações muito similares entre si, é preferível dispor os dados em um componente como tabela, que facilita a comparação das informações.

Tabela de produtos com preço. Objetos diversos com valor fictício de 0 reais.

certoUtilize componentes que facilitem a comparação entre itens.

Grade de cards de produtos com preço e imagem. Os produtos são diversos com o valor fictício de 0 reais.

erradoNão utilize cards para mostrar informações de natureza similar.

variações

O cards pode conter qualquer tipo de conteúdo, desde que dentro do container e seguindo as boas práticas descritas anteriormente. Entretanto, para facilitar o uso dos cards e manter a sua consitência visual, existem alguns padrões que podem ser utilizados.

variação	utilização
Com destaque	Pode ser usado para reforçar a situação de um card, como pedido em atraso (é importante que a cor do card não seja a única indicação de estado).
Com imagem	Quando uma imagem facilitar a identificação da informação.
Não clicável	Quando o card não possuir interação.
Com mais de uma zona clicável	Quando possuir mais de um tipo de interação, as áreas de destaque devem ser fáceis de identificar.

grupos e alinhamento

Quando agrupado a outros cards, deve-se manter a distância $spacing-stack-medium e $spacing-inline-medium entre os cards.

Grade de cards em página web. No espaçamento entre colunas, o destaque de número 1. No espaçamento entre linhas, o destaque número 2.

Espaçamento inline.
Espaçamento stack.

guia de conteúdo

Utilize um card por conteúdo.
Traga um conteúdo sucinto que pode ser melhor explorado em outra área da aplicação.
Utilize botões caso haja mais de uma área clicável.
Evite muitas ações no card.

guia de design

Tem guia de uso.
Tem guia de conteúdo.
Usa os design tokens.
Tem símbolo no Figma.
Possui motion.

Possui versão web.
Possui versão responsiva.
Possui versão mobile.
É acessível via leitor de tela.
Texto possui contraste acessível (WCAG 2.0 - Nível AA).