@nice-digital/nds-panel

Panel component for the NICE Design System

Usage no npm install needed!

<script type="module">
  import niceDigitalNdsPanel from 'https://cdn.skypack.dev/@nice-digital/nds-panel';
</script>

README

@nice-digital/nds-panel

Panel component for the NICE Design System

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:

@import "~@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>