Overview

Caveats provide additional information and legal details to content.

Caveats link to content on the page, providing more information about legality and eligibility by separating it to the bottom of the page.

Examples

Configure

Guidance

Do

• Try to make the caveats positive.
• Be transparent, if the legal details are short, add it to the content.
• Always have the legal caveats at the bottom of the page, before the footer.
• Use an ordered list for the caveats that are linked in the page.
• Use a <p> tag for the caveats that relate to the page or journey in general.
• Only use text in the caveats.
• Embolden text that is important.

Don't

• Use the caveat to hide information.
• Add images, iconography, etc.
• Try to change the font size of the caveats.

Standard

Key

Key	Field type	Guidelines
A	Link	The link used to highlight there is further relevant information the user should read. This might provide specific stipulations, conditions, or limitations. Clicking on this will take the user to the content at the bottom of the page.
B	Heading	The recommended length is between 4 and 12 words, not exceeding 50 characters in total.
C	Content	A single, short paragraph works best. You can link to additional information if needed, such as terms and conditions. These should always be accompanied with a related description.

Implementation

Placement

The ns-caveat component can only be used as a child of the <main> element.

Specification

Attributes

id

Property

id

Type

string

Default

caveat

type

Property

type

Type

string

Default

standard

Slots

Slot	Permitted tags	Description
heading		The heading of the caveat.
Anonymous slot	<ol> <p>	Anonymous slot for content, expected to be a list of paragraph.