Título da página (h1)

Quote script

CÓDIGO
<div class="quote-script">
  <div>
    <!-- seu conteúdo -->
  </div>
</div>

Tabelas

Estilos

Há dois estilos de tabela: apenas com linhas (padrão) e com todas as bordas (classe .tabela-bordas).

Hierarquia e organização

O modelo prevê dois níveis de cabeçalho. O segundo nível utiliza a classe .tabela-subtitulo em seu <tr>.
Quando aplicados títulos (<th>) para as linhas, caso se deseje eliminar o cabeçalho sobre esses títulos, basta utilizar <td> no cabeçalho da coluna correspondente.

Responsividade

As tabelas normalmente são inseridas dentro de uma div responsiva do Bootstrap (.table-responsive) que aplica scroll horizontal quando necessário para visualização em telas menores. No entanto, quando a tabela não possuir muito conteúdo, ela também pode ser aplicada sem essa div.

Tabela padrão

CÓDIGO
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <td></td>
        <th scope="col"><!-- Título da coluna 1 --></th>
        <th scope="col"><!-- Título da coluna 2 --></th>
        <th scope="col"><!-- Título da coluna 3 --></th>
      </tr>
      <tr class="tabela-subtitulo">
        <td></td>
        <th scope="col"><!-- Subtítulo da coluna 1 --></th>
        <th scope="col"><!-- Subtítulo da coluna 2 --></th>
        <th scope="col"><!-- Subtítulo da coluna 3 --></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row"><!-- Título da linha --></th>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
      </tr>
      <tr>
        <th scope="row"><!-- Título da linha --></th>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
      </tr>
    </tbody>
  </table>
</div>

Tabela com bordas

CÓDIGO
<div class="table-responsive">
  <table class="table tabela-bordas">
    <thead>
      <tr>
        <td></td>
        <th scope="col"><!-- Título da coluna 1 --></th>
        <th scope="col"><!-- Título da coluna 2 --></th>
        <th scope="col"><!-- Título da coluna 3 --></th>
      </tr>
      <tr class="tabela-subtitulo">
        <td></td>
        <th scope="col"><!-- Subtítulo da coluna 1 --></th>
        <th scope="col"><!-- Subtítulo da coluna 2 --></th>
        <th scope="col"><!-- Subtítulo da coluna 3 --></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row"><!-- Título da linha --></th>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
      </tr>
      <tr>
        <th scope="row"><!-- Título da linha --></th>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
      </tr>
    </tbody>
  </table>
</div>

Alinhamentos

As tabelas por padrão adotam o alinhamento de texto à esquerda e inferior no <thead> e à esquerda e superior no <tbody>.

Para centralizar o texto vertical ou horizontalmente, podem ser utilizadas as classes .tabela-centro-v e .tabela-centro-h.
Essas classes podem ser aplicadas no <thead>, para alterar somente as células do cabeçalho, ou na <table>, afetando todas as células da tabela.

Caso se deseje um controle mais preciso, como alterar apenas uma coluna, uma linha ou uma célula, as classes devem ser aplicadas nas células que se deseja alterar.

Exemplo de centralização vertical e horizontal aplicada em toda a tabela:

CÓDIGO
<div class="table-responsive">
  <table class="table tabela-bordas tabela-centro-v tabela-centro-h">
    <thead>
      <tr>
        <td></td>
        <th scope="col"><!-- Título da coluna 1 --></th>
        <th scope="col"><!-- Título da coluna 2 --></th>
        <th scope="col"><!-- Título da coluna 3 --></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th><!-- Título da linha --></th>
        <td>;<!-- Conteúdo da célula --></td>
        <td>;<!-- Conteúdo da célula --></td>
        <td>;<!-- Conteúdo da célula --></td>
      </tr>
      <tr>
        <th><!-- Título da linha --></th>
        <td>;<!-- Conteúdo da célula --></td>
        <td>;<!-- Conteúdo da célula --></td>
        <td>;<!-- Conteúdo da célula --></td>
      </tr>
    </tbody>
  </table>
</div>

Tabela reduzida

Quando a quantidade de informações for muito densa, pode ser utilizada uma versão comprimida da tabela, aplicando a classe .table-sm do Bootstrap.

CÓDIGO
<div class="table-responsive">
  <table class="table table-sm tabela-bordas">
    <thead>
      <tr>
        <th scope="col"><!-- Título da coluna 1 --></th>
        <th scope="col"><!-- Título da coluna 2 --></th>
        <th scope="col"><!-- Título da coluna 3 --></th>
        <th scope="col"><!-- Título da coluna 4 --></th>
        <th scope="col"><!-- Título da coluna 5 --></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
      </tr>
      <tr>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
        <td><!-- Conteúdo da célula --></td>
      </tr>
    </tbody>
  </table>
</div>

Listas customizadas

• Para modificar a cor dos marcadores de uma lista, utilize a classe .lista-custom na lista (<ul> ou <ol>);
• A cor padrão para os marcadores de listas customizadas é o vermelho;
• Também pode ser aplicada a cor verde, adicionando a classe .lista-verde à .lista-custom (ou seja, class="lista-custom lista-verde").

Listas numeradas

1. Quando aplicada em listas numeradas, a classe também altera a fonte do marcador;
2. Nesse exemplo, também foi aplicada a cor verde, adicionando a classe .lista-verde à <ol>.

Listas espaçadas

• O espaçamento entre itens de lista geralmente é somente um pouco maior do que o espaço entre duas linhas de texto;
• Para aplicar um espaçamento maior entre as linhas, equivalente ao espaço entre parágrafos, utilize a classe .lista-espacada na lista (<ol> ou <ul>);
• Essa classe pode ser utilizada sozinha, como neste exemplo, ou combinada com a .lista-custom.

CÓDIGO
<!-- LISTA BULLET -->
<ul class="lista-custom">
  <li>
    <!-- Seu conteúdo -->
  </li>
</ul>

CÓDIGO
<!-- LISTA NUMERADA -->
<ol class="lista-custom">
  <li>
    <!-- Seu conteúdo -->
  </li>
</ol>

Imagens com diálogo

Imagens que apresentam balões de diálogo podem ter a leitura prejudicada em telas menores. Para estes casos, deve-se utilizar duas imagens separadas, com o mesmo tamanho:

• Uma imagem apenas com a ilustração;
• Outra imagem apenas com os balões de diálogo, já corretamente posicionados.

Dessa forma, pode-se controlar a visibilidade do balão separadamente, substituindo-o por texto em dispositivos menores.

Estrutura

Cada imagem com diálogo deve utilizar uma div .imagem-dialogo, e o texto do diálogo deve ser transcrito na div .dialogo-texto, que substituirá os balões em telas menores. Para acessibilidade, o diálogo também deve estar presente como parte da descrição da ilustração (alt do .dialogo-imagem). O alt do .dialogo-balao deve ser deixado vazio.

Ajustes

Caso fique sobrando muito espaço na imagem devido à supressão dos balões, o espaçamento pode ser ajustado atribuindo um id ou declarando um estilo inline na .dialogo-imagens-container que se deseja alterar, sendo:

• margin-top para ajuste de espaço vertical;
• left para ajuste de espaço horizontal.

Por padrão, os espaçamentos definidos dessa forma já serão aplicados apenas em telas menores, quando os balões forem substituídos.

Breakpoints

O tamanho de tela em que ocorrerá a mudança é definido por uma classe adicionada à div .imagem-dialogo, sendo:

• .dialogo-md – 768px
• .dialogo-sm – 576px
• .dialogo-xs – 420px
• Nenhuma classe – Se não for adicionada nenhuma classe à .imagem-dialogo, o texto estará sempre visível e os balões, sempre ocultos. Pode ser útil caso de deseje uma imagem com esse estilo (nesse caso, o objeto .dialogo-balao pode ser dispensado)

– Desculpe, pessoal...

– Não se preocupe tanto! Os brinquedos são ótimos. Eles estão se divertindo muito.

CÓDIGO
<div class="imagem-dialogo dialogo-sm">
  <div class="dialogo-imagens-container">
    <img class="dialogo-imagem" src="" alt="descrição da imagem, incluindo transcrição do diálogo"/>
    <img class="dialogo-balao" src="" alt="" />
  </div>
  <div class="dialogo-texto" aria-hidden="true">
    <p>
      <!-- Diálogo -->
    </p>
  </div>
</div>