Overview

Caveats provide additional information and legal details to content.

Summarise it!

✨ This is an auto-generated AI summary of the ns-caveat's documentation. It may not be accurate. ✨

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

Examples

Standard

Configure

Link

Guidance

Do

• Try to make the caveats positive.
• Be transparent – if the legal details are short then add them 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	Clicking the caveat link will navigate to <ns-caveat> at the bottom of the page.
B	Heading	The recommended length is between 4 and 12 words, not exceeding 50 characters in total.
C	Anonymous slot	An ordered list <ol> is recommended to associate the number used in the caveat link. A paragraph <p> is for generic fine print and legal information.

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 related to the additional information.
caveat	<ol> <p>	The additional information in an unordered list or paragraphs.

Figma

Please note: The ns-caveat Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Configuration instructions

(Opens in Figma).