Photo by Julian Andres Carmona Serrato
Link
Introduction
Natura11y provides several default styles for links that you should be familiar with. Additionally, Natura11y introduces a .link selector for styling non-link elements, links with icons, and accessible skip links.
Like buttons, links feature distinct hover and focus states for keyboard users, ensuring accessibility and ease of navigation.
Links that are direct children of <p> tags are automatically colored, and underlined on hover, making in-paragraph links easily distinguishable for users.
The Link Selector
The .link utility class allows you to style elements that are not traditionally clickable as links. For example, you can apply the .link class to a <span> within an <a> tag to mimic the appearance of a standard link.
The example in Figure 1 below is a span tag with the .link class applied to it.
<a class="button" href="#1">
Button
</a>
<button class="button">
Button
</button>
Text and Icon Links
To add an icon to a .link, use the .link--has-icon modifier class (refer to Figure 2). Creating links with icons involves two child elements.
The first is a <span> containing the appropriate icon classes. The second is a <span> with the .link__text class, which encapsulates the link's text. The .link__text class also serves as the target for applying underline styling on :hover and :focus states.
<a class="link link--has-icon" href="#1">
<span class="link__text">Label</span>
<span class="icon icon-arrow-right" aria-hidden="true"></span>
</a>
Skip Links
Skip links are specially designed to assist keyboard users by providing a mechanism to quickly jump to main sections of a page. They remain hidden from view until they are focused upon by keyboard navigation.
<body>
<!-- Place skip links directly after the opening body tag to ensure they are the first elements focused by keyboard navigation. -->
<div class="skip-links">
<a href="#main">
Jump to main content
</a>
<a href="#global-footer">
Jump to website footer
</a>
</div>
...