Skip to main content

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#

Caveat - Link

Caveat

KeyField typeGuidelines
ALinkThe 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.
BHeadingThe recommended length is between 4 and 12 words, not exceeding 50 characters in total.
CContentA 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 positiveUse the caveat to hide information
Be transparent, if the legal details are short, add it to the contentAdd images, iconography, etc.
Always have the legal caveats at the bottom of the page, before the footerTry 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 &nbsp; 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#

View example on Storybook

Component placement#

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

Specification#

AttributeTypeDefaultOptionsDescription
typestringstandardalert, standardCurrently alert is in alpha
SlotsType
headingh tag
Anonymousol list tag , p tag

Design Tokens

You can change the branded look and feel of the ns-caveat by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "typography": "p-caption",
  "heading": {
    "typography": "heading-6"
  },
  "theme": "grey-light",
  "ol-li-color": "#003C71",
  "alert": {
    "typography": "p-caption",
    "heading": {
      "typography": "heading-4"
    }
  },
  "link": {
    "background-color": "#005EB8",
    "color": "#FFFFFF",
    "typography": "p-caption"
  }
}

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#