Skip to main content



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 ns-panel.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Use decoration to visually separate contentAdd decoration to an ns-panel where the previous ns-panel has a decoration
Use appropriate colour for the purpose of page in decorationsNest a panel in a panel
Include more than one layout option in a ns-panel

Considerations of best practice#

  • Treat each ns-panel as a section of the page.
  • Include no more than two ns-lockups in one ns-panel with a decoration.
  • Layout options are either a div, ns-article, ns-content, ns-column or ns-lockup.


View example on Storybook

Component placement#

The ns-panel component can be used in the following elements/components:


decorationstringcircle-yellow-left, circle-yellow-right, circle-green-left, circle-green-right, invert-concave-cyan, invert-concave-grey-light, invert-concave-green-light, invert-concave-yellow, invert-concave-blue, invert-bridge-cyan, invert-bridge-grey-light, invert-bridge-green-light, invert-bridge-yellow, invert-bridge-blueDecoration for the background, including the colour.
typestringpanelpanel, navThe variant of the panel.
anonymousdiv, ns-article, ns-content, ns-column, ns-lockup

Specification notes#

  • ns-panel is always a child of the <main> element.



  • The ns-panel can only have the following children div, ns-article, ns-content, ns-column or ns-lockup.

Design Tokens

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

Read more about design tokens in our getting started guide.

  "spacer": {
    "outside-top": "2rem",
    "outside-bottom": "2rem",
    "basketball-court": {
      "outside-top": "3rem",
      "outside-bottom": "3rem",
      "gap": "1.75rem"
    "hockey-pitch": {
      "outside-top": "4rem",
      "outside-bottom": "4rem",
      "gap": "2rem"
    "between": {
      "squash-court": {
        "outside-top": "1.5rem"
      "basketball-court": {
        "outside-top": "1.75rem"
      "hockey-pitch": {
        "outside-top": "2rem"
  "gutter": {
    "squash-court": "1.5rem",
    "basketball-court": "1.75rem",
    "hockey-pitch": "2rem"


  • 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!