Features - section

Use this layout to highlight features or selling key points.

feature-icons page

CODE

Here is the HTML code to obtain it. Embed it within the main tag with class page-main.

HTML Features
<div class="section section-description bg-primary landing-highhlight-features" data-section="features-more">
  <!-- Begin of section wrapper -->
  <div class="section-wrapper padding-top padding-bottom">
    <!-- title -->
    <div class="section-title text-center">
      <h2 class="display-4 display-title">Attractive Aspects</h2>
    </div>

    <!-- content -->
    <div class="section-content anim text-center">
      <!-- title and description -->
      <div class="title-desc reduced">
        <p>This is a placeholder text. Replace it with your awesome call to action text. Lorem ipsum dolor sit amet, consectetur
          adipiscing elit. Mauris aliquet malesuada feugiat.
        </p>
      </div>

      <div class="service-grid">
        <div class="row mt-4">
          <div class="col-12 col-md-4">
            <!-- begin of  item -->
            <div class="feature-beta sr-zoomin-td4">
              <div class="item-icon">
                <i class="icon icon-4 fa fa-download text-gradient-primary"></i>
              </div>
              <h4 class="item-name">All in one package</h4>
              <div class="item-desc">
                <p>This is a placeholder text. Replace it with your awesome call to action text.</p>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <!-- begin of  item -->
            <a href="" class="feature-beta sr-zoomin-td6">
              <div class="item-icon">
                <i class="icon icon-4 text-gradient-primary ion ion-wrench"></i>
              </div>
              <h4 class="item-name">Clickable Item</h4>
              <div class="item-desc">
                <p>This panel is clickable. Just replace the href by your link.</p>
              </div>
            </a>
          </div>
          <div class="col-12 col-md-4">
            <!-- begin of  item -->
            <div class="feature-beta sr-zoomin-td8">
              <div class="item-icon">
                <i class="icon icon-4 text-gradient-primary ion ion-code"></i>
              </div>
              <h4 class="item-name">Ready for Search Engine</h4>
              <div class="item-desc">
                <p>This is a placeholder text. Replace it with your awesome call to action text.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End of section wrapper -->
</div>

The div with class feature-alpha represent a feature item. It is embeded within a Bootstrap column col-12 col-md-4, so duplicate it to add more :

<div class="col-12 col-md-4">
  <!-- begin of  item -->
  <div class="feature-beta sr-zoomin-td4">
    <div class="item-icon">
      <i class="icon icon-4 fa fa-download text-gradient-primary"></i>
    </div>
    <h4 class="item-name">All in one package</h4>
    <div class="item-desc">
      <p>This is a placeholder text. Replace it with your awesome call to action text.</p>
    </div>
  </div>
</div>

text-gradient-primary represent the icon color.

Ionicons (ionicons.com) or Font awesome icons (fontawesome.io) can be used here.

Fontawesome icons are presented by a <a href="..."><i class="icon fa fa-ICONREF"></i></a> line.ICONREF value can be "facebook", "twitter", ...

For Ionicons, they are presented by a <a href="..."><i class="icon ion-ICONREF"></i></a> line.ICONREF value can be "facebook", "twitter", ...