Promo

If you need to make a home page for your documentation or even using some information box in your text, you can use this component to beutify your presentation.

With icon
With button
With image

With icon

Check this example to learn basic usage.


<div class="row">
  <div class="col-md-4">
    <div class="promo">
      <i class="fa fa-mobile"></i>
      <h3>Responsive</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <i class="fa fa-cog"></i>
      <h3>Customizable</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <i class="fa fa-code"></i>
      <h3>Full of features</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
</div>

Alignment

Add class .left or .right to .promo tag, if you want to change alignment.


<div class="row">
  <div class="col-md-4">
    <div class="promo center">
      <i class="fa fa-mobile"></i>
      <h3>Responsive</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo center">
      <i class="fa fa-cog"></i>
      <h3>Customizable</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo center">
      <i class="fa fa-code"></i>
      <h3>Full of features</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
</div>

Small icon

Add .small-icon class to .promo tag to make your icons smaller.


<div class="row">
  <div class="col-md-4">
    <div class="promo left small-icon">
      <i class="fa fa-tv"></i>
      <h3>Responsive</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>

  <div class="col-md-4">
    <div class="promo left small-icon">
      <i class="fa fa-wrench"></i>
      <h3>Customizable</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>

  <div class="col-md-4">
    <div class="promo left small-icon">
      <i class="fa fa-cubes"></i>
      <h3>UI Elements</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
</div>

With button

If you want to guide user to another pages, you can use button links in your promo blocks.


<div class="row">
  <div class="col-md-4">
    <div class="promo">
      <h3>Responsive</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
      <a class="btn btn-teal btn-lg" href="#">Learn more</a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <h3>Customizable</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
      <a class="btn btn-teal btn-lg" href="#">Learn more</a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <h3>Full of features</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
      <a class="btn btn-teal btn-lg" href="#">Learn more</a>
    </div>
  </div>
</div>

Alignment

You can also use both .left and .right in .promo.

With image

Make it fancier by adding an image to your promo boxes.


<div class="row">
  <div class="col-md-4">
    <div class="promo">
      <img src="assets/img/placeholder.png" alt="Responsive">
      <h3>Responsive</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <img src="assets/img/placeholder.png" alt="Customizable">
      <h3>Customizable</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <img src="assets/img/placeholder.png" alt="Full of features">
      <h3>Full of features</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
</div>

Bordered

Add .bordered to img tag, so you’ll have a border around image!


<div class="row">
  <div class="col-md-4">
    <div class="promo">
      <img class="bordered" src="assets/img/placeholder.png" alt="Responsive">
      <h3>Responsive</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <img class="bordered" src="assets/img/placeholder.png" alt="Customizable">
      <h3>Customizable</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <img class="bordered" src="assets/img/placeholder.png" alt="Full of features">
      <h3>Full of features</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
</div>