Jornalismo Colaborativo · Guia editorial v1+

Blocos prontos para posts especiais do JC

Escolha um bloco, copie com um clique e cole no editor do WordPress. Use classes nativas para manter identidade, modo escuro, responsividade e PageSpeed.

Não use cor manual

Evite pintar texto manualmente no editor. Use os blocos prontos.

Botões no lugar certo

Quando usar botão, mantenha o bloco completo copiado do guia.

Contraste

Claro com texto escuro. Escuro com texto claro.

Funciona no celular

Não force tamanho manual em imagens, cards ou colunas.

Como usar: clique em copiar, cole no editor do WordPress em modo HTML/código e troque apenas títulos, textos, links e imagens.

Índice do texto

Nesta publicação

Use quando o texto tiver várias partes. Ele cria um pequeno índice com links para cada trecho da publicação.

Bloco para copiar

<section class="jc-toc-grid">
  <aside class="jc-toc-box">
    <h3>Nesta publicação</h3>
    <ul>
      <li><a href="#secao-1">Primeira seção</a></li>
      <li><a href="#secao-2">Segunda seção</a></li>
      <li><a href="#secao-3">Terceira seção</a></li>
    </ul>
  </aside>

  <div class="jc-toc-content">
    <p class="jc-chapeu">Chapéu editorial</p>
    <h2 id="secao-1">Primeira seção</h2>
    <p>Texto inicial da publicação.</p>
  </div>
</section>

Prévia do bloco

Nesta publicaçãoPrimeira seçãoSegunda seçãoTerceira seção

Dossiê

Conteúdo principal

O texto aparece ao lado do índice sem buracos ou quebras artificiais.

Começo do texto

Chapéu editorial

Use uma frase curta para indicar o tema, a série, a editoria ou o contexto do texto.

Bloco para copiar

<p class="jc-chapeu">Comunicação científica · Especial</p>

Prévia do bloco

Comunicação científica · Especial

Título da seção

Texto vem depois do chapéu com respiro adequado.

Imagem e legenda

Imagem central ou lateral

Use imagem central quando quiser dar respiro ao texto. Use imagem lateral apenas quando houver texto suficiente ao lado.

Bloco para copiar

<figure class="aligncenter">
  <img src="URL-DA-IMAGEM.webp" alt="Descrição objetiva da imagem" width="1200" height="675" loading="lazy" decoding="async">
  <figcaption>Legenda curta da imagem. Crédito: Nome/Divulgação.</figcaption>
</figure>

<figure class="alignleft">
  <img src="URL-DA-IMAGEM.webp" alt="Descrição objetiva da imagem" width="420" height="420" loading="lazy" decoding="async">
  <figcaption>Legenda curta.</figcaption>
</figure>

Prévia do bloco

Imagem

Legenda próxima da imagem, curta e informativa.

Ações

Botões positivos e negativos

Use botão escuro em fundo claro. Use botão claro apenas quando o fundo for escuro.

Bloco para copiar

<div class="jc-reference-actions">
  <a class="jcproa-btn jcproa-btn-dark-solid" href="URL">Chamada principal</a>
  <a class="jcproa-btn jcproa-btn-light jcproa-btn-light-safe" href="URL"><span class="jcproa-btn-label">Chamada clara para fundo escuro</span></a>
  <a class="jcproa-btn jcproa-btn-outline-light" href="URL">Chamada contornada para fundo escuro</a>
</div>

Prévia do bloco

PrincipalSecundário

Claro no escuroContorno

Fontes e leitura

Referências com linhas pontilhadas

Use no fim do texto para fontes, leituras relacionadas e links institucionais. Os links ficam limpos, sem sublinhado fixo.

Bloco para copiar

<section class="jc-reference-panels">
  <div class="jc-inline-panel">
    <h3>Referências</h3>

    <ul class="jc-dotted-refs">
      <li>
        <a href="URL">Título da referência</a>
        <span>Breve explicação do motivo da indicação.</span>
      </li>
      <li>
        <a href="URL">Outra leitura relacionada</a>
        <span>Contexto do material recomendado.</span>
      </li>
      <li>
        <a href="URL">Fonte institucional</a>
        <span>Documento, página oficial, estudo ou material de apoio.</span>
      </li>
      <li>
        <a href="URL">Leitura complementar</a>
        <span>Post do JC ou conteúdo relacionado ao tema.</span>
      </li>
    </ul>
  </div>
</section>

Prévia do bloco

Título da referênciaBreve explicação do link indicado.

Outra leitura relacionadaContexto do material recomendado.

Fonte institucionalUse para documentos, páginas oficiais ou estudos.

Leitura complementarUse para posts do JC ou materiais relacionados.

Contexto

Box editorial claro

Use para uma nota curta, atualização, aviso ao leitor ou explicação de contexto.

Bloco para copiar

<section class="jc-reading-path">
  <p><strong>Nota editorial:</strong> texto curto de contexto para o leitor.</p>
</section>

Prévia do bloco

Nota editorial: texto curto com contexto para o leitor.

Destaque

Box escuro

Use para uma chamada importante, nota institucional ou destaque. O título fica forte, mas sem peso exagerado.

Bloco para copiar

<section class="jc-dark-box">
  <h3>Título do box escuro</h3>
  <p>Texto claro sobre fundo escuro, com contraste estável e sem exagero visual.</p>

  <div class="jc-reference-actions">
    <a class="jcproa-btn jcproa-btn-light jcproa-btn-light-safe" href="URL"><span class="jcproa-btn-label">Ação principal</span></a>
    <a class="jcproa-btn jcproa-btn-outline-light" href="URL">Ação secundária</a>
  </div>
</section>

Prévia do bloco

Título do box escuro

Texto claro sobre fundo escuro, com contraste estável e sem exagero visual.

FAQ

Accordion leve

Use para pergunta e resposta. O leitor clica para abrir ou fechar a explicação.

Bloco para copiar

<details class="jc-light-accordion">
  <summary>Pergunta do leitor</summary>
  <div class="jc-light-accordion-body">
    <p>Resposta curta e objetiva.</p>
  </div>
</details>

Prévia do bloco

Pergunta do leitor

Resposta curta e objetiva. Clique no título para abrir ou fechar.

Organização visual

Cards editoriais

Use para organizar pontos, etapas, serviços, ideias ou partes de um projeto.

Bloco para copiar

<section class="jc-editorial-card-grid">
  <article class="jc-editorial-card">
    <h3>Card um</h3>
    <p>Descrição curta do primeiro ponto.</p>
  </article>

  <article class="jc-editorial-card">
    <h3>Card dois</h3>
    <p>Descrição curta do segundo ponto.</p>
  </article>
</section>

Prévia do bloco

Card um

Descrição curta.

Card dois

Descrição curta.

Lista

Checklist editorial

Use para listas de etapas, critérios, checagens ou requisitos.

Bloco para copiar

<ul class="jc-editorial-checklist">
  <li>Critério principal</li>
  <li>Segundo critério</li>
  <li>Validação final</li>
</ul>

Prévia do bloco

Critério principal
Segundo critério
Validação final

Modelo completo

Modelo completo de post especial

Use quando quiser montar uma publicação inteira: começo, índice, texto, nota editorial e referências. É o pacote completo. Não use este modelo para publieditoriais ou informes publicitários.

Bloco para copiar

<article class="jc-authority-feature jc-book-post">

  <section class="jc-toc-grid">
    <aside class="jc-toc-box">
      <h3>Nesta publicação</h3>
      <ul>
        <li><a href="#abertura">Abertura</a></li>
        <li><a href="#contexto">Contexto</a></li>
        <li><a href="#referencias">Referências</a></li>
      </ul>
    </aside>

    <div class="jc-toc-content">
      <p class="jc-chapeu">Chapéu editorial do conteúdo</p>
      <h2 id="abertura">Título da abertura</h2>
      <p>Primeiro parágrafo do texto.</p>
      <p>Segundo parágrafo do texto.</p>
    </div>
  </section>

  <h2 id="contexto">Contexto</h2>
  <p>Texto da seção.</p>

  <section class="jc-reading-path">
    <p><strong>Nota editorial:</strong> contexto breve para o leitor.</p>
  </section>

  <h2 id="referencias">Referências</h2>
  <section class="jc-reference-panels">
    <div class="jc-inline-panel">
      <ul class="jc-dotted-refs">
        <li><a href="URL">Título da referência</a><span>Breve explicação do link.</span></li>
      </ul>
    </div>
  </section>

</article>

Prévia do bloco

Especial JC

Título principal da publicação especial

Uma abertura curta apresenta o tema e prepara o leitor para o conteúdo.

Chapéu editorial

Abertura do texto

O conteúdo começa ao lado do índice interno, com boa leitura e sem estilos manuais.

Nota editorial: um destaque curto ajuda a explicar o contexto.

Card editorial

Organize pontos importantes.

Referências

Finalize com fontes e leituras relacionadas.