Skip to main content

ns-highlighter

Introduction#

Highlighters can be used to communicate information or error, warning and success messages.

A component that communicates the message that a service is not available to them or that there are technical issues on specific pages only. These messages are different to global messages as they only apply to some pages not site wide.

e.g. a message that says the top up service is not available would only apply to pages that customers will look at in order to top up.

Accessibility#

The information contained in the highlighter should always be the most important information on the page. To ensure that screen reader users are informed about the importance of these messages the content is read aloud as soon as the highlighter is used. This could be when the page loads or when it is dynamically added to a page.

If there are multiple highlighters on a page they are read:

  • from top to bottom on page load
  • in the order they have been added to the page when dynamically added

We recommend you use highlighters for their role, not for their looks.

Content guidance#

Highlighter - Error

KeyField typeGuidelines
AIconThis is the icon inside the Highlighter. This is dictated by the type of Highlighter. The specification table has a list of options.
BHeadingThe recommended length is between 4 and 12 words, not exceeding 50 characters in total.
CContentA single, short paragraph works best. You are able to use inline text links within the paragraph if necessary. Don't add additional headings within the paragraph and the copy length should not exceed more than two paragraphs of 3 lines each. Can contain bold copy <b>, inline links <a>, and a caveat at the end of the relevant paragraph if required <a href="#caveat">1</a>.
DAccentThis is to support the context of the messaging. This colour matches that of the icon.

The content for highlighters is dependent on the type that is used:

Error Messages type="error"#

Highlighter - Error

For communicating failure with urgence. A task cannot be completed without the user remedying something.

Informational Messages type="info"#

Highlighter - Informational

For communicating a useful piece of information that the user might find helpful to carry out their action.

Success Messages type="success"#

Highlighter - Success

For communicating that an action has been successful.

Warning Messages type="warning"#

Highlighter - Warning

For communicating a piece of information with less severity. These include foreseeable problematic events, failures, outages and how to avoid errors.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Keep the messages conciseUse for generic message that is not in context to the page it is displayed in
Use an icon to alert the user what type of message it isUse it for Roadblock error messaging

Considerations of best practice#

  • Be clear and concise

The message must be in plain English, and help the user out of the situation by providing an actionable link if possible.

Usage#

View example on Storybook

Component placement#

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

Specification#

AttributeTypeDefaultOptionsDescription
decorationstringSee Icon component in StorybookIcon that is shown in the type of highlighter
typestring"error""error", "success", "warning", "info"Defines the role of the highlighter and changes the styles
SlotsType
headingh tag
Anonymousp tag

Specification notes#

Type#

  • Required for all four types of highlighter

Heading#

  • This should be a heading level 2

Design Tokens

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

Read more about design tokens in our getting started guide.

{
  "info-border-and-icon-color": "#209CEE",
  "success-border-and-icon-color": "#23D160",
  "warning-border-and-icon-color": "#E3660E",
  "error-border-and-icon-color": "#EB002F",
  "box-shadow": [
    "rgba(170, 170, 170, 0.05) 0px 0px 0px 1px"
  ],
  "drop-shadow": [
    "rgba(170, 170, 170, 0.40) -3px 3px 10px",
    "rgba(51, 51, 51, 0.05) -20px 20px 20px"
  ]
}

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!