Um recorte de jornal montado em HTML, no lugar do print de matéria: logo do veículo, manchete, linha fina, data e link para o original. O primeiro card ocupa a fileira inteira.
Ele nasceu de um problema concreto da casa: as páginas colavam captura de tela de matéria de jornal. Print não escala, não quebra no celular, não tem alt, o buscador não lê, pesa como imagem e amarela no dia em que o site do veículo troca de layout. Em HTML, a mesma manchete é texto — e vira link para a matéria, que é o que a citação pede.
Quando usar
- Dobra "na imprensa" de página institucional, quando há três ou mais menções.
- Landing de campanha cujo argumento depende do noticiário — o exemplo que originou o componente é uma copy sobre eleição e custo de vida.
- Página de autoridade de um porta-voz: as manchetes em que ele apareceu.
Quando não usar
- Uma menção só. Um card sozinho numa grade parece sobra. Use uma citação —
conteudo/manifesto-citacao. - Quando você não tem o link da matéria. Sem link não é citação, e a seção de Compliance abaixo explica por quê.
- Quando o que interessa é o veículo, não o que ele disse — aí é
prova/marquee-logos, que é a fileira de logos em esteira. - Depoimento de cliente é
prova/carrossel-depoimentos: lá a citação é de uma pessoa e vem com retrato; aqui é de um veículo e vem com logo e data.
Compliance
A regra é uma só: manchete real, veículo real, data real, link real. Os quatro juntos.
Um card com o logo de um jornal de verdade e uma manchete sem data nem link não é peça de marketing — é notícia falsa atribuída a um veículo. Com data e link, é citação: a forma que a imprensa espera e que a lei protege.
Por isso <time datetime> e o href da manchete estão no markup como estrutura, não como opção. Se você está montando a seção e ainda não tem o link, o card não está pronto.
O que segue disso, na prática:
- Não reescreva a manchete. Copie como está publicada. Encurtar muda o sentido, e o veículo assinou o que escreveu, não a sua versão.
- A linha fina é da matéria, não sua. Se o texto de apoio for seu, ele não pode parecer do jornal — tire a
.news-leade ponha o seu comentário fora do card. target="_blank"comrel="noopener nofollow". Sai do seu site para o do veículo, e onofollowdeixa claro que não é link de troca.- Manchete não é recomendação. Numa página de consultoria, uma seção de imprensa pode ser lida como promessa de resultado. Escolha manchetes que descrevem cenário, não desempenho — e nunca uma que cite retorno, percentual ou o nome de um ativo.
Padrão editorial
A manchete manda; a linha fina serve. O corpo da manchete é o dobro do da linha fina, e o card cabe em três linhas de título mais duas de apoio. Se a manchete não couber em três linhas, ela é longa demais para uma grade — vai para o destaque.
O destaque é a primeira, e é a que decide se a pessoa lê as outras. Escolha a de veículo mais conhecido, ou a mais dura. Não a mais elogiosa: seção de imprensa que só traz elogio lê como publicidade paga.
A ordem é cronológica inversa. Data recente primeiro. Uma seção de imprensa cuja manchete mais nova é de dois anos atrás diz que ninguém fala da empresa desde então.
Três a seis cards. Menos que três não enche a grade; mais que seis vira arquivo, e aí é uma página própria com paginação.
Especificação dos assets
Um logo por veículo, SVG de preferência, PNG com fundo transparente serve.
O critério é legibilidade a 22px de altura — é o tamanho em que o componente o desenha. Logo com assinatura embaixo ("desde 1921") ou com muita palavra some nesse corpo: use a versão reduzida da marca, que quase todo veículo publica no próprio kit de imprensa.
O logo é asset do consumidor e não vive nesta biblioteca. Marca de terceiro não atravessa (§11). O preview usa os placeholders de showroom/demo/ com veículos fictícios — Meridiano, Altamira, Northbay, Quadrant —, os mesmos nomes inventados que a midia/galeria-scroll-horizontal já usa.
Como usar
Cole a seção, troque os quatro cards. Por card: src e alt do logo, texto e href da manchete, linha fina, datetime e data legível.
O alt do logo é o nome do veículo, e não "logo do X": para quem ouve a página, o nome é a informação; a palavra "logo" é ruído.
Ganchos
| Gancho | O quê |
|---|---|
.news-destaque |
no primeiro card. Ocupa a fileira inteira e sobe o corpo da manchete |
| escopo da seção | .sec-paper para cara de papel, .sec-dark para o tom da marca. Nenhuma linha de CSS muda |
Variações
| Variação | Como |
|---|---|
| Sem destaque | tirar .news-destaque. Quatro cards de mesmo peso |
| No tom da marca | trocar .sec-paper por .sec-dark na seção |
| Faixa horizontal | grid-auto-flow: column, grid-auto-columns: min(78vw, 340px) e overflow-x: auto com scroll-snap no .news-grid. Para seis ou mais |
| Sem linha fina | apagar as .news-lead. Mais perto do recorte físico |
Gotchas
-
O logo se dimensiona pela altura, nunca pela largura. Os arquivos vêm em proporções de 1:1 a 6:1. Travando a largura, o logo quadrado vira gigante ao lado do deitado.
block-size:22px,inline-size:auto, e ummax-inline-sizesó como limite de segurança. -
O fio entre os cards é o fundo da grade, não borda de card. Borda por card dobra na divisa e vira 2px em algumas telas. O
gap:1pxsobre umbackground:var(--rule)nunca dobra — a mesma conta que aprova/grade-logos-miolofaz na malha dela. -
text-wrap:prettydesfaz obalancedo core. Ocore/base.cssdátext-wrap:balancea todoh1..h4. Numa manchete de três linhas o balance produz última linha órfã com uma palavra;prettyquebra pelo fim e mantém o bloco cheio, que é como jornal compõe. -
O card inteiro é clicável com um link só, esticado por
::after. A alternativa —<a>na manchete maisonclickno<article>— daria dois alvos ao leitor de tela, e um deles sem destino. O custo: o link esticado cobre o texto, então não dá para selecionar a manchete com o mouse. É o preço conhecido do padrão, e vale quando o card inteiro é o alvo. Se selecionar importa mais, tire o::aftere deixe o link só na manchete. -
A tipografia não imita a do veículo, e isso é decisão. Cada jornal tem a própria fonte, e fonte de terceiro não atravessa (§1). Quem diz de onde veio a manchete é o logo. Imitar a letra seria, além de ilegal, a parte errada da imitação: o que dá autoridade é a marca, não o desenho do "g".
-
transition: background-colortrava o tom, e isto custou o desenho do hover. A primeira versão animava o fundo do card no hover. Resultado: ao trocar o escopo da seção de.sec-paperpara.sec-dark, o fundo ficava preso no valor antigo —--bgresolvia certo no computado (#0a0a0a), o fio e o texto invertiam, e só obackgroundficava para trás, para sempre. Medido no Chrome: com a transição,rgb(237,233,227); removendo a transição na hora,rgb(10,10,10). Transição sobre propriedade que lê custom property não acompanha a troca da própria variável. Por isso o realce virou um véu em opacidade num::before— opacidade não depende de--bg, então o véu anima e o tom continua livre para mudar. E o véu exigez-index:1nos filhos, senão cobre o texto: a mesma linha que o.graindo core pede de quem o usa dentro de um card. -
A
.news-leadé cortada em três linhas por-webkit-line-clamp. Linha fina mais longa que isso some sem aviso — o corte é visual, não editorial. Escreva para caber.
Movimento reduzido / toque
O componente é CSS puro e não tem movimento próprio além da entrada do core e do hover.
Com prefers-reduced-motion: reduce, o realce de fundo no hover fica — ele diz onde o ponteiro está, e isso é informação. Sai só o deslocamento da seta, que é enfeite.
No toque não há hover, e nada se perde: o card inteiro é a área de toque, e a seta é decorativa (aria-hidden).
Histórico
| Origem | Quando | O quê |
|---|---|---|
| autoral | 2026-09-04 | Construído do zero, a partir de um problema real da casa |
Origem. Não há referência única: a dobra "na imprensa" existe em quase todo site institucional. O que originou este componente foi uma copy da casa em que as menções de jornal estavam como captura de tela — e o pedido de trocar print por HTML. Nada foi copiado: reescrito do zero dentro do contrato desta biblioteca. O registro consolidado vai em projetos/autorais.md.
Qual irmão ele substitui. A prova/marquee-logos mostra de quem se falou, sem dizer o quê; a prova/carrossel-depoimentos traz citação de pessoa, com retrato. Faltava a citação de veículo, com logo, data e link — que é o que transforma menção em prova verificável.
Decisões da tradução para o contrato. Nenhuma cor escrita no componente, então o escopo de tom da seção decide o visual inteiro — e foi essa exigência que derrubou a transição de background-color no hover, pelo motivo do gotcha correspondente. O fio pelo gap. O logo pela altura. text-wrap:pretty na manchete. Link único esticado. E data e link como estrutura, pela razão da seção de Compliance.
Calibragem no primeiro uso. Espere ajustar a altura do logo: 22px serve à maioria, mas veículo com marca muito horizontal pede 18px e o max-inline-size mais apertado. E confira o -webkit-line-clamp contra as suas linhas finas reais — três linhas é o teto do card comum, duas o do destaque.