Intro
As Citações são utilizadas para destacar trechos textuais provenientes de fontes externas ou falas institucionais dentro de conteúdos editoriais, notícias e documentos oficiais. Elas têm como objetivo dar ênfase a declarações relevantes, reforçar autoridade da informação, destacar trechos importantes e organizar conteúdo editorial. No Design System, a citação é um bloco tipográfico diferenciado do parágrafo padrão e deve ser utilizada de forma estratégica.
Papel na Hierarquia
As citações ocupam posição intermediária entre o parágrafo comum e o bloco de destaque. Elas não substituem títulos e não estruturam seções. Seu papel é fornecer realce contextual dentro de um fluxo textual, contribuindo para a hierarquia visual sem competir com níveis estruturais como H2 ou H3.
Estrutura Semântica
Estrutura recomendada:
<blockquote>
<p>Texto da citação.</p>
<cite>Fonte</cite>
</blockquote>
Regras fundamentais:
- Utilizar
<blockquote>para citações longas. - Utilizar
<cite>para indicar autoria ou fonte. - Não utilizar
<div>para simular citação. - Não utilizar apenas aspas como recurso estrutural.
A semântica correta melhora acessibilidade e interpretação por leitores de tela.
Estrutura Semântica
Estrutura recomendada:
<blockquote>
<p>Texto da citação.</p>
<cite>Fonte</cite>
</blockquote>
Regras fundamentais:
- Utilizar
<blockquote>para citações longas. - Utilizar
<cite>para indicar autoria ou fonte. - Não utilizar
<div>para simular citação. - Não utilizar apenas aspas como recurso estrutural.
A semântica correta melhora acessibilidade e interpretação por leitores de tela.
Tipos de Citação
Citação Editorial
Utilizada em notícias, portais institucionais e comunicados públicos para destacar falas relevantes dentro da narrativa.
Exemplo:
“Exemplo de citação em conteúdos em notícias”
Fonte: Secretaria X
Citação Institucional
Aplicada para destacar declarações oficiais, pronunciamentos ou falas de autoridades. Pode incluir nome da autoridade, cargo e órgão.
Citação Técnica
Utilizada em documentos normativos, relatórios e referências técnicas. Pode incluir número de norma, lei ou documento oficial.
Comprimento Ideal
A citação deve ter entre 1 e 4 linhas, mantendo objetividade e clareza. Evitar blocos excessivamente longos que comprometam a leitura ou que transformem a citação em um segundo corpo textual completo.
Boas Práticas
✅ Faça
- Destaque apenas trechos realmente relevantes.
- Sempre indique a fonte de forma clara.
- Utilize contraste adequado para garantir legibilidade.
- Mantenha espaçamento consistente acima e abaixo do bloco.
- Preserve o texto original quando for uma citação direta.
❌ Não Faça
- Não utilize citação para texto autoral comum.
- Não omita a fonte.
- Não use apenas aspas como único recurso visual.
- Não aplique estilo de título no texto da citação.
- Não utilize citação de forma excessiva na mesma página.
Acessibilidade
A citação deve manter contraste mínimo de 4.5:1, preservar a estrutura semântica com <blockquote> e <cite>, manter espaçamento adequado para leitura confortável e não depender exclusivamente de cor para indicar destaque. A barra lateral é um recurso visual complementar, mas não deve ser o único indicador de diferenciação.
Espaçamento e Ritmo
A citação deve possuir margem superior e inferior clara, evitando colagem com parágrafos adjacentes. Deve manter alinhamento com o grid do layout e respeitar o ritmo vertical estabelecido pela tipografia base do sistema.
Relação com Outros Elementos
Citações podem aparecer entre parágrafos, após introduções de seção, dentro de conteúdos editoriais ou em Cards de notícia. Não devem substituir subtítulos nem funcionar como elemento estrutural principal da página.
Resumo
As citações são elementos de destaque que reforçam autoridade, estruturam conteúdo editorial e aumentam escaneabilidade. Devem ser usadas com moderação e sempre respeitando semântica, contraste, clareza e coerência com a hierarquia do Design System.