Skip to main content

ns-skyline

Introduction#

Notifying visitors of current, ongoing or upcoming events that they may be relevant to them.

Positioned directly beneath the global navigation and above any content, ns-skyline displays high level messages to the user. The purpose of ns-skyline is to notify the user of important site-wide or non-page specific events that may affect their experience of using the British Gas website.

They are either:
  • Informational - to show useful information that the user may want to be aware of, e.g. upcoming price changes.
  • Warning - to warn users of potential upcoming or current issues e.g. weather warning.

Content guidance#

Skyline

KeyField typeGuidelines
AIconThis is the icon inside the ns-skyline, it can be either an information or warning icon depending on the type of message you wish to display.
BHeadingThis is the heading to the anonymous content. When the heading is clicked the component opens to reveal the content. The recommended length is between 4 and 12 words, not exceeding 50 characters in total.
CContentns-skyline can accommodate multiple paragraph slots, these should be concise, using sub-headings to split large paragraphs. Can contain bold copy <b>, inline links <a>, lists <ul> <ol>, and a caveat at the end of the relevant paragraph if required <a href="#caveat">1</a>.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Position ns-skyline directly underneath the main navigation.Include a link in the heading.
Communicate the message in a clear and concise way as possible. Ideally, it should be able to be explained in the heading in one sentence.Use for error messaging.
Use inline links to support content and aid the user find helpful information.Use it for page specific messages.
Add the icon that matches the context of the message; warning or info.Use if for non-important messages.
Make the message longer than necessary.

Considerations of best practice#

  • Do not include a link in the heading. It's used to open and close the content of ns-expander and won't be clickable.
  • Use sparingly for only the most important information.
  • Not be used as the primary entry point to information or actions users need on a regular basis.
  • Do not use for marketing information or up-sell.

Usage#

View example on Storybook

Component placement#

The ns-skyline component can only be used as a child of the <main> element

Specification#

SlotsType
Anonymousns-expander tag

Design Tokens

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

Read more about design tokens in our getting started guide.

{
  "theme": "slate",
  "expander": {
    "separator-color": "#C8C9C7",
    "heading-typography": "p-small"
  }
}

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!