Standard Life Digital Framework

Information Box

full screen new window example HTML markup

The Information box is a box that can include different types of content to display information prominently.

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 tag

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 tag

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

Heading tag

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

Heading tag

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

Heading tag

Markup: information-boxes\infobox.hbs

Copy

<div class="slb-infobox [modifier class]">
    <div class="slb-infobox__content">
        <h5>
            Heading tag
        </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>

Source: components/_information-boxes.scss