Quick Links

A paragraph component that provides a list of related links.
A Quick Links component as it appears to visitors.
A Quick Links component with a description, four links, and "more" CSS styling added to the last link. 

Summary

The Quick Links component offers a compact way to present a list of related links. Style links as buttons or keep the default hyperlink look. 

Audience

Site Managers can add Quick Links. Publishers can edit existing Quick Links blocks.

How To

  • 1

    Insert the Quick Links Component

    Quick Links can also be placed on other pages. For example, Quick Links may be placed within a Tab/Accordion of a How-To Content Type. The interface differs, but the steps are similar.

    • Select the caret to expand the menu options.
    • Choose the Add Quick Links paragraph component.  
  • 2

    Provide a Title, Heading Level and Description

    • Quick Links Title  - Enter a Title for the Quick Links component.  
    • Select a Heading Level for the Quick Links component. The default value is h3. Options include: None, h2, h3, h4, and h5. Learn about heading levels for digital accessibility.
    • Enter a description for the Quick Links component, if desired.
  • 3

    Add URLs and Link Text

    Fields with an asterisk (*) are required.

    • URL (*) - Enter an address for the link. Options:
      • Internal Links- For links to pages on your website, you can:
        • enter <front> to link to the Home page.
        • search for the page title to find and select it.
        • enter an internal path (such as /news/press-releases).
      • External Links- For links to pages on a different website, paste the full URL (Example: http://digitalcommons.nc.gov)
    • Link Text - Enter the text to display for the link.

    Add Another Item

    To add more links:

    • Click Add Another Item.
    • Repeat the process described above for each new item.
  • 4

    Customize Style Attributes

    You can customize the appearance of the Quick Links component using CSS attributes in the Class field for a link. Examples are provided below. 

    Accordion
    Tab/Accordion Items

    Leave the Class field blank to keep the default link style.

    Second Sidebar

    Quick Links Title

    Quick Links Description Field

    To style links as buttons:

    1. Expand Attributes
    2. In the Class field, enter btn btn-primary
    Second Sidebar

    Quick Links Title

    Quick Links Description Field

    When you add the more attribute to a link, it sends that link to the bottom of the Quick Links component, regardless of its row weight order. 

    To add a more link button:

    1. Expand Attributes
    2. In the Class field, enter more
    3. In the Title field, enter a descriptive title for screen readers. This title will also appear when the user hovers over the link. 
    Second Sidebar

    Quick Links Title

    Quick Links Description Field

  • 5

    Rearrange Quick Links

    You can change the order of the links in one of two ways:

    • Drag and Drop
      • Hover the mouse cursor over the Drag to Re-order icon.
      • Click-and-hold to drag the Quick Link entry up or down to the desired order.
      • Release the cursor in the desired order. 
         
    • Show Row Weights
      • Toggle the Show/Hide Row Weights button.
      • Assign a new weight number to the link as it relates to the weight numbers for other links.
        • Lower, lighter numbers "float" upwards. Example: -10 is lighter than -9
        • Higher, heavier numbers "sink" downward. Example 11 is heavier than 10
  • 6

    Remove Links

    You must provide at least one link in order to use the Quick Links component. The first entry cannot be deleted. To remove other links:

    • Select the Remove button for the link you wish to remove.
    • Save the page.
  • 7

    Save

    • Select the Save button to save the page and view results.