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.

  1. With icon
  2. With button
  3. With image

With icon

Check this example to learn basic usage.

Responsive

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Customizable

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Full of features

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Alignment

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

Responsive

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Customizable

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Full of features

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Small icon

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

Responsive

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Customizable

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

UI Elements

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

With button

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

Responsive

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Learn more

Customizable

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Learn more

Full of features

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Learn more

Alignment

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

With image

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

Responsive

Responsive

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Customizable

Customizable

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Full of features

Full of features

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Bordered

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

Responsive

Responsive

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Customizable

Customizable

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Full of features

Full of features

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.