Skip to main content

ns-standout

Introduction#

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

Accessibility#

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

Usage#

View example on Storybook

Component placement#

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

Specification#

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

Specification notes#

Anonymous#

  • 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": [
    "green-light",
    "blue",
    "cyan",
    "yellow",
    "red"
  ],
  "border-color": "#FFFFFF"
}

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