`@nice-digital/nds-callout`

Callout element for the NICE Design System

@nice-digital/nds-callout
Installation
Usage
React
Props - Props for Callout - Props for CalloutImage
Props for CalloutBody
SCSS
HTML

Installation

Install Node, and then:

npm i @nice-digital/nds-callout

Usage

React

Import the Callout, CalloutImage and CalloutBody components from the package and use with JSX:

import React from "react";
import { Link } from "react-router-dom";
import { Callout, CalloutImage, CalloutBody } from "@nice-digital/nds-callout";

<Callout>
	<CalloutImage>
		<img src="image.jpg" alt="Description of image" />
	</CalloutImage>
	<CalloutBody>
		<h2 className="h4">
			<Link to="/about-us/">Find out more about our services</Link>
		</h2>
	</CalloutBody>
</Callout>;

Props

Props for `Callout`

className

Type: string

Any additional classes you would like applied to the container.

Children

Type: React.ReactNode

Callout wrapper expects only both of CalloutImage and CalloutBody, as shown in the React example

Other props

Any additional props will be spread across the component container.

<Callout data-track="track-this">...</Callout>

Props for `CalloutImage`

Children

Type: React.ReactNode

The only child supplied should be a HTML img element or an equivalent React component that renders an image element.

import myPhoto from "./photo.jpg";
<CalloutImage>
	<img src={myPhoto} alt="Description of image" />
</CalloutImage>;

import Img from "gatsby-image";
<CalloutImage>
	<Img fixed={data.file.childImageSharp.fixed} />
</CalloutImage>;

className

Type: string

Any additional classes you would like applied to the div around the image.

Other props

Any additional props will be spread across the surrounding div.

Props for `CalloutBody`

Children

Type: React.ReactNode

The body of the card, any markup is valid but you should supply at least a header with an anchor.

<CalloutBody>
	<h2>
		<a href="/about-us">About our services</a>
	</h2>
</CalloutBody>

className

Type: string

Any additional classes you would like applied to the div around the image.

Other props

Any additional props will be spread across the surrounding div.

SCSS

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

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

HTML

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

<div class="callout">
	<div class="callout__image">
		<div class="maintain-ratio maintain-ratio--16-9">
			<img alt="" src="https://placehold.it/800x450?text=Callout" />
		</div>
	</div>
	<div class="callout__body">
		<h2>
			<a href="/">
				This is the title
			</a>
		</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur,
			facilis.
		</p>
	</div>
</div>