Card

Componentes/Conteúdo e estrutura

ImplementaçãoHTML/CSS/JSArk/Zag — planejadaReact · shadcn/Base UIAngular

Diretivas standalone que preservam article ou button como raiz semântica e aplicam a anatomia pública do Card.

DesignUsoImplementaçãoAcessibilidade

Seção da documentaçãoDesignUsoImplementaçãoAcessibilidade

Design

Preview funcional

Executado pelo componente Angular nativo com Elemento semântico nativo + composição Angular.

Carregando preview funcional…

Abrir playground Angular

Card interativo · Angular

Executado pelas diretivas Angular sobre button nativo, com seleção real.

Carregando preview funcional…

Abrir este exemplo em Angular

Anatomia

1

2

Card Title 3

Description text

Body content goes here. This is a flexible slot for any content.

4

1 Container (.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

Card Title

Interactive cards derive from the outlined structure and add hover, focus, and selected states.

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.

Usage 128 active seats

Healthy

Details

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.

Quando escolher esta saída

Adote esta saída Angular nativa quando a aplicação já usa Angular. Ela consome o mesmo CSS do DS e não depende do runtime Web nem dos adapters React.

Implementação

Status

Beta

Distribuição

Tarball Angular validado

Instalação

npm

npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

pnpm

pnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

yarn

yarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

bun

bun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

Beta de workspace validada

O comando instala o tarball local gerado e validado no consumer. @tis/angular ainda não está publicado no registry público do npm.

Estilos do DS

@import "ds-tis/css";

Importações Angular

import {
  TisCard,
  TisCardContainer,
  TisCardContent,
  TisCardHeader,
  TisCardTitle,
} from '@tis/angular/card'

Template

<article tisCard variant="outlined">
  <div tisCardContainer>
    <header tisCardHeader>
      <h3 tisCardTitle>Uso da organização</h3>
    </header>
    <div tisCardContent>128 licenças ativas.</div>
  </div>
</article>

Contrato público

Pacote

@tis/angular

Entrypoint

@tis/angular/card

Primitive

Elemento semântico nativo + composição Angular

Status

Beta

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	✓

Markup semântico

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.

Responsabilidade da saída

Preserve a semântica nativa do button, submit, nomes acessíveis, estado disabled e foco visível.

Evidência de validação

Coberta pelo Storybook da saída independente e por verificações de browser, responsividade, teclado, Axe e bundle.

Abrir referência estável