← Biblioteca componentes/conteudo/imagem-lista-numerada/ficha.md CódigoTela cheia
conteudo/imagem-lista-numerada

Imagem com parallax e lista numerada ao lado

🟢 estavel complexidade baixa prefixo duo- diferenciais duas-colunas imagem parallax lista-numerada

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

<link rel="stylesheet" href="componentes/conteudo/imagem-lista-numerada/estilo.css">
<script src="componentes/conteudo/imagem-lista-numerada/script.js"></script>

markup.html · 47 linhas · 2,1 KB

<!-- ==========================================================================
     DUO — imagem com parallax de um lado, lista numerada do outro
     Prefixo: duo-
     Requer: core (tokens, base, motion.css, motion.js) + estilo.css e script.js

     Sem olho: a seção abre direto no título. A foto estica para a altura
     inteira da linha (align-items:stretch, padrão do grid), não é uma caixa
     de proporção fixa encolhida ao lado do texto.
     ========================================================================== -->

<section class="sec-dark sec-pad" id="valores">
  <div class="wrap">
    <div class="duo">
      <div class="duo-media" data-rv>
        <img class="duo-img" data-duo-img src="../../../showroom/demo/ph-1.webp" alt="Casal tomando café em varanda com vista para vilarejo na encosta">
      </div>

      <div>
        <h2 class="sec-title ttl" style="margin-top:0">Por que os clientes escolhem a <em>marca</em></h2>

        <ul class="duo-list">
          <li class="duo-item" data-rv>
            <span class="duo-num">01</span>
            <div>
              <h3 class="duo-title">Acompanhamento personalizado</h3>
              <p class="duo-text">Relatórios mensais detalhados sobre a consolidação do seu patrimônio e reuniões regulares para ajustes e otimizações.</p>
            </div>
          </li>
          <li class="duo-item" data-rv data-d="1">
            <span class="duo-num">02</span>
            <div>
              <h3 class="duo-title">Alinhamento de interesses</h3>
              <p class="duo-text">Atuamos de forma independente para selecionar, monitorar e rebalancear seus ativos, sem vínculos com instituições específicas.</p>
            </div>
          </li>
          <li class="duo-item" data-rv data-d="2">
            <span class="duo-num">03</span>
            <div>
              <h3 class="duo-title">Transparência</h3>
              <p class="duo-text">Modelo comercial previamente acordado, sem comissões ocultas — alinhamento de interesses ao longo de toda a parceria.</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

estilo.css · 48 linhas · 1,8 KB

/* ==========================================================================
   DUO — imagem com parallax de um lado, lista numerada do outro
   Prefixo: duo-
   Tokens usados: --fg --fg-2 --rule --accent-2 --display --sans --radius-media
   ========================================================================== */

/* A coluna do texto é levemente maior (1.05fr). A foto é apoio, não par. */
.duo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,72px);
}

/* min-height garante que a foto tenha corpo mesmo quando a lista é curta.
   Sem ele, com 2 itens, a imagem vira uma tira. */
.duo-media{
  position:relative;overflow:hidden;min-height:420px;
  border-radius:var(--radius-media);
}
/* scale(1.06) é a folga do parallax: a imagem precisa ser maior que a caixa
   para deslocar sem mostrar borda. O script substitui este transform. */
.duo-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.4) brightness(.8);
  transform:scale(1.06);will-change:transform;
}

.duo-item{
  padding:22px 0;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:44px 1fr;gap:16px;
}
.duo-list li:last-child{border-bottom:1px solid var(--rule)}

/* O número é itálico na fonte de TEXTO, não na display: ele numera, não
   grita. Cor de acento secundário para não competir com o --accent. */
.duo-num{
  font-family:var(--sans);font-style:italic;font-weight:300;
  font-size:19px;line-height:1.4;color:var(--accent-2);
}
.duo-title{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.025em;color:var(--fg)}
.duo-text{font-size:16px;line-height:1.6;color:var(--fg-2);margin-top:8px}

/* Inverter os lados: imagem à direita. */
.duo.is-flipped .duo-media{order:2}

@media(max-width:900px){
  .duo{grid-template-columns:1fr}
  .duo.is-flipped .duo-media{order:0}
}

script.js · 20 linhas · 0,9 KB

/* ==========================================================================
   DUO — parallax suave da foto
   Deslocamento de ±13px em torno do centro da tela. É intencionalmente
   discreto: a foto acompanha a leitura da lista, não disputa com ela.
   ========================================================================== */

(function () {
  var imgs = [].slice.call(document.querySelectorAll('[data-duo-img]'));
  if (!imgs.length || window.LIB.reduce) return;

  window.LIB.onScroll(function () {
    imgs.forEach(function (img) {
      var r = img.parentNode.getBoundingClientRect();
      if (r.bottom < 0 || r.top > innerHeight) return;   // fora da tela: não calcula
      /* p vai de +0.5 (caixa no topo da tela) a -0.5 (no rodapé) */
      var p = (innerHeight / 2 - (r.top + r.height / 2)) / innerHeight;
      img.style.transform = 'translate3d(0,' + (p * 26).toFixed(2) + 'px,0) scale(1.08)';
    });
  });
})();

Duas colunas: de um lado uma foto que estica na altura inteira da linha e desloca suavemente no scroll; do outro, o título da seção e uma lista numerada de diferenciais, cada item com título curto e uma frase. Sem olho — a seção abre direto no título.

É o bloco mais reutilizável da biblioteca: serve para diferenciais, benefícios, etapas resumidas, garantias.

Quando usar

Quando não usar

Padrão editorial

Slot Regra
Título da seção 1 linha, uma palavra em <em>. Costuma ser uma pergunta respondida: "Por que os clientes escolhem a marca".
.duo-num 01…04, sem pular.
.duo-title 2 a 4 palavras. Nome do diferencial, não frase: "Alinhamento de interesses".
.duo-text 1 frase, 18 a 30 palavras. Explica como, não repete o título.

Os três textos precisam ter comprimento parecido: a lista é uma pilha de blocos separados por régua, e altura desigual fica exposta.

Especificação da imagem

Como usar

<link rel="stylesheet" href="componentes/conteudo/imagem-lista-numerada/estilo.css">
<script src="componentes/conteudo/imagem-lista-numerada/script.js"></script>

O script varre [data-duo-img], então várias instâncias na mesma página funcionam.

Variações

Gotchas

Histórico

Projeto Onde Data Diferenças
Liberta Wealth index.html, seção Valores 2026-08 Origem. .vals/.vals-media/.vn com seletores de elemento (li, h3, p), id #valsImg no script, border-radius:10px cravado, --tan cru no número, margin-top:28px inline na <ul>.

Normalizações aplicadas na extração: prefixo duo- (o nome antigo vinha do conteúdo "Valores", não da forma); seletores de elemento → classes; id → [data-duo-img], o que permite várias instâncias na mesma página; raio cravado → --radius-media; --tan → --accent-2; parallax passou a assinar LIB.onScroll; adicionada a variação .is-flipped, que não existia.