← Biblioteca componentes/conteudo/grid-entidades/ficha.md CódigoTela cheia
conteudo/grid-entidades

Grade de entidades em cards de vidro

🟢 estavel complexidade baixa prefixo ent- estrutura grupo entidades quatro-colunas vidro logos sem javascript

Incluir · as linhas que se colam num site novo, depois do core (CLAUDE.md §10)

<link rel="stylesheet" href="componentes/conteudo/grid-entidades/estilo.css">

markup.html · 57 linhas · 2,4 KB

<!-- ==========================================================================
     ENTIDADES — quatro cards de vidro com marca e atributos
     Prefixo: ent-
     Requer: core (tokens, base, motion.css, motion.js) + este estilo.css
     Sem script próprio. Usa a primitiva .glass do core.

     Cada card mistura marca (logo OU texto) e uma lista de fatos curtos.
     A altura da faixa da marca é fixa justamente para alinhar os quatro,
     mesmo quando dois são imagem e dois são texto.
     ========================================================================== -->

<section class="sec-dark sec-pad" id="estrutura">
  <div class="wrap">
    <span class="eyebrow" data-rv>Nossa estrutura</span>
    <h2 class="sec-title ttl">Um ecossistema construído para atuação <em>global</em></h2>
    <p class="sec-lead" data-rv data-d="1">Uma frase de apoio dizendo o que as entidades abaixo formam juntas, e por que isso importa para o cliente.</p>

    <div class="ent-grid">
      <article class="glass glass-hover ent-card" data-rv>
        <div class="ent-brand"><img src="../../../showroom/demo/marca.svg" alt="Meridian Wealth"></div>
        <ul class="ent-list">
          <li>Sedes, uma por linha</li>
          <li>Segmento ou público atendido</li>
          <li>Alcance geográfico da operação</li>
          <li>Registro ou credenciamento</li>
        </ul>
      </article>

      <article class="glass glass-hover ent-card" data-rv data-d="1">
        <div class="ent-brand">Vantor <em>Investment Advisors</em></div>
        <ul class="ent-list">
          <li>Sede da entidade</li>
          <li>Tempo de atuação e o que faz</li>
          <li>Especialidade principal</li>
        </ul>
      </article>

      <article class="glass glass-hover ent-card" data-rv data-d="2">
        <div class="ent-brand"><img class="ent-brand-lg" src="../../../showroom/demo/logo-1.svg" alt="Meridian Invest"></div>
        <ul class="ent-list">
          <li>Sedes da entidade</li>
          <li>Porte, em um número</li>
          <li>Posição ou reconhecimento</li>
        </ul>
      </article>

      <article class="glass glass-hover ent-card" data-rv data-d="3">
        <div class="ent-brand">Vantor <em>Research</em></div>
        <ul class="ent-list">
          <li>Primeira frente de atuação</li>
          <li>Segunda frente de atuação</li>
          <li>Tempo de atuação e o que faz</li>
        </ul>
      </article>
    </div>
  </div>
</section>

estilo.css · 39 linhas · 1,5 KB

/* ==========================================================================
   ENTIDADES — quatro cards de vidro com marca e atributos
   Prefixo: ent-
   Tokens usados: --fg --fg-2 --accent --display --sans
   Primitiva usada: .glass / .glass-hover (core/base.css)
   ========================================================================== */

.ent-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,16px);margin-top:clamp(38px,6vh,60px);
}

.ent-card{border-radius:12px;padding:clamp(22px,2.4vw,30px)}

/* Altura FIXA na faixa da marca. É o que alinha os quatro cards quando dois
   trazem logo (imagem, altura variável) e dois trazem texto. Sem isso as
   listas começam em alturas diferentes e a fileira desanda. */
.ent-brand{
  height:34px;display:flex;align-items:center;
  font-family:var(--display);font-weight:700;font-size:15.5px;
  letter-spacing:-.025em;color:var(--fg);
}
.ent-brand em{
  font-family:var(--sans);font-style:italic;font-weight:300;
  letter-spacing:0;color:var(--accent);
}
.ent-brand img{max-height:19px;max-width:100%;width:auto;height:auto;display:block}
/* Logo que precisa de mais altura para pesar igual aos outros. */
.ent-brand-lg{max-height:26px}

.ent-list{margin-top:18px}
.ent-item,.ent-list li{
  font-size:12.5px;line-height:1.65;color:var(--fg-2);
  padding:9px 0;border-top:1px solid var(--rule);
}
.ent-list li:first-child{border-top:none;padding-top:0}

@media(max-width:980px){.ent-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ent-grid{grid-template-columns:1fr;gap:20px}}

Quatro cards de vidro lado a lado. Cada um traz uma marca no topo — logo ou nome em texto — e abaixo uma lista curta de fatos separados por linha. Serve para mostrar que a empresa é um grupo, não uma sala.

Usa a primitiva .glass do core. Sem script próprio.

Quando usar

Quando não usar

Padrão editorial

Slot Regra
Marca Logo SVG quando existe; texto quando não. Misturar os dois é normal — a faixa de altura fixa foi feita para isso.
Nome em texto Nome principal em display, qualificador em <em> (itálico, fonte de texto, cor de marca): "L&S Investment Advisors".
Itens 3 a 4 por card. Fatos verificáveis: praça, tempo, número, registro. Nada de adjetivo.
Comprimento 3 a 9 palavras por item, no máximo 2 linhas.

Os cards precisam ter contagem parecida de itens. Um com 4 e outro com 2 deixa buraco visível na fileira — o .glass não esconde altura desigual.

Como usar

<link rel="stylesheet" href="componentes/conteudo/grid-entidades/estilo.css">

O card leva as três classes: class="glass glass-hover ent-card".

Pareamento

Foi desenhado para viver sobre um fundo animado full-bleed — na origem, o dados/globo-canvas atrás da seção inteira. É o que dá sentido ao vidro. Sobre fundo chapado o efeito continua funcionando, mas rende menos.

Variações

Gotchas

Histórico

Projeto Onde Data Diferenças
Liberta Wealth index.html #estrutura 2026-08 Origem. .ents/.ent com internas sem prefixo (.brand, .is-xp, ul, li), estilo de vidro escrito inline no componente, cor #c3c0b9 e bordas rgba(255,255,255,.09) cruas.

Normalizações aplicadas na extração: prefixo em tudo; .is-xp → .ent-brand-lg; seletores de elemento → .ent-list / .ent-item; o vidro virou a primitiva .glass do core (era a terceira cópia da mesma regra no projeto); cores cruas → --fg-2 e --rule; sage → --accent.