Package Exports

@nice-digital/nds-panel
@nice-digital/nds-panel/es/Panel.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nice-digital/nds-panel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`@nice-digital/nds-panel`

Panel component for the NICE Design System

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

Installation

Install Node, and then:

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

Usage

React

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.

Props

children

Type: ReactNode

The body of the panel

variant

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

The type of panel.

className

Type: string
Default: ""

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

SCSS

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

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

HTML

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>