@nice-digital/nds-callout
@nice-digital/nds-callout
npm i @nice-digital/nds-callout
@nice-digital/nds-callout

@nice-digital/nds-callout

🌟 Your source for creating beautiful, consistent experiences across NICE 🌟

by nice-digital

3.0.2 (see all)License:MITTypeScript:Built-In
npm i @nice-digital/nds-callout
Readme

@nice-digital/nds-callout

Callout element for the NICE Design System

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>

Downloads/wk

125

GitHub Stars

11

LAST COMMIT

9mos ago

MAINTAINERS

11

CONTRIBUTORS

13

OPEN ISSUES

18

OPEN PRs

16
VersionTagPublished
3.0.2
latest
3mos ago
3.0.2-alpha.0
alpha
3mos ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate