Imprimir este capítuloImprimir este capítulo

Repositório Códigos HTML

5. Spotlight

spotlight-v1 heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Primary Button

spotlight-v2 heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Read More!

spotlight-v3 heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Read More!

spotlight-v4 heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Read More!

spotlight-v5 heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Read More!

Veja a seguir o código HTML comentado.

Código

<div class="spotlight spotlight-v4"><i class="fa fa-comments fa-4x pull-left" style="color: #bd1a8d;"></i>
<h3>spotlight-v4 heading</h3>
<h5>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<h5>
<h6>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</h6>
<a class="btn btn-primary" href="#">Read more!</a></div>

Comentário

O trecho em amarelo claro refere-se ao ícone (ex: fa fa-comments fa-4x pull-left=balãozinhos), e pode ser substituído pelo código do ícone de sua preferência. Importante manter relação do ícone com o título da caixa.

Os códigos em azul claro  (<h1>, <h2>, <h3>) antes e depois do texto determina o nível de cabeçalho (tamanho e formatação).

Os trechos em salmão são o título da caixa e o texto explicativo. Aqui basta substituir pelo título e texto relativo ao seu conteúdo, cuidando para não apagar nenhuma demarcação HTML. 

O trecho em azul é o link para onde o "Read more!" irá levar. Se quiser que o link vá para um arquivo em específico, suba o arquivo em uma pasta do ambiente, clique com o botão direito sobre o arquivo e copie o endereço do link. Você também pode colocar o link para uma outra página.