Panel component for the NICE Design System

• @nice-digital/nds-panel - Installation - Usage - React - Props - children - variant - className - SCSS - HTML

Install Node, and then:

npm i @nice-digital/nds-panel --save

Import the Panel components from the package and use within JSX:

import React from "react";
import { Panel } from "@nice-digital/nds-panel";

<Panel>
	<h2>A default panel</h2>
	<p>For signposting supporting or additional information</p>
</Panel>

<Panel variant="impact">
	<h2>Impact panel</h2>
	<p>Any body copy</p>
</Panel>

<Panel variant="primary">
	<h2>A primary panel</h2>
	<p>For grouping and separating content and for visual interest.</p>
</Panel>

Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

• Type: ReactNode

The body of the panel

• Type: "impact" | "primary" | "inverse" | "impact-alt"
• Default: ""

The type of panel.

• Type: string
• Default: ""

Additional CSS classes to apply to the panel, e.g. mt--0 to remove the top margin.

If you're not using React, then import the SCSS directly into your application by:

@forward '@nice-digital/nds-panel/scss/panel';

If you're not using React, then include the SCSS as above and use the HTML:

<div class="panel">
	Default panel
</div>
<div class="panel panel--impact">
	Impact panel
</div>
<div class="panel panel--primary">
	Primary panel
</div>