Projeto
Aurora — portal do cliente
Do primeiro rascunho ao produto em uso, em 9 etapas.
Componentes
Cartão
A superfície do conteúdo: vertical ou horizontal, com ou sem imagem, inteiro clicável quando é um destino.
Quando usar
- agrupar um assunto: um projeto, um serviço, um painel
- cartão-link quando o cartão inteiro leva a um lugar
Quando não usar
- cor de fundo para dizer estado (use selo ou mensagem)
- texto por cima de imagem
- dois links no cartão-link
Vertical, com e sem imagem
claro
Cliente
Construtora Aurora
3 projetos ativos · desde 2024.
escuro
Projeto
Aurora — portal do cliente
Do primeiro rascunho ao produto em uso, em 9 etapas.
Cliente
Construtora Aurora
3 projetos ativos · desde 2024.
<div class="hx-card-grid">
<article class="hx-card">
<div class="hx-card-media site-media" role="img" aria-label="Ilustração do projeto"></div>
<p class="hx-card-eyebrow">Projeto</p>
<h3 class="hx-card-title">Aurora — portal do cliente</h3>
<p>Do primeiro rascunho ao produto em uso, em 9 etapas.</p>
<div class="hx-card-footer"><span class="hx-badge hx-badge-info">Em execução</span>etapa 5 de 9</div>
</article>
<article class="hx-card">
<p class="hx-card-eyebrow">Cliente</p>
<h3 class="hx-card-title">Construtora Aurora</h3>
<p>3 projetos ativos · desde 2024.</p>
<div class="hx-card-footer"><a class="hx-button hx-button-compact" href="#">Ver cliente</a></div>
</article>
</div>Horizontal
claro
Serviço
Mentoria técnica
Arquitetura e prática, no ritmo de quem está construindo. No celular, a imagem sobe.
escuro
Serviço
Mentoria técnica
Arquitetura e prática, no ritmo de quem está construindo. No celular, a imagem sobe.
<article class="hx-card hx-card-horizontal">
<div class="hx-card-media site-media" role="img" aria-label="Ilustração do serviço"></div>
<p class="hx-card-eyebrow">Serviço</p>
<h3 class="hx-card-title">Mentoria técnica</h3>
<p>Arquitetura e prática, no ritmo de quem está construindo. No celular, a imagem sobe.</p>
<div class="hx-card-footer"><a href="#">Conhecer mentoria técnica</a></div>
</article>Cartão-link
claro
Agenda da semana
O cartão inteiro é o alvo; o link do título dá o nome que o leitor de tela diz.
escuro
Agenda da semana
O cartão inteiro é o alvo; o link do título dá o nome que o leitor de tela diz.
<div class="hx-card-grid">
<article class="hx-card hx-card-link">
<h3 class="hx-card-title"><a href="#">Agenda da semana</a></h3>
<p>O cartão inteiro é o alvo; o link do título dá o nome que o leitor de tela diz.</p>
</article>
</div>Anatomia
- imagem —
.hx-card-media, 16:9, sangra até a borda (em cima; à esquerda no horizontal) - sobretítulo — 12 px, caixa-alta, apagado
- título — 20 px, Plex Serif
- texto — o corpo, 16 px
- rodapé — fio em cima; metadado, selo, ações
Referência
| Classe ou atributo | Para quê |
|---|---|
.hx-card, .hx-card-flush | cartão; sem respiro interno (tabela, lista) |
.hx-card-media | imagem em cima |
.hx-card-horizontal | imagem à esquerda a partir do médio |
.hx-card-eyebrow, .hx-card-title, .hx-card-footer | as partes |
.hx-card-link | cartão inteiro clicável |
.hx-card-grid | grade de cartões |
Origem: cap. 03 §3.4, cap. 10 §3.1 · ADR-0008, ADR-0038 · desde a versão 0.4.0