ns-caveat

Molecule | Caveat component.

Introduction

Caveats provide additional information and legal details to content.

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

Content guidance

Caveat - Link
Caveat

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 should 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. These should always be accompanied with a related description.

Best practice

💚 Do's

💔 Don'ts

Try to make the caveats positive

Use the caveat to hide information

Be transparent, if the legal details are short, add it to the content

Add images, iconography, etc.

Always have the legal caveats at the bottom of the page, before the footer

Try to change the font size of the caveats

Use an ordered list for the caveats

Only use text in the caveats

Embolden text that is important

Prepend the link with   so that it doesn't become widowed

Considerations of best practice

  • We highly recommend that there are no more than three caveats in a single piece of communication.

  • Link to additional information, if needed such as terms, but should always be accompanied with a related description.

Usage

To see examples visit Storybook

<p>Some text with a caveat&nbsp;<a href="#caveat">1</a></p>
<ns-caveat>
<h2 slot="heading">Legal information</h2>
<div slot="caveat">
<ol>
<li>
...
</li>
</ol>
</div>
</ns-caveat>

Component relationship

Relationship

Does it live in a panel?

❌ No

Does it live inside other components?

❌ No

What layout classes can be used?

None

Specification

Attribute

Type

Default

Options

Description

type

string

standard

alert, standard

Currently alert is in alpha

Slots

Type

heading

h tag

Anonymous

ol list tag

Feedback

  • Do you have insights or concerns to share? You can raise an issue via Github bugs.

  • See all the issues already raised via Github issues.

💩 🎉 🦄 You can also contact the team on Slack on the #product-nucleus channel!

Related links