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

    1.1.12 • Public • Published

    @nice-digital/nds-full-bleed

    Full bleed (edge-to-edge viewport) element for the NICE Design System

    Installation

    Install Node, and then:

    npm i @nice-digital/nds-full-bleed

    Usage

    React

    Import the FullBleed component from the package and use with JSX:

    import { FullBleed } from "@nice-digital/nds-full-bleed";
    <FullBleed>
    	<p>Content here</p>
    </FullBleed>

    The component doesn't have any internal spacing or structure, and any supplied markup will align to the left of the viewport by default. Include structural markup if you need to, for example:

    import { FullBleed } from "@nice-digital/nds-full-bleed";
    import { Grid, GridItem } from "@nice-digital/nds-grid";
    <FullBleed>
    	<div className="container">
    		<Grid>
    			<GridItem cols={12}>
    				<p>This content is aligned to the grid</p>
    			</GridItem>
    		</Grid>
    	</div>
    </FullBleed>

    Props

    children

    • Type: React.ReactNode

    The children will make up the contents of the full bleed component.

    className

    • Type: string
    • Default: "default"

    Any additional classes you would like to apply to the container.

    backgroundImage

    • Type: string
    • Default: undefined

    The url or path for the image to be loaded into the background of the full bleed. The image will be set to background-size: cover and will be positioned in both vertical and horizontal center.

    padding

    • Type: "small" | "medium" | "large"
    • Default: "small"

    The amount of padding added to the top and bottom of the full bleed area.

    light

    • Type: boolean
    • Default: false

    If set to true, the light setting will change the colour of the text content to white text and without a background image, display solid primary background.

    By default the text content is NICE black and the background is NICE white.

    Other props

    Any additional props will be spread across the component container.

    <FullBleed data-track="track-this">
    	<p>Content here</p>
    </FullBleed>

    SCSS

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

    @import "~@nice-digital/nds-full-bleed/scss/full-bleed";

    HTML

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

    <div
      class="full-bleed full-bleed--padding-small full-bleed--light"
      style='background-image: url("path/to/my/image.jpg");'
    >
    	<p>Here is my content</p>
    </div>

    Keywords

    none

    Install

    npm i @nice-digital/nds-full-bleed

    DownloadsWeekly Downloads

    107

    Version

    1.1.12

    License

    MIT

    Unpacked Size

    13.7 kB

    Total Files

    9

    Last publish

    Collaborators

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