This site is no longer maintained

This is the documentation for version 0 of the design system and will no longer be updated. Please see the new Design System site on nice.org.uk for the most up-to-date documentation.

Design System documentation

Alpha NICE Design System is in development. This means it is not feature complete and there may be issues. Find any? Please, let us know!

Panel

Blocks to highlight or separate content

Why?

To group related content into a box or to visually break up a page layout.

Usage

Use panels in side panel as an aside from the main content, or to group related content.

Panels have a default padding and remove the margin top/bottom from the first/last children to maintain consistent padding.

Panels have a margin above and below by default to separate from the surrounding content. Use with spacing CSS classes e.g. mb--e or mt--0 to adjust the margins if necessary.

Variants

Default (light) panel

Example

This is a default panel

Source


<div class="panel">
    <p>This is a default panel</p>
</div>

Inverse (dark) panel

Example

This is a dark panel. Links are inverted automatically.

Inverse button

Source


<div class="panel panel--inverse">
    <p>This is a dark panel. <a href="">Links are inverted automatically</a>.</p>
    <p>
        <a href="#" class="btn btn--inverse">Inverse button</a>
    </p>
</div>

Edit on GitHub