Back to the pattern library

Links

A link should be descriptive of the place it’s taking the user. For example: “Start making your will”.

Example

Example

HTML

<p><a href="#">Start making your will</a></p>

SCSS

The styles for this pattern can be found in the foundations on github.

JS

There is no javascript needed for this component.

Design and content

A link should always be displayed as above unless it's used on a background colour.

Links that are in context, for example within a header or footer — can be styled differently.

Accessibility

A link should be descriptive of the place it's taking the user. Find out how we write link text.

For more information see our general guide on accessibility.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change