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 upfront, to help differentiate it from ns-alert messages. It will be read in the order it comes in the document. 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 to change the border colour from the default cyan to any of the colour options defined in the specifications.
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-alert 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:


decorationdecorationstringcyancyan, lime, navy, blue, forest, slate, orange, red, yellowColour of border
anonymousns-content, ns-column

Specification notes#


  • Can only accept a single ns-content


  • 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.