Elementos Temáticos

Blocknumbers

En este ejemplo, los blocknumbers se configuran en 3 columnas utilizando row-fluid y span4. Estos blocknumbers pueden contener números, letras o iconos de Font Aweseome.

Título 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Título 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Título 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="row-fluid">
  <div class="span4">
    <div class="blocknumber_box">
      <div class="blocknumber_icon">
        1
      </div>
      <div class="blocknumber_content">
        <h5>Título 1</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </div>
  <div class="span4">
    <div class="blocknumber_box">
      ...
    </div>
  </div>
  ...
</div>


<div class="row-fluid">
<div class="span4">
<div class="blocknumber_box">
<div class="blocknumber_icon">
1
</div>
<div class="blocknumber_content">
<h5>Título 1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
<div class="span4">
<div class="blocknumber_box">
<div class="blocknumber_icon">
b
</div>
<div class="blocknumber_content">
<h5>Título 2</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
<div class="span4">
<div class="blocknumber_box">
<div class="blocknumber_icon">
<i class="fa fa-gift"></i>
</div>
<div class="blocknumber_content">
<h5>Título 3</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
</div>

Destacados

Puede resaltar contenidos mediante anuncios generales utilizando la clase 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.

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!

<div class="spotlight spotlight-v1">
  ...
</div>

<div class="spotlight spotlight-v2">
  ...
</div>

<div class="spotlight spotlight-v3">
  ...
</div>


<div class="spotlight spotlight-v1">
  <i class="fa fa-comments fa-4x pull-left" style="color:#400090;"></i>
  <h3>spotlight-v1 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.
  <br>
  </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>
<div class="spotlight spotlight-v2">
  <i class="fa fa-comments fa-4x pull-left" style="color:#38b9ec;"></i>
  <h3>spotlight-v2 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.
  <br>
  </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>
<div class="spotlight spotlight-v3">
  <i class="fa fa-comments fa-4x pull-left" style="color:#bd1a8d;"></i>
  <h3>spotlight-v3 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.
  <br>
  </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>

Se puede agregar sombras a las cajas destacadas:

spotlight-v2 with shadow1

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.

spotlight-v2 with shadow2

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.

<div class="spotlight spotlight-v2 shadow1">
  ...
</div>

<div class="spotlight spotlight-v2 shadow2">
  ...
</div>

Puede agregar una flecha en la parte superior o inferior de la caja con spotlight-v1:

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.

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.

<div class="spotlight spotlight-v1 arrow-top">
  ...
</div>

<div class="spotlight spotlight-v1 arrow-bottom">
  ...
</div>

Encabezado de página

Mediante el uso de la clase .course-pano y una imagen, pude crear un encabezado de página visualmente atractivo.

Curso de estilización de contenidos

... este es un ejemplo de la estilización!

<div class="course-pano wrapper">
  <img src="...">
  <div class="course-pano title">
    <h2><span>Curso de estilización de contenidos</h2></span>
    <h4><span>... este es un ejemplo de la estilización!</h4></span>
  </div>
</div>