Usage
When to use
- To navigate to a new destination, either internally or externally.
- Within a block of body text or other text element.
When not to use
- As a standalone element, consider Standalone Link.
- To trigger an action or event, like a form submission, consider Button.
Color
Primary
We recommend using the primary variant as the default and for more important links.
Secondary
Use the secondary variant for less important links or when the primary link can’t be used.
Don’t mix primary and secondary links within a block of text or adjacent blocks of text. This can lead to confusion about the hierarchy of the links and their relative importance.
Icon position
An Inline Link can include a leading or a trailing icon. Avoid links with both.
Trailing
In most cases, use trailing icons as this breaks up the text less and has a smaller impact on the readability of the link within a block of text.
Lorem ipsum
Leading
Use a leading icon when using service icons (e.g., GitLab).
Edit this page on
Display sizes
We don't recommend using links within Display sizes as these are generally reserved for titles and headlines.
An Inline Link inside Display text inherits the surrounding font size and weight. We do not publish link styles for Display sizes at this time.
Highlight actions paired with a Display headline using the Standalone Link and associate it with the headline in the layout.
An Inline Link renders an HTML anchor element <a> that points to a URL, set with the href attribute.
The Inline Link inherits the typographic styles of the text around it (font, weight, etc), while the color is determined by the color attribute.
How to use this component
The most basic invocation requires some content to be passed inside the tag and an href attribute.
Lorem
<p>Lorem <i80-link-inline href="https://design.i80.dk/">ipsum dolor</i80-link-inline> sit amet consectetur adipiscing elit.</p>Color
There are two available colors for an Inline Link: primary and secondary. The default is primary.
Lorem
<p>Lorem <i80-link-inline color="secondary" href="https://design.i80.dk/">ipsum dolor</i80-link-inline> sit amet consectetur adipiscing elit.</p>Icon
To add an icon to the Inline Link, give the icon attribute any icon name.
<i80-link-inline> does not have an intrinsic size. Instead, the size of the icon is calculated proportionally (via em) in relation to the font-size of the text.
Lorem
<p>Lorem <i80-link-inline icon="external-link" href="https://design.i80.dk/">ipsum dolor</i80-link-inline> sit amet consectetur adipiscing elit.</p>Icon position
By default, if you define an icon, it‘s placed in the trailing (end) position. If you would like to position the icon in the leading (start) position, define icon-position.
Lorem
<p>Lorem <i80-link-inline icon="external-link" icon-position="leading" href="https://design.i80.dk/">ipsum dolor</i80-link-inline> sit amet consectetur adipiscing elit.</p>External links
To generate an <a> link, set href to a URL. href on its own makes an ordinary link; add the external attribute when the link should open in a new tab, which applies the target="_blank" and rel="noopener noreferrer" attributes to the <a> element.
Lorem
<p>Lorem <i80-link-inline icon="external-link" href="https://i80.dk">ipsum dolor</i80-link-inline> sit amet consectetur adipiscing elit.</p>Attributes
<i80-link-inline> renders this component. Everything it understands:
| Attribute | Values | Default | Notes |
|---|---|---|---|
href, external |
|||
color |
primary · secondary | primary |
|
icon, icon-position |
standalone: arrow-right, leading · inline: trailing |
||
size (standalone) |
small · medium · large | medium |
The tag keeps any native element you write inside it, so a server-rendered form, link or button works as it is. See Web Components for loading i80.js and the reference for these examples running.
Anatomy
| Element | Usage |
|---|---|
| Leading Icon | Optional |
| Text | Not an attribute, but required; it is the text you write inside the tag. |
| Trailing Icon | Optional |
States
Primary
Secondary
General recommendations
Highlight the most relevant word or short phrase as it relates to the target of the link. For example:
Learn more about deploying a Vault Cluster on HCP in the
Don’t wrap an entire sentence or text block in a link.
Conformance rating
When used as recommended, there should not be any WCAG conformance issues with this component.
Best Practices
Annotations in design
Include annotations of the non-visual experience in your handoff notes. For example:
Applicable WCAG Success Criteria
This section is for reference only. This component intends to conform to the following WCAG Success Criteria:
-
1.3.1
Info and Relationships (Level A):
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. -
1.4.1
Use of Color (Level A):
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. -
2.1.1
Keyboard (Level A):
All functionality of the content is operable through a keyboard interface. -
2.4.7
Focus Visible (Level AA):
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Support
If any accessibility issues have been found within this component, let us know by submitting an issue.
0.1.0
Første i80-version (fork af upstream, se core/UPSTREAM.md).
