Skip to main content



The ns-standout component's purpose is to draw attention to important information that the user will need to know.

Use the ns-standout component to make information stand out from a page and to visually differentiate a concise block of text from the content that surrounds it, for example:

  • Quotes (as in prices)
  • Call-outs
  • Examples
  • Additional information about the page
  • Emergency information


The component is not announced to screen readers to help differentiate it from ns-highlighter messages. You can choose from different coloured borders, but the text and background retain the standard colours, therefore, meeting suitable contrast ratios.

Content guidance#

Standout diagram

KeyField typeGuidelines
ADecorationYou can choose between green-light, blue, cyan, yellow or red 'decoration' which use the gradient colour palette.
BContentYou can populate the content using HTML, such as headings, paragraphs, lists, and text links as required.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Keep concise and to the pointFill with many paragraphs
Limit use to 1 or 2 per pageOveruse it everywhere - it dilutes the impact
Use it to make information stand outUse it in place of ns-highlighter or ns-card โ€“ they have a different purpose
Select a colour border decoration that works with your designAdd icons, images or illustrations
Use a relevant, single text link if it is necessaryUse the direct ns-cta (you should consider using ns-card instead for that purpose)
Use without an h2-h6Nest another ns-standout component within it
Use without a linkUse in a form where helper text is more appropriate
Ensure the information is relevant and important enough to stand out from the rest of the contentUse for warning or error messages


View example on Storybook

Component placement#

The ns-standout component can be used in the following components:


decorationstringcyangreen-light, blue, cyan, yellow, redGradient colours on border
anonymousns-content, ns-column

Specification notes#


  • Can only accept a single ns-content

Design Tokens

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

Read more about design tokens in our getting started guide.

  "decorations": [
  "border-color": "#FFFFFF"


  • 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 us on MS Teams on the Nucleus Design Systems / Engineering support channel!