Skip to main content

ns-panel

Introduction#

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.

Usage#

View example on Storybook

Component placement#

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

Specification#

AttributeTypeDefaultOptionsDescription
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.
SlotsType
anonymousdiv, ns-article, ns-content, ns-column or ns-lockup.

Specification notes#

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

Decoration#

Anonymous#

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

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.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ You can also contact the team on Slack on the #product-nucleus channel!