Standard Life Digital Framework

Ribbon

full screen new window example HTML markup

The ribbon is a important piece of information that needs to be highlighted on a component.

Usage

Place the ribbon inside the block of any component for the ribbon to be displayed.

Modifier selectors

Modifier selector	Description
`slb-ribbon`	Default Left aligned and default ribbon colour yellow.
`slb-ribbon--blue`	Default left aligned ribbon colour modifier blue.
`slb-ribbon--right`	Right aligned modifier and default ribbon colour yellow.
`slb-ribbon--right slb-ribbon--blue`	Right aligned modifier and ribbon colour modifier blue.
`slb-ribbon--minwidth`	Set a minimum width to the ribbon.

.slb-ribbon - Default Left aligned and default ribbon colour yellow.

Exclusive access

Heading

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-ribbon--blue - Default left aligned ribbon colour modifier blue.

Exclusive access

Heading

.slb-ribbon--right - Right aligned modifier and default ribbon colour yellow.

Exclusive access

Heading

.slb-ribbon--right.slb-ribbon--blue - Right aligned modifier and ribbon colour modifier blue.

Exclusive access

Heading

.slb-ribbon--minwidth - Set a minimum width to the ribbon when using a small amount of text.

Exclusive access

Heading

Markup: ribbon\ribbon.hbs

Copy

<div class="slb-infobox slb-infobox--white">
    <!-- Ribbon Start -->
    <span class="slb-ribbon [modifier class]">Exclusive access</span>
    <!-- Ribbon End -->
    <div class="slb-infobox__content">
        <h5>
            Heading
        </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/_ribbon.scss