Styles
Links
Link to pages within your service or to external resources.
Contents
Links are blue and underlined by default.
If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.
HTML
<p>Jump to <a href="#">HTML example</a>.</p>Colours
Link colours on different background types and in different themes have been included in TNA Frontend. Sometimes black or white links are used. See some examples of how colours should be used in National Archive services.
Black or white links can be used for components that appear on every page such as breadcrumbs and the footer because users will be familiar with links in these locations.
White links can be used in dark areas where the default colour would not provide sufficient contrast.
Visited links
Visited links should be purple. This helps users understand what content they have already viewed.
Having styles for visited links can be useful in exploratory services if the user wants to avoid landing on the same page twice.
For links within services such as documentation sites, you may not wish to have the purple visited state. The user may not care if they have already visited a page before and might want to keep visiting the same page multiple times.
Disable the visited style be adding a tna-link--no-visited-state class to your links:
HTML
<p>Jump to <a href="#" class="tna-link--no-visited-state">HTML example</a>.</p>Links in headings
Links within heading elements have an arrow added after them.
HTML
<h3 class="tna-heading-m">
<a href="#">The 20th Century (1900–1999)</a>
</h3>Opening links in new tabs
Follow the advice from GOV.UK on opening links in a new tab.
Avoid opening links in a new tab unless not doing so would detriment the user’s experience.
If you need to open a link in a new tab, use the text "(opens in new tab)". Do not use any icons to denote that clicking on the link will open it in a new tab.