Repositório Códigos HTML

8. Caixas de destaque personalizadas

Título

Ênfase A Lorem ipsum ...
Ênfase B  Lorem ipsum ...
Ênfase C Lorem ipsum ...

Ênfase A Lorem ipsum ...
Ênfase B  Lorem ipsum ...
Ênfase C Lorem ipsum ...

Ênfase A Lorem ipsum ...
Ênfase B  Lorem ipsum ...
Ênfase C Lorem ipsum ...

Ênfase A Lorem ipsum ...
Ênfase B  Lorem ipsum ...
Ênfase C Lorem ipsum ...

Ênfase A Lorem ipsum ...
Ênfase B  Lorem ipsum ...
Ênfase C Lorem ipsum ...

...

...

...

...

Veja a seguir o código HTML comentado.

Código

<div class="prom-box prom-box-info" style="position: inherit;">

<h2><strong><span color="#009ACD" style="color: #009acd;">Título</span></strong></h2>
<p><span color="#009ACD" style="color: #009acd;"><strong><span>Ênfase A</span> </strong></span>Lorem ipsum ...<br /><span color="#009ACD" style="color: #009acd;"><strong>Ênfase B  </strong></span>Lorem ipsum ...<br /><span color="#009ACD" style="color: #009acd;"><strong> Ênfase C </strong></span>Lorem ipsum ...</p>
</div>

Comentário

O trecho em azul claro é a imagem (caixa) de fundo. Cada caixa tem sua cor pré-definida.

O trecho em amarelo claro refere-se à formatação do Título.

Os trechos em salmão  referem-se aos textos que devem ser substituídos pelo conteúdo. Aqui basta inserir os textos, cuidando para não apagar nenhuma demarcação HTML. Importante manter relação do ícone com o título da caixa.

O código em verde é a cor das fontes.