Santos Port Authority

Adicionar subtítulo com sublinhado

<h2>Seu Texto </h2>

Adicionando links verdes

EX: Para conhecer nossa linha do tempo, clique aqui.
<a href=”Seu_link” >Texto do link </a>

Adicionando links em negrito

EX: Clique aqui para mais informações
<a class=”links-pagina” href=”Seu_link” >Texto do link </a>

Adicionando collapses

EX:
+ Seu titulo aqui

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

<a class="btn btn-success text-light btn-coll mr-3" href="#SEU_ID" data-toggle="collapse" aria-expanded="false">+</a> Seu titulo aqui <div id="SEU_ID" class="collapse"> Texto que ficará colapsado </div><br>

Adicionando collapses – Tipo 2

EX:

Seu titulo aqui

<details> <summary> Seu titulo aqui </summary><br> <p> Seu texto aqui </p> </details>

Adicionando botão de download

EX:
Download
<a href=”SEU LINK AQUI”> Download <i class=”fas fa-download icone-padrao-verde”></i></a>

Retirar bullets da lista

EX:

item 1
item 2

Botões

Ex: A

<a href="" class="btn btn-letra" > TEXTO </a>

Ex: Botão Verde
<a href="" class="btn btn-success text-white" > TEXTO </a>

Ex: Botão Preto

<a href="" class="btn btn-dark text-white" > TEXTO </a>
Ex: Botão Amarelo

<a href="" class="btn btn-warning text-white" > TEXTO </a>
Ex: Botão Branco

<a href="" class="btn btn-light text-dark" > TEXTO </a>
Ex: Botão Cinza

<a href="" class="btn btn-secondary text-white" > TEXTO </a>
Ex: Botão azul

<a href="" class="btn btn-info text-white" > TEXTO </a>
Ex: 2020

<a href="" class="btn btn-mes" > TEXTO </a>

Padrão de tabela

Título da coluna	Título da coluna
Linha 1	Linha 2
Linha 1	Linha 2

<table class="table table-bordered table-hover"> <thead> <tr> <th scope="col" class="text-light h6 text-center table-success-spa align-middle">Título da coluna</th> <th scope="col" class="text-light h6 text-center table-success-spa align-middle">Título da coluna</th> </tr> </thead> <tbody> <tr> <th class="align-middle" scope="row">Linha 1</th> <td class="text-center align-middle">Linha 2</td> </tr> <tr> <th class="align-middle" scope="row">Linha 1</th> <td class="text-center align-middle">Linha 2</td> </tr> </tbody> </table>

Padrão de telefone e e-mail

(13) 1234-4567

exemplo@brssz.com

<p class="icone-box"><i class="fas fa-phone alt icone-padrao-verde" aria-hidden="true"></i>(13) 1234-4567</p> <p class="icone-box"><i class="fas fa-envelope icone-padrao-verde" aria-hidden="true"></i><a href="mailto:exemplo@brssz.com">exemplo@brssz.com</a></p>