ns-panel

Introduction

The ns-panel component is an empty container for each section on a page.

It provides an area to place a layout, add an optional decoration and apply the appropriate margins. There can be more than one ns-panel on a page.

Content guidance

Key	Field type	Guidelines
A	Decoration	Choose between a no-colour background (default) or one of the available brand colours
B	Top offset	Adjust the vertical space which can affect where the decoration starts at the top
C	Bottom offset	Adjust the vertical space which can affect where the decoration ends at the bottom
D	Columns	You can define a multiple column layout within the ns-panel

Decoration

Adding decoration to an ns-panel utilises a coloured background. It provides visual separation from other sections on the page and introduces brand colour and style.

The decoration has configurable top and bottom margins. These are adjusted separately from the content and allow the content to overlap these edges, if required, to achieve a more visually desirable layout.

By default there is no decoration applied...

Columns and content

It is possible to apply a number of columns to a layout within a single ns-panel by adding the ns-column component within it. Note the 3 cards in the examples above have been added this way. (See ns-column).

Another way to adjust the layout is to use the ns-content component within ns-panel. This enables formatting of typography and spacing (see ns-content)

Best practice

💚 Do's	💔 Don'ts
Use decoration to visually separate content	Add decoration to an ns-panel where the previous ns-panel has a decoration
Use appropriate colour for the purpose of page in decorations	Nest 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.

Usage

View example on Storybook

Component placement

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

• first child of <main>
• ns-tabs

Specification

Attribute	Type	Default	Options	Description
decoration	string	(no decoration)	cyan, lime, navy, blue, forest, slate, orange, red, yellow, white, grey-light	Decoration for the background, including the colour.

Slots	Type
anonymous	div, ns-article, ns-content, ns-column, ns-lockup

Specification notes

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

Anonymous

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

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"
  },
  "decorations": [
    "cyan",
    "lime",
    "navy",
    "blue",
    "forest",
    "slate",
    "orange",
    "red",
    "yellow",
    "white",
    "grey-light"
  ],
  "decorations-deprecated": "green-light",
  "decorations-mapping": "lime"
}

Feedback

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