Shortcodes: Theme Elements

Blocknumbers

In this example, the blocknumbers are set up in a 3 column grid system using row-fluid and span4. Blocknumbers can contain numbers as well as letters and font aweseome icons.

First Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Second Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third Heading

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>First Heading</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>First Heading</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>Second Heading</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>Third Heading</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
</div>

Spotlights

The spotlight classes are designed to highlight your general announcements, top content and generally everything that is the best in your website

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!

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

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

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

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

<div class="spotlight spotlight-v5">
  ...
</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>
<div class="spotlight spotlight-v4">
  <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>
<div class="spotlight spotlight-v5">
  <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>

You can add a shadow class to the spotlight boxes:

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>

You can add an arrow to the top or bottom of the spotlight-v1 container:

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>

Page Header

You can use an image and add a .course-pano class to it to create a visually appealing page header.

Sample Heading

... and a sample subheading

<div class="course-pano wrapper">
  <img src="...">
  <div class="course-pano title">
    <h2><span>Sample Heading</h2></span>
    <h4><span>... and a sample subheading</h4></span>
  </div>
</div>