ns-panel
#
IntroductionThe
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 guidanceKey | 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 |
#
DecorationAdding 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 contentIt 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 onens-panel
with a decoration. - Layout options are either a
div
,ns-article
,ns-content
,ns-column
orns-lockup
.
#
Usage#
Component placementThe ns-panel component can be used in the following elements/components:
- first child of
<main>
- ns-tabs
#
SpecificationAttribute | 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 notesns-panel
is always a child of the<main>
element.
#
Anonymous- The
ns-panel
can only have the following childrendiv
,ns-article
,ns-content
,ns-column
orns-lockup
, andns-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.