Card
Agrupa conteúdo e ações relacionadas em uma superfície com hierarquia clara.
Design
Preview funcional
Executado com HTML e CSS estáveis do DS, sem runtime JavaScript do componente.
Card interativo · HTML/CSS/JS
Executado pelo HTML nativo; o próprio Card é o único button da composição.
Anatomia
Card Title 3
Description text
Body content goes here. This is a flexible slot for any content.
4.ds-card) — superfície com border-radius, borda ou sombra opcional dependendo da variante.2 Content container (
.ds-card__container) — aplica padding e gap internos.3 Header (
.ds-card__header) — wrapper para título e descrição opcionais.4 Body (
.ds-card__body) — área de conteúdo flexível.
Padrão
Card Title
Description or meta information
This is the card body content. It provides additional context or details about the subject of the card.
Com borda (Outlined)
Outlined Card
With a stronger border
Outlined cards use a more visible border to distinguish content sections clearly from the background.
Elevado (Elevated)
Elevated Card
Raised surface
Elevated cards use a raised surface and shadow instead of a border to create visual depth and hierarchy.
Comparação
Default
Subtle border.
Outlined
Stronger border.
Elevated
Raised surface.
Media e interativo
Composição customizada
Use o card como container quando o conteúdo interno precisar ser montado com outros componentes. Header e footer são opcionais; o body recebe o conteúdo principal.
Mapeamento de tokens
| Propriedade | Token | Variável CSS |
|---|---|---|
| background | semantic.surface.default | --ds-surface-default |
| background (elevated variant) | semantic.surface.raised | --ds-surface-raised |
| border (default variant) | semantic.border.subtle | --ds-border-subtle |
| border (outlined variant) | semantic.border.default | --ds-border-default |
| shadow (elevated) | semantic.shadow.card | --ds-shadow-card |
| border-radius | component.card.radius.default | --ds-card-radius-default |
| border-width | component.card.border-width.default | --ds-card-border-width-default |
.ds-card__container padding | component.card.container.padding.default | --ds-card-container-padding-default |
.ds-card__container gap | component.card.container.gap.default | --ds-card-container-gap-default |
.ds-card__header gap | component.card.header.gap.default | --ds-card-header-gap-default |
.ds-card__title typography | component.card.title.{font-size,line-height,font-weight}.default | --ds-card-title-*-default |
.ds-card__description typography | component.card.subtitle.{font-size,line-height,font-weight}.default | --ds-card-subtitle-*-default |
.ds-card__body typography | component.card.body.{font-size,line-height,font-weight}.default | --ds-card-body-*-default |
.ds-card__footer spacing | component.card.footer.gap.default | --ds-card-footer-gap-default |
.ds-card--interactive border | component.card-interactive.border-* | --ds-card-interactive-border-* |
.ds-card--interactive focus ring radius | component.card-interactive.focus-ring.radius.default | --ds-card-interactive-focus-ring-radius-default |
Uso
Quando usar
- Conteúdo, metadados e ações formam uma unidade reutilizável ou comparável.
- A superfície precisa comunicar agrupamento e hierarquia próprios.
Quando não usar
- O conteúdo já possui hierarquia suficiente sem uma superfície adicional.
- O Card interativo precisaria conter outros buttons ou links; evite controles interativos aninhados.
Implementação
- Status
- Estável
- Distribuição
- Pacote npm
Instalação
npm install ds-tispnpm add ds-tisyarn add ds-tisbun add ds-tisImportações
import 'ds-tis/css'Markup
<article class="ds-card ds-card--outlined">
<div class="ds-card__container">
<header class="ds-card__header">
<h3 class="ds-card__title">Uso da organização</h3>
</header>
<div class="ds-card__body">128 licenças ativas.</div>
</div>
</article>Contrato da implementação Web
Classes CSS
| Classe | Descrição |
|---|---|
ds-card | Container base do card |
ds-card--default | Variante padrão com borda sutil |
ds-card--outlined | Variante outlined com borda mais forte |
ds-card--elevated | Variante elevated com box shadow, sem borda |
ds-card--interactive | Card interativo derivado do outlined com hover, focus e selected |
ds-card--selected | Estado selected do card interativo |
ds-card__media | Slot de media full-bleed acima do container de conteúdo |
ds-card__container | Container interno com padding e gap do conteúdo |
ds-card__header | Seção de header do card |
ds-card__title | Texto do título do card |
ds-card__description | Texto de descrição/meta do card |
ds-card__body | Área de conteúdo do corpo do card |
ds-card__footer | Área opcional para ações ou conteúdo complementar |
Acessibilidade
Interação por teclado
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.
Accessibility
| Critério WCAG | Requisito | Status |
|---|---|---|
| 1.4.11 Non-text Contrast (AA) | Borda ou sombra deve ter pelo menos 3:1 de contraste com o fundo da página | ✓ |
| 2.5.8 Target Size min (AA) | Se o card for clicável, toda a superfície deve ser o alvo de clique | ✓ |
<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.
Responsabilidade da saída
Preserve a semântica do elemento nativo, nomes acessíveis, comportamento de teclado e foco visível.
Evidência de validação
Coberta pelo Storybook estável, testes do runtime público quando aplicável, cenários de teclado, responsividade e Axe.