Info Block:

This section is used to display number of columns of content with icon, title and description.


Available Options:


Info block center aligned:

Output:

Based on Bootstrap 4.x

Jekyll theme is built the latest version of Bootstrap, Easy to customise and make it yours.

100% Responsive

Darkout theme is built on responsive CSS. Your website will look amazing on all devices from large to small.

Easy Content Updation

We have applied various strategy to separate content from code, making it easy for you to manage universal content.

Code:


<div class="darkout-section">
{% include do-info-block.html tag="samples" content-alignment="center" %}
</div>


How to add content:

- icon: <img src="/assets/images/icons/white/bootstrap.svg">  # Use icon here
  title: Based on Bootstrap 4.x  # Use icon block title here
  description: Jekyll theme is built the latest version of Bootstrap, Easy to customise and make it yours.  # Use description for icon block
  tags: samples  # Use info-block tag name here

How to add in page:

<div class="darkout-section">{% include do-info-block.html tag="samples" content-alignment="center" %}</div>


Info block left aligned:

Output:

Based on Bootstrap 4.x

Jekyll theme is built the latest version of Bootstrap, Easy to customise and make it yours.

100% Responsive

Darkout theme is built on responsive CSS. Your website will look amazing on all devices from large to small.

Easy Content Updation

We have applied various strategy to separate content from code, making it easy for you to manage universal content.

Code:


<div class="darkout-section">
{% include do-info-block.html tag="samples" content-alignment="left" %}
</div>


How to add content:

- icon: <img src="/assets/images/icons/white/bootstrap.svg">  # Use icon here
  title: Based on Bootstrap 4.x  # Use icon block title here
  description: Jekyll theme is built the latest version of Bootstrap, Easy to customise and make it yours.  # Use description for icon block
  tags: samples  # Use info-block tag name here

How to add in page:

<div class="darkout-section">{% include do-info-block.html tag="samples" content-alignment="left" %}</div>


Info block right aligned:

Output:

Based on Bootstrap 4.x

Jekyll theme is built the latest version of Bootstrap, Easy to customise and make it yours.

100% Responsive

Darkout theme is built on responsive CSS. Your website will look amazing on all devices from large to small.

Easy Content Updation

We have applied various strategy to separate content from code, making it easy for you to manage universal content.

Code:


<div class="darkout-section">
{% include do-info-block.html tag="samples" content-alignment="right" %}
</div>


How to add content:

- icon: <img src="/assets/images/icons/white/bootstrap.svg">  # Use icon here
  title: Based on Bootstrap 4.x  # Use icon block title here
  description: Jekyll theme is built the latest version of Bootstrap, Easy to customise and make it yours.  # Use description for icon block
  tags: samples  # Use info-block tag name here

How to add in page:

<div class="darkout-section">{% include do-info-block.html tag="samples" content-alignment="right" %}</div>


Info block with number of columns:

Output:

Based on Bootstrap 4.x

Jekyll theme is built the latest version of Bootstrap, Easy to customise and make it yours.

100% Responsive

Darkout theme is built on responsive CSS. Your website will look amazing on all devices from large to small.

Easy Content Updation

We have applied various strategy to separate content from code, making it easy for you to manage universal content.

Code:


<div class="darkout-section">
{% include do-info-block.html tag="samples" laptop= 3 tablet= 3 mobile= 2 %}
</div>


How to add content:

- icon: <img src="/assets/images/icons/white/bootstrap.svg">  # Use icon here
  title: Based on Bootstrap 4.x  # Use icon block title here
  description: Jekyll theme is built the latest version of Bootstrap, Easy to customise and make it yours.  # Use description for icon block
  tags: samples  # Use info-block tag name here

How to add in page:

<div class="darkout-section">{% include do-info-block.html tag="samples" laptop= 3 tablet= 3 mobile= 2 %}</div>