This tutorial explains, how to create feature block as show in demo.
Use below sample code to create features as shown in demo.
Disable CKEditor editor and select Full HTML as input format.
But we recommend to create and use a new text input format like Full HTML but without CKEditor editor as explained here: Create a new Text Format without CKEditor in Drupal 8
Let us first create a row.
Feature should be placed within a div of class full.
Feature should be placed within a div of class full.
<div class="full">
-- Your feature Here --
</div>You can place one / two / three / four feature in a row.
Let's create 3 columns for three feature.
Create three div of class item.
<div class="full">
<div class="item">
Column for feature One
</div> <!--/ End item One -->
<div class="item">
Column for featureTwo
</div> <!--/ End item Two -->
<div class="item">
Column for feature Three
</div> <!--/ End item Three -->
</div>Each feature should be placed within a div of class feature.
<div class="full">
<div class="item">
<div class="feature">
Your feature one
</div> <!--/ End feature One -->
</div> <!--/ End item One -->
<div class="item">
<div class="feature">
Your feature two
</div> <!--/ End feature two -->
</div> <!--/ End item Two -->
<div class="item">
<div class="feature">
Your feature three
</div> <!--/ End feature three -->
</div> <!--/ End item Three -->
</div>Use below sample code to create feature block as shown in demo.
<div class="full">
<div class="item">
<div class="feature">
<p><img src="/images/demo-images/icons/feature/feature1.svg" alt="feature icon"></p>
<h3>Modern Design</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum possimus veritatis inventore.</p>
</div><!-- /feature -->
</div><!-- /item -->
<div class="item">
<div class="feature">
<p><img src="/images/demo-images/icons/feature/feature2.svg" alt="feature icon"></p>
<h3>Clean Codes</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum possimus veritatis inventore.</p>
</div><!-- /feature -->
</div><!-- /item -->
<div class="item">
<div class="feature">
<p><img src="/images/demo-images/icons/feature/feature3.svg" alt="feature icon"></p>
<h3>Easy Interface</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum possimus veritatis inventore.</p>
</div><!-- /feature -->
</div><!-- /item -->
</div>
<div class="full">
<div class="item">
<div class="feature">
<p><img src="/images/demo-images/icons/feature/feature4.svg" alt="feature icon"></p>
<h3>Expert Team</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum possimus veritatis inventore.</p>
</div><!-- /feature -->
</div><!-- /item -->
<div class="item">
<div class="feature">
<p><img src="/images/demo-images/icons/feature/feature5.svg" alt="feature icon"></p>
<h3>Fast Support</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum possimus veritatis inventore.</p>
</div><!-- /feature -->
</div><!-- /item -->
<div class="item">
<div class="feature">
<p><img src="/images/demo-images/icons/feature/feature6.svg" alt="feature icon"></p>
<h3>Super Responsive</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum possimus veritatis inventore.</p>
</div><!-- /feature -->
</div><!-- /item -->
</div>Edit above code to change feature icon, feature name and description.
How to change feature icon
you can use any image or font icons. Following font icons are included in Vani theme.