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

    1.1.14 • Public • Published

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

    @import "~@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>

    Keywords

    none

    Install

    npm i @nice-digital/nds-callout

    DownloadsWeekly Downloads

    119

    Version

    1.1.14

    License

    MIT

    Unpacked Size

    17.2 kB

    Total Files

    9

    Last publish

    Collaborators

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