Gradient Block:

This section consist of a title with gradient line, content and a full width gradient button with link.


Available Options:

  • Gradient Block with number of columns.

Gradient Block with number of columns:

Output:

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:


<div class="darkout-section">
{% include do-gradient-block.html tag="module" columns=3 %}
</div>


How to add content:

  • Step1: Navigate to the data file for gradient block in _data > do-gradient-block.yml
  • Step2: Add content to the data file as shown in the below example.
- tags: module  # Use gradient-block tag here
  block:
    - title: Title  # Use gradient-block title here
      content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  # Use gradient-block content here
      href-text: Read More  # Use gradient-block button-text here
      href: "#"  # Use gradient-block url here
      gradient: green  # Use green, purple, blue, yellow, pink as gradient-block gdadient color here
  • Step3: In the data file tags is a mandatory value. Without using tags gradient block will not be displayed.

How to add in page:

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

<div class="darkout-section">{% include do-gradient-block.html tag="module" columns=3 %}</div>

  • Attributes:
    • Tag:
      • Tag is a mandatory attribute without using tag gradient block will not be displayed. (Mandatory)
    • Columns: Use number of columns here.
      • 2, 3, 4 and 6 columns. 3 columns is the default options.
    • Class:
      • Use additional class here as include variable.