Overview

Panel is a decorative empty container that holds each section of a page.

Summarise it!

✨ This is an auto-generated AI summary of the ns-panel's documentation. It may not be accurate. ✨

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.

Updated

12 December 2024

Additional feature for the ns-panel has been added:

• The inset attribute will provide a different layout, where the panel doesn’t go edge to edge, but rather shows a container with rounded corners.

Check those options in the specification down below!

Examples

Standard

The standard panel, goes from the browser’s edge to edge

Configure

Inset

To break the page’s rhythm and flow, the inset panel is contained and has margins on each side.

Configure

Guidance

Do

• Use the decoration to separate the content visually.
• Use an appropriate colour for the purpose of the page.
• Use inset panels to change the flow of a page, and put the highlight on a piece of content

Don't

• Nest a ns-panel within another ns-panel.
• Use inset panels to create alternate cards

Standard

Inset

Key

Key	Field type	Guidelines
A	Decoration	Choose between a no-colour background (default) or one of the decoration options.
B	Anonymous slot	Items placed in the anonymous slot can include a variety of different types of content and components.
C	Inset	The inset attribute gives the panel a container that is not going edge to edge, for this reason, be mindful of the size and type of content that goes in this kind of panel, specially at smaller viewport sizes.

Implementation

Placement

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

• <main>
• <ns-tabs>

Specification

Attributes

decoration

Property

decoration

Description

The decorative background colour of the panel with optional top and bottom offset percentages.

Type

string

Options

cyan lime lime-light navy navy-light blue forest forest-light orange orange-light red yellow white grey-light

Default

inset

Property

inset

Description

The toggle to display the inset decoration.

Type

boolean

Default

false

type

Property

type

Type

string

Default

panel

Slots

Slot	Permitted tags	Description
Anonymous slot	<div> <ns-column> <ns-content> <ns-lockup>	The anonymous slot for content.

Figma

Please note: The ns-panel Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Configuration instructions

(Opens in Figma).