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

1

##### First Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

b

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