Cartão simples
Título e subtítulo
O corpo do cartão. Sem rodapé, ele fecha logo abaixo do texto.
Índice da vitrine
Ações
Formulários
Retorno
Conteúdo
Conteúdo
Avatares, envio de arquivos com galeria, tabelas e listas.
Avatares
A moldura do retrato em duas formas, círculo e arredondada. Sem imagem, mostra as iniciais sobre a tinta da intenção; a pilha sobrepõe com o anel do tema.
.es-avatar--circle, .es-avatar--rounded
.es-avatar--xs … --xl
.es-avatar-stack
Modal de imagem
O padrão para toda imagem que o leitor envia: escolher o uso, enquadrar, girar, espelhar e aplicar um filtro. É com ele que se troca a foto de perfil.
<echo-image-cropper>
JPEG, PNG, WEBP, GIF ou SVG.
O uso vira o campo usage do POST /api/v1/images; "outro" aceita um nome livre e o envia em snake_case. SVG não é recortado — o modal vira visor e o arquivo vai inteiro.
Envio de arquivos
Botão e zona de arraste sobre o mesmo par label mais input nativo: clicar e o teclado já funcionam, e o arraste entra por cima como aprimoramento.
<echo-file-button>
.es-dropzone
.es-gallery
Table
A tabela de referência do sistema, listando as classes dos componentes desta própria página.
| Componente | Classe | Nota |
|---|---|---|
| Botão | .es-btn | A forma; a ênfase entra com o modificador --primary. |
| Alert | .es-alert | Modificadores --info, --success, --warn e --danger. |
| Modal | .es-dialog | Aplicada ao dialog nativo; o backdrop escurece sozinho. |
| Collapse | .es-collapse | Aplicada ao details nativo; o chevron gira no estado aberto. |
| Input | .es-input | Vale para input e textarea; o foco vem da regra global. |
| Select | .es-select | A mesma tinta do input, com cursor de clique. |
| Tabela | .es-table | Conteúdo largo rola no contêiner, nunca na página. |
| Lista | .es-card | Cartão plano com utilities de divisão; sem classe própria. |
Variantes de tabela
As mesmas colunas com listra, realce de linha, densidade e cabeçalho preso. Não existe variante escura: o tema já é dono disso.
.es-table--striped + .es-table--hover
| Pessoa | Papel | Situação |
|---|---|---|
| Ada Lovelace | Engenharia | Ativa |
| Grace Hopper | Plataforma | Ativa |
| Alan Turing | Pesquisa | Ausente |
| Edsger Dijkstra | Arquitetura | Inativo |
.es-table--dense
| Pessoa | Papel | Situação |
|---|---|---|
| Ada Lovelace | Engenharia | Ativa |
| Grace Hopper | Plataforma | Ativa |
| Alan Turing | Pesquisa | Ausente |
| Edsger Dijkstra | Arquitetura | Inativo |
.es-table--scroll + --table-h
O corpo rola e o cabeçalho fica; a altura vem do token --table-h, definido em quem usa.
| Pessoa | Papel | Situação |
|---|---|---|
| Ada Lovelace | Engenharia | Ativa |
| Grace Hopper | Plataforma | Ativa |
| Alan Turing | Pesquisa | Ausente |
| Edsger Dijkstra | Arquitetura | Inativo |
| Ada Lovelace | Engenharia | Ativa |
| Grace Hopper | Plataforma | Ativa |
| Alan Turing | Pesquisa | Ausente |
| Edsger Dijkstra | Arquitetura | Inativo |
| Ada Lovelace | Engenharia | Ativa |
| Grace Hopper | Plataforma | Ativa |
| Alan Turing | Pesquisa | Ausente |
| Edsger Dijkstra | Arquitetura | Inativo |
| Ada Lovelace | Engenharia | Ativa |
| Grace Hopper | Plataforma | Ativa |
| Alan Turing | Pesquisa | Ausente |
| Edsger Dijkstra | Arquitetura | Inativo |
Data table
Busca, ordenação por coluna, paginação e seleção sobre a mesma .es-table. As células são desenhadas por slot, então avatar e badge entram sem o componente saber o que são.
| Situação | ||||
|---|---|---|---|---|
| Engenharia | 12 | Ativa | ||
| Plataforma | 8 | Ativa | ||
| Pesquisa | 5 | Ausente | ||
| Arquitetura | 3 | Inativa | ||
| Engenharia | 15 | Ativa |
5 de 7 linhas
1 / 2
0 linha(s) selecionada(s).
Cartões
Cabeçalho com ações à direita, corpo e rodapé opcional. Sem altura fixa: quem estica cartões lado a lado é a grade.
Com ações
O menu do cabeçalho e os botões do rodapé cabem no mesmo cartão.
Com mídia
A imagem sangra até a borda e herda o raio do cartão.
Listas do sistema
Três eixos, e não onze variações: densidade, filete e item de navegação. O resto (ícone, duas linhas, ação à direita) é composição, não prop nova.
.es-list
- Ada LovelaceEngenhariaAtiva
- Grace HopperPlataformaAtiva
- Alan TuringPesquisaAusente
- Edsger DijkstraArquiteturaInativo
.es-list--compact
- Tema claro e escuro com paridade automática
- Três idiomas em lockstep, espanhol canônico
- Marca inteira num bloco só de tokens
- Liquid Glass parametrizado por color-mix
.es-list + to
Ações de cartão
Recolher, atualizar, expandir e remover. O estado das duas primeiras mora no próprio cartão, porque é comportamento dele; atualizar e remover são eventos, porque quem manda no dado é quem chamou.
Todas as ações
Os quatro botões no cabeçalho. Recolher usa v-show e não v-if: o conteúdo fica no DOM, então um formulário aberto aqui dentro não perde o que já foi digitado.
Recolher
Um clique dobra o cartão; o chevron gira e o aria-expanded acompanha.
Atualizar
O véu cobre o corpo enquanto o evento sobe para quem recarrega de verdade.
Remover
O cartão sai da página e emite o evento; recolocá-lo é decisão de quem usa.
Cartões avançados
Os cartões de painel não são um componente novo: são composição. Cartão, mais estatística, barra, anel, lista e badge, as mesmas peças em arranjos diferentes.
Estado da campanha
8,52 mil visitantes
Enviados12.346 +0.3%
Abertos8.734 +2.1%
Clicados967 -1.4%
Inscritos345 +8.5%
Projeto ativo
Média de 70% concluída
Nuxt65%
Tailwind86%
TypeScript90%
Plyr37%
Progresso das tarefas
Por frente de trabalho
- 72%Design de experiência120 tarefas
- 48%Fundamentos do front32 tarefas
- 15%Referência da API182 tarefas
- 24%Documentação56 tarefas
Próximo webinar
Arquitetura de front-end de próxima geração com Nuxt, Tailwind e a linguagem Liquid Glass do grupo.
17 nov 2026Data
32 minutosDuração
Media player
O Plyr sobre os elementos nativos. É a primeira dependência de runtime do template, e ela se paga por Vimeo e YouTube: cada um tem a própria API de embed, e o Plyr entrega os três atrás de uma interface só.
provider="video"
provider="youtube"
provider="audio"
Listas
Duas formas sobre o cartão plano: a lista simples dividida e a rica, com título, descrição e chip.
Lista simples
- Tema claro e escuro com paridade automática
- Três idiomas em lockstep, espanhol canônico
- Marca inteira num bloco só de tokens
- Liquid Glass parametrizado por color-mix
Lista rica
- Base
Tokens de marca
Quatro hex e um gradiente derivam todo o CSS.
- Estilo
Superfícies de vidro
Vidro focal, cartão plano e lente para controles.
- Acessível
Componentes nativos
Dialog, details e selects do navegador, vestidos pelo sistema.