ns-panelcomponent 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.
|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 |
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...
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)
|💚 Do's||💔 Don'ts|
|Use decoration to visually separate content||Add decoration to an |
|Use appropriate colour for the purpose of page in decorations||Nest a panel in a panel|
|Include more than one layout option in a |
- Treat each
ns-panelas a section of the page.
- Include no more than two
ns-panelwith a decoration.
- Layout options are either a
The ns-panel component can be used in the following elements/components:
- first child of
|(no decoration)||Decoration for the background, including the colour.|
ns-panelis always a child of the
ns-panelcan only have the following children
- 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.