Highlighted Links

Introduction

Highlighted links are important links at the top of your page.

When to use

Use highlighted links when there are links you want to provide the user on this specific page.

Alternatives and related components

• Use CTA Content image link when there is only one important call to action.
• Use Grouped links when the links don’t have to be highlighted.

Anatomy

The highlighted links consist of:

1. Caption: To describe the meaning of the links e.g. “Featured links”
2. Links: To describe the specific link

(Interactive) states

For interactive states of the link, please look at the linked group.

Design properties

Typography

• Caption: Sans/md/700

Colors

• Caption: Grey/5

For link styling, please consult the Link component.

Structure

• Container: 40px top and bottom
• Label: padding 12px

Variant with theme hero

• Container: 70px top and 40 px bottom

Accessibility

[technical requirements]

Content Guidelines

• Users should be able to anticipate where they will go when they select a link.
• Links should be short and sweet, with a maximum of 2 words.
• Make links easy to scan.
• Make descriptive yet concise copy.

Best practices

Molestiae veniam consequatur fugiat beatae debitis nisi

Do's

Highlighted links should have:

• A clear order
• A descriptive but small label

Don'ts

Highlighted links should not have:

• Long sentences that are covering more than 2 lines

References