Card
Cards agrupam conteúdo e ações relacionados. Disponíveis nas variantes default, outlined e elevated.Cards group related content and actions. Available in default, outlined, and elevated variants.
Quando usarWhen to use
Use cards quandoUse cards when
Agrupar informações relacionadas: listagens de produtos, previews de conteúdo, widgets de dashboard. Cards criam limites visuais que ajudam os usuários a escanear e comparar conteúdos distintos.Grouping related information: product listings, content previews, dashboard widgets. Cards create visual boundaries that help users scan and compare discrete pieces of content.
Não use cards quandoDon't use cards when
Exibir o resultado de uma ação única (use Alert), construir seções de página inteira (use primitivos de layout), ou apresentar dados tabulares densos (use linhas de tabela).Displaying a single action result (use Alert), building full-page sections (use layout primitives), or presenting dense tabular data (use a table row instead).
AnatomiaAnatomy
Card Title
Subtitle text
Body content goes here. This is a flexible slot for any content.
1 Container (
2 Conteúdo — slot flexivel. Pode conter header, body, footer, imagens ou qualquer combinacao.1 Container (
2 Content — flexible slot. Can contain header, body, footer, images, or any combination.
.ds-card) — superfície com border-radius, borda ou sombra opcional dependendo da variante.2 Conteúdo — slot flexivel. Pode conter header, body, footer, imagens ou qualquer combinacao.1 Container (
.ds-card) — surface with border-radius, optional border or shadow depending on variant.2 Content — flexible slot. Can contain header, body, footer, images, or any combination.
PadrãoDefault
Card Title
Subtitle or meta information
This is the card body content. It provides additional context or details about the subject of the card.
<div class="ds-card ds-card--default">
<div class="ds-card__header">
<h3 class="ds-card__title">Card Title</h3>
<p class="ds-card__subtitle">Subtitle or meta information</p>
</div>
<div class="ds-card__body">
<p>This is the card body content.</p>
</div>
</div>Com borda (Outlined)Outlined
Outlined Card
With a stronger border
Outlined cards use a more visible border to distinguish content sections clearly from the background.
<div class="ds-card ds-card--outlined">
<div class="ds-card__header">
<h3 class="ds-card__title">Outlined Card</h3>
<p class="ds-card__subtitle">With a stronger border</p>
</div>
<div class="ds-card__body">
<p>Outlined cards use a more visible border.</p>
</div>
</div>Elevado (Elevated)Elevated
Elevated Card
With a box shadow
Elevated cards use a shadow instead of a border to create visual depth and hierarchy on the page.
<div class="ds-card ds-card--elevated">
<div class="ds-card__header">
<h3 class="ds-card__title">Elevated Card</h3>
<p class="ds-card__subtitle">With a box shadow</p>
</div>
<div class="ds-card__body">
<p>Elevated cards use a shadow for visual depth.</p>
</div>
</div>ComparaçãoComparison
Default
Subtle border.
Outlined
Stronger border.
Elevated
Box shadow.
<div class="ds-card ds-card--default">...</div>
<div class="ds-card ds-card--outlined">...</div>
<div class="ds-card ds-card--elevated">...</div>Boas práticasBest practices
Item A
Item B
Faça
Use variantes consistentes no mesmo contexto. Todos os cards em um grid devem compartilhar o mesmo estilo.Use consistent variants in the same context. All cards in a grid should share the same style.
Item A
Item B
Não faça
Misturar variantes default, outlined e elevated no mesmo grid. Isso cria hierarquia visual inconsistente.Mix default, outlined, and elevated variants in the same grid. It creates inconsistent visual hierarchy.
Cards outlined em uma lista densaOutlined cards in a dense list
Faça
Use outlined para layouts densos onde limites claros são necessarios. Use elevated para conteúdo proeminente e independente.Use outlined for dense layouts where clear boundaries are needed. Use elevated for prominent, standalone content.
Card elevated dentro de um painel elevatedElevated card inside elevated panel
Não faça
Colocar cards elevated dentro de um container ja elevado. Empilhar sombras cria ruído visual e quebra a hierarquia.Place elevated cards inside an already elevated container. Stacking shadows creates visual noise and breaks hierarchy.
Diretrizes de conteúdoContent guidelines
| RegraRule | ExemploExample |
|---|---|
| Cards são containers — diretrizes de conteúdo se aplicam ao que esta dentroCards are containers — content guidelines apply to what's inside | Use headings semânticos, texto de corpo e buttons de ação conforme necessarioUse semantic headings, body text, and action buttons as needed |
| Cards clicáveis: toda a superfície deve ser alvo de cliqueClickable cards: entire surface should be click target | Envolva o conteúdo em <a> ou use um link único com pseudo-elemento ::afterWrap content in <a> or use a single link with ::after pseudo-element |
| Mantenha o conteúdo escaneavelKeep content scannable | Título + 1-2 linhas de texto de corpo. Evite paragrafos longos dentro de cards.Title + 1-2 lines of body text. Avoid long paragraphs inside cards. |
Mapeamento de tokensToken mapping
| PropriedadeProperty | Token (semantic) | Variavel CSSCSS variable |
|---|---|---|
| background | semantic.surface.default | --ds-surface-default |
| border (default variant) | semantic.border.subtle | --ds-border-subtle |
| border (outlined variant) | semantic.border.default | --ds-border-default |
| shadow (elevated) | foundation.shadow.sm | --ds-shadow-sm |
| border-radius | foundation.radius.12 | --ds-radius-12 |
.ds-card__header padding | — | --ds-dimension-16 (top/sides) / --ds-dimension-8 (bottom) |
.ds-card__body padding | — | 0 --ds-dimension-16 --ds-dimension-16 |
Classes CSSCSS classes
| ClasseClass | DescricaoDescription |
|---|---|
ds-card | Container base do cardBase card container |
ds-card--default | Variante padrão com borda sutilDefault variant with subtle border |
ds-card--outlined | Variante outlined com borda mais forteOutlined variant with stronger border |
ds-card--elevated | Variante elevated com box shadow, sem bordaElevated variant with box shadow, no border |
ds-card__header | Seção de header do cardCard header section |
ds-card__title | Texto do título do cardCard title text |
ds-card__subtitle | Texto de subtitulo/meta do cardCard subtitle/meta text |
ds-card__body | Área de conteúdo do corpo do cardCard body content area |
Interação por tecladoKeyboard interaction
Cards não possuem interação por teclado por padrão. Se o card for interativo (clicável), envolva o conteúdo em um elemento <a> ou adicione role="link" com tabindex="0" para torná-lo focável é operável via Enter.Cards have no keyboard interaction by default. If the card is interactive (clickable), wrap content in an <a> element or add role="link" with tabindex="0" to make it focusable and operable via Enter.
AccessibilityAccessibility
| Criterio WCAGWCAG criterion | RequisitoRequirement | Status |
|---|---|---|
| 1.4.11 Non-text Contrast (AA) | Borda ou sombra deve ter pelo menos 3:1 de contraste com o fundo da páginaBorder or shadow must have at least 3:1 contrast against the page background | ✓ |
| 2.5.8 Target Size min (AA) | Se o card for clicável, toda a superfície deve ser o alvo de cliqueIf the card is clickable, the entire surface must be the click target | ✓ |
Markup semânticoSemantic markup
Cards são containers genericos e não requerem roles ARIA específicos por padrão. Use tags de heading semânticos (<h2>, <h3>) para títulos de cards para manter o outline adequado do documento. Se o card inteiro for clicável, envolva-o em um elemento <a> ou <button>, ou use um único link dentro do card com um nome acessível claro.Cards are generic containers and do not require specific ARIA roles by default. Use semantic heading tags (<h2>, <h3>) for card titles to maintain proper document outline. If the entire card is clickable, wrap it in an <a> or <button> element, or use a single link inside the card with a clear accessible name.