Repositório Códigos HTML

<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>

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.