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.

Examples

Configure

Guidance

Do

• Use the decoration to separate the content visually.
• Use an appropriate colour for the purpose of the page.

Don't

• Nest a ns-panel within another ns-panel.

Standard

Key

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	Use <ns-column> to define a multi column layout.

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 navy blue forest orange red yellow white grey-light

Default

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.