Card Default
Subtítulo descritivo do card.
Conteúdo principal do card.
Design System Rank
Componentes Base
14 componentes oficiais. Cores vêm do tema ativo — troque abaixo para visualizar.
Tema ativo:
Button
Ação principal. Use .ds-button com variações de tipo e tamanho.
Variações
Tamanhos
Estados
<button class="ds-button ds-button--primary ds-button--md">Label</button>
IconButton
Botão quadrado somente ícone. Use .ds-icon-button.
<button class="ds-icon-button ds-icon-button--primary ds-icon-button--md" title="Ação">...</button>
Card
Contêiner de conteúdo. Variações: default, elevated, flat, interactive.
Card Elevated
Com sombra elevada.
Card Interactive
Hover para ver efeito.
<article class="ds-card ds-card--elevated">
<header class="ds-card__header">
<h3 class="ds-card__title">Título</h3>
</header>
<div class="ds-card__body">Conteúdo</div>
</article>
Section
Container semântico de blocos de conteúdo.
Título da Seção
Descrição opcional da seção.
Conteúdo da seção aqui.
PageHeader
Cabeçalho de página com eyebrow, título, descrição, ações e meta.
DataRank
Visão Geral
Monitoramento de performance da sua aplicação nos principais stores.
Badge
Indicador compacto de status ou categoria.
Neutro
Primary
Sucesso
Atenção
Erro
Info
<span class="ds-badge ds-badge--success ds-badge--md">Ativo</span>
Tag
Etiqueta com suporte a remoção.
iOS
Android
Removível
<span class="ds-tag ds-tag--removable">iOS <button class="ds-tag__remove">✕</button></span>
Avatar
Representação visual de usuário. Suporta imagem ou fallback de texto.
RC
RC
RC
RC
<span class="ds-avatar ds-avatar--md"> <span class="ds-avatar__fallback">RC</span> </span>
Divider
Separador horizontal ou vertical.
Conteúdo acima
Conteúdo abaixo
Item A
Item B
Alert
Feedback inline: info, sucesso, atenção ou erro.
ⓘ
Informação
Mensagem informativa para o usuário.
✓
Sucesso
Operação realizada com sucesso.
⚠
Atenção
Verifique antes de prosseguir.
✕
Erro
Algo deu errado. Tente novamente.
Tooltip
Dica contextual ao hover. CSS-only básico.
Tooltip topo
Tooltip baixo
Tooltip direita
EmptyState
Estado vazio de listagens e painéis.
🔍
Nenhum resultado
Não encontramos dados para os filtros selecionados. Ajuste o período ou os critérios.
Skeleton / LoadingState
Placeholders animados durante carregamento.
ErrorState
Estado de erro crítico em painéis e páginas.
⚠
Falha ao carregar dados
Ocorreu um erro ao buscar as informações. Verifique sua conexão e tente novamente.