Panel

Use a panel to highlight or separate content

• View on GitHub
• View on NPM

Panel heading

The panel component is a visible container to give users a summary of content or a task, often with a link to more detail. For example, you can display a panel to group related content or visually break up a page layout.

When to use

Use the panel component to display important information in the side panel as an aside from the main content or to group related content.

When not use

Never use the panel component to highlight important information within the body content - use the alert component instead.

How to use

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 them from the surrounding content.

Panel variants

You can choose from the default panel and three additional variations:

Default

Primary

Impact

In a grid

Accessibility

Component meets WCAG AA guidelines for accessibility on:

• Text contrast - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 )1.4.3).
• UI contrast - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
• Accessible use of colour - Colour is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Research and evidence

No research done on the component at this time.

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

• Share your research or feedback on GitHub
• Propose a change

Need help?

If you've got a question about the NICE Design System, contact the team.

• If you work for NICE, ask us a question in our Teams channel
• If you work outside of NICE, you can get in touch with us via Github discussions