ns-caveat
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#
| 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 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 | |
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#
Component placement#
The ns-caveat component can only be used as a child of the <main> element
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 , p 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.
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.