Links Component

This component is suitable for use when creating accessible courses.

The Links component lets you link to relevant external materials or allow learners to jump quickly to a piece of content elsewhere in an Evolve course.

This article provides an overview of the Links component, component setup and behavior, and examples of Links component configurations.

Component overview

The Links component is an interactive component and the actual link can be displayed as an image, text, or button.

The Links component is flexible and could be set up to open in a new window or set up to be completed either when the Links component comes in view on the page or when the component link is clicked.

Component set up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section:

Add Title, or a Display Title, as needed. Display Title is seen by learners.

Scroll down and add your Body. Use the text editor to style and format your text, as needed.

1. Add Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label.

The Interaction Label allows you to add a widget before or after the Links component. This widget can display an icon and label prior to the Links component completion, which changes to a different icon and label once the Links component is completed.

Appearance section

In the Appearance section, you set Columns by device size, as needed. By default, the Links component is set to 1 column for desktops, tablets, and smartphones.

Behavior section

In the Behavior section, you Set completion status on either Inview or Click. By default, the Links component is set to completion status on Inview.

Animation section

In the Animations section, you set what animations to run when the Links component first comes into view on the page. Toggle to enable specific animation settings.

Add Link Items

In the Items section, you add Items to your Links component.

For Link Items displaying an image:

Toggle Image Link if your link should display an image. Select Link Image and Set Image Per Device Size, as needed. Select Disabled Link Image to be displayed if the link is disabled. Set Image Per Device Size for the selected Disabled Link Image, as needed, and enter Link Image Alt Text.

For All Link Items:

Add Link Title and Link Body. Use the text editor to style and format your text, as needed.

Note: A Link Title is only available for Link items displayed as text or a button.

Set Link Target. That is where the link will open. Select New window, Same window, or Parent iframe from the drop-down list.

1. Toggle Should close the window as needed.
2. Toggle Internal link if the link is somewhere inside your course. Select Link Type.
3. Toggle to Enable item on components completion and Select components to watch.

Enter the Link item Url and toggle to Display as button. Set the Link Item Position relative to the Body text. Select Left, Top, Right, or Bottom. By default, the position is set to Top. Set Link Item Alignment.

Add, Duplicate, or Delete Items as needed.

Component Examples

The Links component gives you a lot of flexibility. Below are examples that illustrate different Link component setups:

1. Example 1 – Link component with internal link. Link item position set to the right.
2. Example 2 – Link component with image link. Link item position set to left.
3. Example 3 – Link component with link displayed as a button. Link item position set to bottom.

Note: Internal link items can be displayed as text, an image, or a button.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.