Quick Links

The Quick Links component allows authors to create and display a list of links on a page. Authors can adjust text alignment, choose whether to include borders, and control border placement, as well as manage spacing above and below the component. It is designed to integrate with the Text with Callout component, floating neatly to the side of accompanying text. This component is useful when you need to present a compact, customizable set of links alongside descriptive content.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Content Options

Each link has four content options:

Text: This is the visible text that will appear as the clickable link on the page.
Link: This is the URL or path the link will navigate to when clicked. It can point to external websites, internal pages, or files.
Anchor: This is an optional field used to target a specific section on a page. It works by adding an anchor ID (e.g., “#my-section-id”) that corresponds to an element on the linked page. This is useful for navigating to a specific spot within a page.
Target: This defines how the link will open when clicked.

Layout and Styling Options

The placement (left or right) and width of the Quick Links component are controlled by the parent container, typically the Text with Callout component. These settings are managed under the “Callout Options” tab of the parent container, where you can specify alignment (e.g., left or right) and width (e.g., undefined, small, medium, large, or x-large).

Text Align

These quick links are aligned to the Left.

These quick links are aligned to the Center.

These quick links are aligned to the Right.

These quick links are aligned to Inherit. This means the links will align to whatever their parent container is set to align to, usually left.

Border

These quick links have a border to the Left.

These quick links have a border to the Right.

These quick links have a border set to None.

Bottom Margin

Link 1

These quick links have a bottom margin set to None.

Link 1

These quick links have a bottom margin set to X-Small.

Link 1

These quick links have a bottom margin set to Small.

Link 1

These quick links have a bottom margin set to Medium.

Link 1

These quick links have a bottom margin set to Large.

Link 1

These quick links have a bottom margin set to X-Large.

the end

Top Margin

Link 1

These quick links have a top margin set to None.

Link 1

These quick links have a top margin set to X-Small.

Link 1

These quick links have a top margin set to Small.

Link 1

These quick links have a top margin set to Medium.

Link 1

These quick links have a top margin set to Large.

Link 1

These quick links have a top margin set to X-Large.