Formatos de texto - SPURB/participe GitHub Wiki

Títulos e subtítulos

Dentro de uma consulta, o título principal (o nome do objeto da consulta) aparece na capa, e a tag <h1> é reservada para esse fim. Os próximos níveis de título ficam dentro da coluna de texto e vão tendo seus tamanhos reduzidos na medida em que o nível aumenta, podendo ser usados juntos a um subtítulo de mesmo nível:

<h2>Título da seção</h2>
<h2 class="subtitulo">Subtítulo da seção, se houver</h2>
Nível Tag HTML Proporção do título Proporção do subtítulo
1 h2 200% 140%
2 h3 160% 120%
3 h4 140% 100%
4 h5 120% 80%
5 h6 100% 80%

Tamanhos de títulos e subtítulos

Os títulos de nível 1 são espaçados do conteúdo anterior no dobro do que os de níveis maiores.

Parágrafos

O tamanho da fonte dos textos é 20 pixels, para telas desktop, e 16 para dispositivos móveis e o espaçamento entre linhas é de 160% (32 e 25,6 pixels, respectivamente). O espaço entre parágrafos tem o mesmo tamanho da fonte.

Listas simples (sem ordem)

Ficam encapsuladas dentro das tags <ul> e </ul> e o marcador é um quadrado da mesma cor do texto.

Listas ordenadas

As listas ordenadas podem ser de quatro tipos (com números decimais ou romanos, letras maiúsculas ou minúsculas), aplicados quando atribui-se a respectiva classe à tag ol:

<ol class="[nome da classe CSS]">
    <li>...</li>
</ol>
Tipo da numeração da lista Nome da classe CSS
Números decimais (1, 2, 3...) decimais
Número romanos (I, II, III...) romanos
Letras minúsculas (a, b, c...) minusculas
Letras maiúsculas (A, B, C...) maiusculas

Listas de links

Pode ser interessante utilizar uma lista de links para mostrar um repositório de materiais disponível para o usuário, ao disponibilizar, por exemplo, vários arquivos PDF (como capítulos separados de uma mesma publicação) ou um grupo de modelos de documento de texto editáveis.

Para usar uma lista de links, é necessário atribuir a classe links à um elemento de lista (ol ou ul). Os itens da lista serão renderizados como uma série de botões com espaço para inserir um ícone, a descrição do link (nome do arquivo, por exemplo) e para informar o tamanho do arquivo, se necessário.

<ul class="links">
    <li> <!-- o conteúdo entre cada par de tags <li> e </li> se refere a um item da lista -->
        <a href="">
            <i><!-- espaço para inserir um ícone --></i>
            <div><!-- nome do link --></div>
            <span><!-- espaço para inserir o tamanho do arquivo --></span>
        </a>
    </li>
</ul>

Exemplo de lista de links

Citações em bloco

São delimitadas pelas tags <blockquote> e </blockquote> e aparecem dentro de um box destacado do texto de parágrafo com um marcador de "abre aspas" antes da citação. Separa-se a citação em parágrafos encapsulados por <p> e </p>, e há a possibilidade de acrescentar a fonte da citação, aplicando a classe "fonte" à um elemento p:

<blockquote>
    <p>É importante, para o reequilíbrio das dinâmicas metropolitanas, (...)</p>
    <p class="fonte">Fonte da citação</p>
</blockquote>

Exemplo de citação em bloco

Textos jurídicos

Para reproduzir uma lei ou decreto, pode-se atribuir a classe CSS "leg" ao elemento blockquote. Isso faz com que o texto fique dentro de um box (menos marcado que o de citação em bloco). O texto é dividido em parágrafos e a primeira linha de cada um tem uma indentação. Também é possível destacar um caput, atribuindo a classe "caput" à um elemento de parágrafo p.

<blockquote class="leg">
    <p class="numero">LEI Nº 16.050, DE 31 DE JULHO DE 2014</p>
    <p class="numero">(PROJETO DE LEI Nº 688/13, DO EXECUTIVO, APROVADO NA FORMA DE SUBSTITUTIVO DO LEGISLATIVO)</p>
    <p class="caput">Aprova  a  Política  de  Desenvolvimento  Urbano  e  o  Plano  Diretor  Estratégico  do  Município  de  São  Paulo  e  revoga  a  Lei  nº  13.430/2002.</p>
    <p>Art.  136.  Os  Projetos  de  Intervenção  Urbana,  elaborados  pelo Poder Público objetivam subsidiar e apresentar as propos-tas  de  transformações  urbanísticas,  econômicas  e  ambientais  nos  perímetros  onde  forem  aplicados  os  instrumentos (...)</p>
    <p class="fonte">Fonte: <a href="">Plano Diretor Estratégico</a></p>
</blockquote>

Exemplo de uma citação de uma lei

⚠️ **GitHub.com Fallback** ⚠️