ns-standout
#
IntroductionThe 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
#
AccessibilityThe 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 guidanceKey | Field type | Guidelines |
---|---|---|
A | Decoration | You can choose between green-light, blue, cyan, yellow or red 'decoration' which use the gradient colour palette. |
B | Content | You 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 point | Fill with many paragraphs |
Limit use to 1 or 2 per page | Overuse it everywhere - it dilutes the impact |
Use it to make information stand out | Use it in place of ns-highlighter or ns-card โ they have a different purpose |
Select a colour border decoration that works with your design | Add icons, images or illustrations |
Use a relevant, single text link if it is necessary | Use the direct ns-cta (you should consider using ns-card instead for that purpose) |
Use without an h2-h6 | Nest another ns-standout component within it |
Use without a link | Use 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 content | Use for warning or error messages |
#
Usage#
Component placementThe ns-standout component can be used in the following components:
#
SpecificationAttribute | Type | Default | Options | Description |
---|---|---|---|---|
decoration | string | cyan | green-light , blue , cyan , yellow , red | Gradient colours on border |
Slots | Type |
---|---|
anonymous | ns-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",
"content": {
"spacer": {
"squash-court": "1rem",
"basketball-court": "1.25rem"
}
}
}
#
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!