Links

Links are blue and underlined by default. If your link is at the very end of a sentence, make sure that the full stop is not part of the linked text.

Open this Link: basic in a new tab

HTML:

<a href="#1">Text link</a>

Links can be made to look more like buttons by adding the classes used for styling buttons:

Open this Links with button styling in a new tab

HTML:

<a href="#1" class="button">Text link with button styling</a>

<a href="#2" class="button button--alt">Text link with alternate button style</a>

¶Grouping links

Links can be arranged in groups using the cluster layout. The following example is from the business ecosystem template:

Open this Grouping links using the cluster layout in a new tab

HTML:

<div class="l-cluster component--members__cta">
	<div>
		<p>Ways to get involved:</p>
		<a class="button button--alt" href="#1">Join</a>
		<a class="button button--alt" href="#2">Donate</a>
	</div>
</div>

¶Opening links in a new tab

Avoid opening links in a new tab or window. It can be disorienting for users and can cause accessibility problems for people unable to visually perceive that the new tab has opened.

If there is a definite need for a link to open in a new tab, include the words 'opens in new tab' within the link text. Include rel="noreferrer noopener" along with target="_blank" to reduce the risk of reverse tabnapping.

Open this A link which will open in a new tab in a new tab

HTML:

<a href="#1" rel="noreferrer noopener" target="_blank">Text link (opens in new tab)</a>