Link element

Use the Link element to add an <a> in the form of links and buttons to your layout. 

Locating the link element

To find the Link element:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. Within the Elements tab, look for the Link element.

The Link element includes the following fields:

Link and interaction

• Link text - Add the text for your link
• Title attribute - Add a title attribute for your link
• Type - Select the type of link
  • Internal page - Link to an internal page
    • Link to page - Type the name of the internal page you are linking to.
  • URL - Link to a URL
    • URL - Enter the full URL of an external web page.
  • Anchor - Link to a page Anchor
    • Anchor - Enter an Anchor ID. You do not need to include the #.
  • Back to top - Add a smooth scroll back to the top of the page
  • Scroll to - Add a smooth scroll to a jQuery selector
    • Scroll target - Enter a jQuery selector to target an element to scroll to.
    •  Scroll duration - Enter the time it will take for the scroll to complete in milliseconds.
    • Offset type
      • Offset against element - Offset the top of completed scroll position by the height of an element. Target the element using a jQuery selector.
      • Offset in PX - Offset the top of completed scroll position in pixels.
  • Modifier - Toggle, add or remove a modifier class on an element using on-click. For more information, see Add on-click interactivity to elements
• Open modal - Link to open a modal
  • Trigger ID - Enter the ID of the modal trigger, this is the ID of this element
    Adding a trigger ID will allow for the focus will return to the body when the modal closes. 
  • Modal ID - Enter the ID of the modal to open
• Target window - Select the target window for the link. 

Custom style

• Link style - Apply a Link custom style. For more information, see Creating custom styles.

Match heights

• Match heights - Match the height of the element using:
  • None - Removes the match heights at the specific breakpoint
  • Class - Match the height of the element with another element with the same class name
  • Children with class - Match the heights of any child elements with the same class name
  • Child element - Match the heights of all child elements of the same type.

For more information on Match heights, see Match the heights of elements.

Comments

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.