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.
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.
The recommended length is between 4 and 12 words, not exceeding 50 characters in total.
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.
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
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.
To see examples visit Storybook
<p>Some text with a caveat <a href="#caveat">1</a></p><ns-caveat><h2 slot="heading">Legal information</h2><div slot="caveat"><ol><li>...</li></ol></div></ns-caveat>
Does it live in a panel?
Does it live inside other components?
What layout classes can be used?
Currently alert is in alpha
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