Formatos de texto
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% |
Os títulos de nível 1 são espaçados do conteúdo anterior no dobro do que os de níveis maiores.
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.
Ficam encapsuladas dentro das tags <ul> e </ul> e o marcador é um quadrado da mesma cor do texto.
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 |
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>
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>
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>