Cabeçalho centralizado, uma pessoa em destaque num card largo de vidro, e o restante do time numa grade de três colunas. O avatar é um placeholder de iniciais em gradiente de marca — some assim que as fotos reais chegarem.
Quando usar
- Página "Quem somos" de negócio onde a decisão de compra passa por confiança em pessoas: consultoria, advocacia, saúde, arquitetura.
- Time de 4 a 15 pessoas.
Quando não usar
- Time de 2 ou 3. Uma grade de três com um buraco parece empresa que perdeu gente. Use cards em linha ou o
conteudo/imagem-lista-numerada. - Time acima de ~20: vira listagem, e listagem quer busca e filtro.
- Quando não há bio real de cada um. Card com nome e cargo só é currículo, não prova.
Padrão editorial
| Slot | Regra |
|---|---|
.team-tag |
Só no destaque. 2 a 3 palavras: o papel que justifica o destaque ("Comitê de Investimentos"). |
.team-name |
Nome como a pessoa assina, certificação inclusa: "Matheus Gonzalez, CFP®". |
.team-role |
2 a 4 palavras. Cargo, não título acadêmico. |
.team-bio no destaque |
45 a 70 palavras, teto de 62ch. |
.team-bio no card |
30 a 45 palavras. Todas as bios da grade precisam caber em 4 a 5 linhas — desigualdade aqui deixa buraco visível entre cards. |
Ordem: o destaque primeiro; depois o líder da área; depois o resto em ordem alfabética. Ordem por hierarquia inteira gera política interna; ordem alfabética depois do líder resolve.
Registro profissional entra na bio, não no cargo: "credenciado pela CVM (registro 2886-0)".
Especificação das fotos
- Quadradas, mínimo 800×800, enquadramento de busto, fundo consistente entre todas.
- Até 120 KB cada.
- Foto de todo mundo ou de ninguém. Metade com foto e metade com iniciais é pior que só iniciais.
Como usar
<link rel="stylesheet" href="componentes/conteudo/grid-equipe/estilo.css">
O destaque leva class="glass team-feat"; os cards levam class="glass glass-hover team-card".
Trocar iniciais por foto
<img class="team-avatar" src="fotos/matheus.jpg" alt="Matheus Gonzalez">
A classe é a mesma. O aspect-ratio:1 e o object-fit:cover já estão nela — nada mais muda.
Variações
- Sem destaque — apague
.team-feat. - Grade de quatro —
repeat(4,1fr); a bio cai para 2 linhas. Não rodou em produção.
Gotchas
- O placeholder de iniciais é decisão, não gambiarra. Gradiente nas duas cores de marca; cinza chapado pareceria bug. Ele existe para o layout ficar de pé antes de as fotos chegarem — situação normal em projeto de cliente.
.team-cardreduz--glass-bgpara.04. São 3 a 12 cards na mesma dobra; no valor padrão a soma de vidro pesa e a seção fica leitosa.- Três breakpoints, não dois. 900px leva a grade a 2 colunas, 700px desmonta o destaque, 560px leva a grade a 1. O destaque quebra antes da grade porque o avatar dele é muito maior.
max-width:200pxno avatar do destaque no mobile. Sem isso ele ocupa a largura inteira da tela e a pessoa vira outdoor.- A grade não tem
align-items. Os cards esticam para a mesma altura da linha, o que só funciona porque as bios têm comprimento parecido — ver padrão editorial.
Histórico
| Projeto | Onde | Data | Diferenças |
|---|---|---|---|
| Liberta Wealth | quem-somos.html, seção Equipe |
2026-08 | Origem. 1 destaque e 9 cards, todos com iniciais (fotos nunca chegaram). Nomes por seletor de elemento (h3, h4), estilo de vidro escrito duas vezes no componente, rgba de marca cravado no gradiente do avatar, style="margin-inline:auto" inline no olho. |
Normalizações aplicadas na extração: prefixo em tudo; h3/h4 → .team-name; o vidro virou a primitiva .glass (eram mais duas cópias da regra); rgba(198,206,170,…) e rgba(175,146,116,…) do avatar → color-mix sobre --accent e --accent-2, para acompanhar qualquer tema; margin-inline inline foi para o CSS; object-fit:cover adicionado ao avatar para a troca por <img> funcionar sem editar CSS.