Link
Introduction
Natura11y styles links with visible hover and focus states.
Standalone Links
Paragraph links are styled automatically. Use .link for standalone links outside paragraph text.
Figure 1 shows a standalone link with the .link class.
HTML
<a class="link" href="#1"> Standalone link</a>Text and Icon Links
To add an icon to a .link, include an icon element inside the link.
Use .link__text for the visible link text, then add an icon element with the appropriate icon classes.
HTML
<a class="link" href="#1"> <span class="link__text">Label</span> <span class="icon icon-arrow-right" aria-hidden="true"></span></a>Skip Links
Skip links help keyboard users jump to important page sections. They stay hidden until they receive keyboard focus.
HTML
<body> <div class="skip-links"> <a href="#main"> Jump to main content </a>
<a href="#global-footer"> Jump to website footer </a> </div>
...</body>
