HTML Quick Links

‘Quick Links’ is how we refer to our range of pre-built HTML buttons with icons which are at your disposal. These are available as default on any intranet built from 2022 onwards on the homepage titled ‘Widget HTML’, and they are used via the HTML Widget.
If you do not think your intranet has these links built-in, please raise this with your Onboarding Manager, Designer or via Support.
See the examples below (color, font and radius will be theme-dependent):

How do I add these buttons into my widget?

As a Power User, add a new widget to your homepage and select the “HTML Widget” option. Once on the ‘Configuration’ panel, select the “Source” option within the editing panel and paste the below code before hitting “Save”:

<ul class="quick-links-hp l2">
<li><a class="quick-link has-icon fa-icon" href="https://example.com" target="_blank"><i aria-hidden="true" class="fa fa-user-circle-o"></i>Link Name </a></li>
<li><a class="quick-link has-icon fa-icon" href="https://example.com" target="_blank"><i aria-hidden="true" class="fa fa-file-text-o"></i>Link Name </a></li>
<li><a class="quick-link has-icon fa-icon" href="https://example.com" target="_blank"><i aria-hidden="true" class="fa fa-check"></i>Link Name </a></li>
<li><a class="quick-link has-icon fa-icon" href="https://example.com" target="_blank"><i aria-hidden="true" class="fa fa-credit-card"></i>Link Name </a></li>
</ul>

To change each button’s icon and text, please the section below: Change the text and icon for an individual button

Variations available:

You can choose the colour, text alignment, layout (horizontal vs vertical), and shape (slimline or square) of your buttons.

Colours

There are several variations you can achieve by adding more terminology onto the ul class name – inside the speech marks.

By default, your class name must begin with “quick-links-hp l2” – which produces slimline buttons that will flow horizontally and be in the same color as the theme’s default button color.

Each theme has a primary, secondary, and tertiary brand color declared (so the buttons should already be one of these)…but to set the color of these buttons specifically, you can add is-primary, is-secondary or is-tertiary on to the ul class name. You can also add is-solid onto the ul class to reverse the colors chosen so that they appear as outlined with a solid white background (this is the hover state ordinarily, so it essentially reverses the behaviour).

If for example, the theme colours were blue (primary), green (secondary) and purple (tertiary) – the following classes would give you horizontal purple-outlined buttons with a white background:

<ul class="quick-links-hp l2 is-tertiary is-solid">

Text Alignment:

It’s also possible to center align the text and icon, by adding is-centered onto the <ul> class, as follows:

<ul class="quick-links-hp l2 is-tertiary is-solid is-centered">

Vertical layout:

Depending on the layout of your page, you may want to stack your quick link buttons vertically, to do so, it is simply a matter of adding is-vertical onto the class name.
Following the theme example above, the following <ul> class would result in blue-outlined buttons in a vertical layout:

<ul class="quick-links-hp l2 is-primary is-solid is-vertical">

Square (instead of slimline):

Finally, if a more square shape is required because you are utilising a deeper widget size in the grid layout – you can add to the ul class: is-square.
Following the same theme example the following <ul> class would result in green-block squares:
(These are block colours as there is no is-solid class on this example)

<ul class="quick-links-hp l2 is-secondary is-square">

These buttons styles are all controlled via the Theme but can also potentially be tweaked to look different to the other buttons across your site. For example, changing the font, color, border-width and such – however we do recommend keeping them on-brand with the rest of your theme for consistency.

The styles in a theme can only be edited by Interact, therefore if you would like to change the default styles of these quick links, it would need to be implemented by us. One example of such an edit may be to ask for the quick link buttons to cycle through the theme brand colours – rather than to all be the same. We have the code ready to add this for you, and is achieved by adding ‘is-multicolor’ onto the same <ul> class, once the styles have been added.

Removing the icons to have text-only links is an option in the HTML codetoo. This is done within the indiviudal <li> items themselves. Simply remove the classes ‘has-icon‘ and ‘fa-icon‘ on the <a> class, and everything start from the <i> tag, ending in </i> – basically, the parts in bold from this generic example here:

<li><a class="quick-link has-icon fa-icon" href="https://example.com" target="_blank"><i aria-hidden="true" class="fa fa-user-circle-o"></i>Link Name </a></li>

Another way you may wish to modify these, is to replace the font awesome icons with your own icon imagery uploaded into the Media Manager – this is something that would again need facilitating by Interact and demonstrating by us so that you can maintain these without our support going forward.

Finally, to add or delete more buttons in your list, you can remove an entire <li> item – or copy and paste one of the <li> to add duplicate another item before changing the values. If you just wish to have one singular button, you would need to replace “l2” with “l1” inside the <ul> class name.

Change the text and icon for an individual button:

For each individual button link item, you are able to edit the following for each:

• The icon
• The URL/hyperlink
• The text

Once within the Configuration tab of your HTML Widget, select the “Source” to see these within editor panel – see below.

Once in the source code, you can begin to edit the links:

• The first highlighted section “https://google.com” is the URL to which the link will go. Replace this with your desired URL.

• The icons here are pulled from a font library called “Font Awesome”, which you can browse here: fontawesome.com/v4/icons. Once you have selected your icon, copy the icon title including the (fa-) and replace it in the code . In the example above, we are using “fa-book” for a book icon, but some other examples are “fa-chrome” for a Chrome icon, “fa-check” for a checkmark etc. This class should also contain “fa” by itself followed by a space first – this means for a book icon, the full class needs to be “fa fa-book”.

• The final highlighted section in the example which reads “What’s on the menu?” is the text shown on your link. Replace this with your desired text.