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

    1.2.14 • 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:

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

    Keywords

    Install

    npm i @nice-digital/nds-panel

    DownloadsWeekly Downloads

    144

    Version

    1.2.14

    License

    MIT

    Unpacked Size

    14.7 kB

    Total Files

    9

    Last publish

    Collaborators

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