Charming Pro Documentation

Merits

Merits are a set of feature boxes to highlight particular aspects of your service or product. They currently work well with the Stroke 7 Icon set by Pixeden (Included in the example under /modules/) and Font Awesome 4. Simply adjust the icon class to choose a pictogram that best represents your message.

Crafted by Experts

This is where you point out top characteristics of your product.

Modules like Lego Bricks

Build your dream project by using Charming Pro's modules.

Save money and design effort

HTML/CSS templates typically save you time when building projects. 

<div id="merits" class="merits merits-dark text-center block-bb">
  <div class="container">
    <div class="row">
      <div class="col-xl-4 col-lg-6 merits-item">
        <span class="icon merits-icon pe-7s-helm"></span>
        <h5>Crafted by Experts</h5>
        <p>
          This is where you point out top characteristics of your product. </p>
      </div>
      <div class="col-xl-4 col-lg-6 merits-item">
        <span class="icon merits-icon pe-7s-plugin"></span>
        <h5>Modules like Lego Bricks</h5>
        <p>
          Build your dream project by using Charming Pro's modules.
        </p>
      </div>
      <div class="col-xl-4 col-lg-6 merits-item">
        <span class="icon merits-icon pe-7s-piggy"></span>
        <h5>Save money and design effort</h5>
        <p>
          HTML/CSS templates typically save you time when building projects.
        </p>
      </div>
    </div>
  </div>
</div>

See component in action

Color variations

Use the merits-primary or any other theme color class to create a merit element in that color.

Crafted by Experts

This is where you point out top characteristics of your product.

Modules like Lego Bricks

Build your dream project by using Charming Pro's modules.

Save money and design effort

HTML/CSS templates typically save you time when building projects. 

<div id="merits" class="merits merits-primary text-center block-bb">
  <div class="container">
    <div class="row">
      <div class="col-xl-4 col-lg-6 merits-item">
        <span class="icon merits-icon pe-7s-helm"></span>
        <h5>Crafted by Experts</h5>
        <p>
          This is where you point out top characteristics of your product. </p>
      </div>
      <div class="col-xl-4 col-lg-6 merits-item">
        <span class="icon merits-icon pe-7s-plugin"></span>
        <h5>Modules like Lego Bricks</h5>
        <p>
          Build your dream project by using Charming Pro's modules.
        </p>
      </div>
      <div class="col-xl-4 col-lg-6 merits-item">
        <span class="icon merits-icon pe-7s-piggy"></span>
        <h5>Save money and design effort</h5>
        <p>
          HTML/CSS templates typically save you time when building projects.
        </p>
      </div>
    </div>
  </div>
</div>

With Font Awesome

Merits in the example use Stroke 7 Icon Font Set by Pixeden. You can also use Font Awesome by replacing the ps-s7-*** class with the appropriate fa fa-*** class

Crafted by Experts

This is where you point out top characteristics of your product.

Modules like Lego Bricks

Build your dream project by using Charming Pro's modules.

Save money and design effort

HTML/CSS templates typically save you time when building projects. 

<div id="merits" class="merits merits-dark text-center block-bb">
  <div class="container">
    <div class="row">
      <div class="col-xl-4 col-lg-6 merits-item">
        <span class="icon merits-icon fa fa-anchor"></span>
        <h5>Crafted by Experts</h5>
        <p>
          This is where you point out top characteristics of your product. </p>
      </div>
      <div class="col-xl-4 col-lg-6 merits-item">
        <span class="icon merits-icon fa fa-plug"></span>
        <h5>Modules like Lego Bricks</h5>
        <p>
          Build your dream project by using Charming Pro's modules.
        </p>
      </div>
      <div class="col-xl-4 col-lg-6 merits-item">
        <span class="icon merits-icon fa fa-chain"></span>
        <h5>Save money and design effort</h5>
        <p>
          HTML/CSS templates typically save you time when building projects.
        </p>
      </div>
    </div>
  </div>
</div>