Standard Life Digital Framework

Important information box

full screen new window example HTML markup

Reinforce the information box with an important information box that does not belong in the primary information style.

Usage

Place the information box outside a page grid container to extend the background full width but keeping the content contained, alternatively place the information box in the grid container to contain both background and content.

The information box has 4 colour variants that can be used on each iteration of the information box, these are displayed below, slb-infobox--white, slb-infobox--pale, slb-infobox--blue, slb-infobox--purple, slb-infobox--aqua.

Infobox can contain multiple containers and can be displayed in different grid layouts using the bootstraps grid system.

Modifier selectors

Modifier selector	Description
`slb-infobox--white`	White information box with a box shadow.
`slb-infobox--pale`	Pale information box with a white background and pale blue border.
`slb-infobox--blue`	Blue information box with a blue background.
`slb-infobox--purple`	Purple information box with a purple background.
`slb-infobox--aqua`	Aqua information box with a aqua background.

.slb-infobox--white - White information box.

Heading text

Subtext Copy style for all of that information lorum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua lorum ipsum dolor sit amet, consectetur adipiscing.

.slb-infobox--pale - Pale information box.

Heading text

.slb-infobox--blue - Blue information box.

Heading text

.slb-infobox--purple - Purple information box.

Heading text

.slb-infobox--aqua - Aqua information box.

Heading text

Markup: information-boxes\infobox-important.hbs

Copy


<div class="slb-infobox [modifier class]">
    <div class="slb-infobox__content">
        <div class="slb-infobox__important">
            <h5>Heading text</h5>
            <p>
                Subtext Copy style for all of that information lorum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua lorum ipsum dolor sit amet, consectetur adipiscing.
            </p>
        </div>
    </div>
</div>

Source: components/_information-boxes.scss