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
|💚 Do's||💔 Don'ts|
|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 option in a |
- Treat each
ns-panelas a section of the page.
- Include no more than two
ns-panelwith a decoration.
- Layout options are either a
The ns-panel component can be used in the following elements/components:
- first child of
|Decoration for the background, including the colour.|
|The variant of the panel.|
ns-panelis always a child of the
- Check the gradient palette.
- The ns-panel can only have the following children
- 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