@nice-digital/nds-panel
TypeScript icon, indicating that this package has built-in type declarations

4.0.8 • Public • Published

@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:

@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>

Readme

Keywords

Package Sidebar

Install

npm i @nice-digital/nds-panel

Weekly Downloads

86

Version

4.0.8

License

MIT

Unpacked Size

7.87 kB

Total Files

6

Last publish

Collaborators

  • wongcheming
  • johndavey72
  • barkertron
  • martingallagher1980
  • ditprogrammatic
  • ediblecode
  • josealmeida
  • mark-nice
  • nansenst
  • colin.mazurkiewicz
  • imranazad
  • eleanormollett