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.
|A||Icon||This is the icon inside the |
|B||Heading||This 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.|
|💚 Do's||💔 Don'ts|
|Position ||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; ||Use if for non-important messages.|
|Make the message longer than necessary.|
- Do not include a link in the heading. It's used to open and close the content of
ns-expanderand 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.
The ns-skyline component can only be used as a child of the
- 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.