ns-panel is an empty container that holds each section of a page. Each
ns-panel provides an area to place a layout and add an optional decoration.
Adding a decoration to an
ns-panel using a gradient background provides visual separation from the other sections of the page and introduces brand colour and style. Using the circle decoration provides subtle emphasis to an
Use decoration to visually separate content
Add decoration to an
Use appropriate colour for the purpose of page in decorations
Nest a panel in a panel
Include more than one layout in a
ns-panel as a section of the page.
Include no more than two
ns-lockups in one
ns-panel with a decoration.
Layout is either a class of [
.splash] or an
To see examples visit Storybook.
Does it live in a panel?
Does it live inside other components?
✅ Yes -
What layout classes can be used?
Decoration for the background, including the colour.
The variant of the panel.
ns-panel is always a child of the
Check the gradient palette.
The first child is the layout child, which should always be a
div except when adding a lockup component.
The layout classes are:
splash - this should be used almost always.
splish - used for
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