Info Block:

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


Available Options:

  • Info block center aligned.
  • Info block left aligned.
  • Info block right aligned.
  • Info block with number of columns.

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:

  • Step1: Navigate to the data file for info block in _data > do-info-block.yml
  • Step2: Add content to the data file as shown in the below example.
- 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
  • Step3: In the data file tags is a mandatory value. Without using tags info block will not be displayed.

How to add in page:

  • Step1: Add info block to the page using the include statement.
  • Step2: On the page use

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

  • Attributes:
    • Tag:
      • Tag is a mandatory attribute without using tag Info-Block will not be displayed. (Mandatory)
    • Content-alignment:
      • center.
    • Class:
      • Additional class can be used here.

Info block left aligned:

  • This is the default alignment option for the info block.

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:

  • Step1: Navigate to the data file for info block in _data > do-info-block.yml
  • Step2: Add content to the data file as shown in the below example.
- 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
  • Step3: In the data file tags is a mandatory value. Without using tags info block will not be displayed.

How to add in page:

  • Step1: Add info block to the page using the include statement.
  • Step2: On the page use

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

  • Attributes:
    • Tag:
      • Tag is a mandatory attribute without using tag Info-Block will not be displayed. (Mandatory)
    • Content-alignment:
      • left.
    • Class:
      • Additional class can be used here.

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:

  • Step1: Navigate to the data file for info block in _data > do-info-block.yml
  • Step2: Add content to the data file as shown in the below example.
- 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
  • Step3: In the data file tags is a mandatory value. Without using tags info block will not be displayed.

How to add in page:

  • Step1: Add info block to the page using the include statement.
  • Step2: On the page use

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

  • Attributes:
    • Tag:
      • Tag is a mandatory attribute without using tag Info-Block will not be displayed. (Mandatory)
    • Content-alignment:
      • right.
    • Class:
      • Additional class can be used here.

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:

  • Step1: Navigate to the data file for info block in _data > do-info-block.yml
  • Step2: Add content to the data file as shown in the below example.
- 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
  • Step3: In the data file tags is a mandatory value. Without using tags info block will not be displayed.

How to add in page:

  • Step1: Add info block to the page using the include statement.
  • Step2: On the page use

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

  • Attributes:
    • Tag:
      • Tag is a mandatory attribute without using tag Info-Block will not be displayed. (Mandatory)
    • Laptop: Specify the number of columns for laptop devices here.
      • 2, 3, 4 and 6 columns. 3 is the default option.
    • Tablet: Specify the number of columns for tablet devices here.
      • 2, 3 and 4 columns. 2 is the default option.
    • Mobile: Specify the number of columns for mobile devices here.
      • 1 and 2 columns. 1 is the default option.
    • Class:
      • Additional class can be used here.