@nice-digital/nds-action-banner

Action banner component for the NICE Design System

• Installation
• Usage
  • React
    • Props
      • children
      • title
      • variant
      • cta
      • onClosing
        • className
  • SCSS
  • HTML

Installation

Install Node, and then:

npm i @nice-digital/nds-action-banner --save

Usage

React

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

import React from "react";
import { ActionBanner } from "@nice-digital/nds-action-banner";

<ActionBanner title="A title">
	Some <a href="/test">body</a>
</ActionBanner>

<ActionBanner title="A title" variant="subtle">
	A subtle action banner
</ActionBanner>

import { Button } from "@nice-digital/nds-button";
<ActionBanner title="A title" cta={<Button>some text</Button>}>
	Some <a href="/test">body</a>
</ActionBanner>

<ActionBanner title="A title" onClosing={() => { console.log("Closing"); }}>
	Some <a href="/test">body</a>
</ActionBanner>

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 text of the action banner

title

• Type: string

The title of the action banner

variant

• Type: "default" | "subtle"
• Default: "default"

The type of action banner.

cta

• Type: React.ReactNode
• Default: null

The main, call to action button.

onClosing

• Type: function
• Default: null

The callback function to be called when this action banner is closed. Leave blank to default to a non-closable banner.

className

• Type: string

Any additional className will be merged on to the container.

SCSS

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

@forward '@nice-digital/nds-action-banner/scss/action-banner';

HTML

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

<section className="action-banner action-banner--subtle action-banner--closeable">
	<div className="action-banner__container">
		<div className="action-banner__inner">
			<div className="action-banner__text">
				<h2 className="action-banner__title">
					Title here
				</h2>
				<p className="action-banner__intro">
					Body here
				</p>
			</div>
			<div className="action-banner__actions">
				<a href="/test" class="btn">Some CTA</a>
			</div>
			<button type="button" className="action-banner__close">
					<span className="icon icon--remove" ara-hidden="true"></span>
					<span className="visually-hidden">Close and then put the title here</span>
				</button>
		</div>
	</div>
</section>