Button Variants

List of Button variants
Primary
Large
Medium
Small
With icon
Primary: Small
Secondary
Large
Medium
Small
With icon
Primary: Small
Tertiary
Large
Medium
Small
With icon
Primary: Small
Tertiary (inverted)
Large
Medium
Small
With icon
Primary: Small
Service
Large
Medium
Small
No icon
Primary: Small

Multi-button Widget

List of Multi-button Widgets
Standard
Large
Medium
Small
With icon
icon only
Services
Button 1
Button 2
Button 3
Button 4

How to Guide

List of Multi-button Widgets
Configuration Widget
Link (internal)

  1. Hover over the widget and click the cog icon to open its settings.

  2. In the Type dropdown, select Link.

  3. Use the Size, Label, Variant, and Icon fields to configure the widget's appearance.

  4. In the Link Url input field, click the Select button to toggle the page selector.

  5. Navigate to the desired page directory in the navigation menu, select the relevant page and click select button.

  6. Make sure the "Is this an external link?" checkbox is unchecked.

  7. Click Apply to save the widget settings.

  8. If the widget displays as expected, save the page.
Internal
Link (external)

  1. Hover over the widget and click the cog icon to open its settings.

  2. In the Type dropdown, select Link.

  3. Use the Size, Label, Variant, and Icon fields to configure the widget's appearance.

  4. In the Link Url input field, click the Select button to toggle the page selector.

  5. Make sure the "Is this an external link?" checkbox is checked (this opens the link in a new tab).

  6. Click Apply to save the widget settings.

  7. If the widget displays as expected, save the page.
External
Download

  1. Hover over the widget and click the cog icon to open its settings.

  2. In the Type dropdown, select Download.

  3. Use the Size, Label, Variant, and Icon fields to configure the widget's appearance.

  4. In the Download file input field, click the Select existing content item button to toggle the content selector OR select the Create new button to create a new media content item.

  5. Click Apply to save the widget settings.

  6. If the widget displays as expected, save the page.

Download

Action

  1. Hover over the widget and click the cog icon to open its settings.

  2. In the Type dropdown, select Action.

  3. Use the Size, Label, Variant, and Icon to configure the widget's appearance.

  4. In the Modal Identifier field, enter the unique ID of the modal widget that this button should trigger. You can find this ID in the Modal Identifier field of the corresponding Modal Section. This links the button to the correct modal, allowing it to toggle that modal when clicked.

  5. Click Apply to save the widget settings.

  6. If the widget displays as expected, save the page.
Get a free water assessment
Get a free water assessment
Get a free water assessment