Widget Navigation:

This section consist of a number of gradient buttons with links.

Available Options:

• Widget Navigation with number of buttons.

Widget Navigation with number of buttons:

Output:

Code:

<div class="darkout-section">
  {% include do-widget-nav.html tag="module" buttons=4 %}
</div>

How to add content:

• Step1: Navigate to the data file for widget navigation in _data > do-widget-nav.yml
• Step2: Add content to the data file as shown in the below example.

- tags: module  # Use carousel logo tag here
  buttons:
    - name: Button - 1  # Use button name here
      href: /#  # Use button url here
      gradient: green  # Use green, purple, blue, yellow, pink as gradient color here

• Step3: In the data file tags is a mandatory value. Without using tags widget navigation will not be displayed.

How to add in page:

• Step1: Add widget navigation to the page using the include statement.
• Step2: On the page use

<div class="darkout-section">{% include do-widget-nav.html tag="module" buttons=4 %}</div>

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