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.
This is the icon inside the
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.
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-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.
To see examples visit Storybook.
<ns-skyline><ns-expander icon="warning"><h2 slot="heading">We are experiencing issues</h2><p>This is what we're doing to fix it and what you can do to <a href="#">help us</a></p></ns-expander></ns-skyline>
Does it live in a panel?
Does it live inside other components?
What layout classes can be used?
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