How To
-
1
Insert the Quick Links Component
- On Landing Pages or Site Pages, first insert a Band.
- Select the Add Component button.
- Select Quick Links from the Choose Component dialogue box.
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)
- Internal Links- For links to pages on your website, you can:
- 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.
- URL (*) - Enter an address for the link. Options:
-
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.
AccordionTab/Accordion ItemsLeave the Class field blank to keep the default link style.
To style links as buttons:
- Expand Attributes
- In the Class field, enter btn btn-primary
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:
- Expand Attributes
- In the Class field, enter more
- In the Title field, enter a descriptive title for screen readers. This title will also appear when the user hovers over the link.
Many web browsers automatically convert phone numbers so that the user can easily click-to-dial the number on a mobile device, but not all browsers do. Learn more about Clickable Phone Numbers.
To add a phone number as a URL:
- URL: Enter the phone number using this format: tel:+1-202-762-1401
- Link Text: Call (202) 762-1401
- Attributes: Leave empty for the default link style or enter btn btn-primary for the button style.
-
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
- Drag and Drop
-
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.