Commentary

The ribbon element is a decorative feature that can be added to any component. The ribbon is typically used to highlight a feature or to signal the state of the parent component.

A landmark is added by setting role to "note". This signals that the ribbon is not part of the main content, but rather is an additional piece of text that enhances the main content.

Size and position options are available. The ribbon can also have its colour set through any of the element colour options.

Usage

Classes:
.has-ribbon, .has-ribbon-left, .has-ribbon-right Attached to a parent container to signal that a ribbon on a child elementt needs to be shown. Default position is top-right. Other options are top-left and bottom-right
.ribbon Defines a child element inside a container that will be positioned and styled to show the ribbon.
.has-shadow Optional modifier for ribbon that adds a border shadow.
.is-outlined Optional modifier for ribbon that makes the ribbon outlined.
Size options: .is-small, .is-medium, .is-large
Colour options: Any of the element colour modifiers from the Colour Palette helpers.
Dependencies:
File: ribbon.css
Variables: --bg-main-ter, --pad-horz, --pad-vert, --radius-small, --shadow, --size-4, --size-5, --size-6, --size-7, --weight-normal

Examples

Basic Ribbons with Colours and Shadows

Default

Box content

White

Box content

Primary Shadow

Box content

Primary Outlined Shadow

Box content

Secondary

Box content

Secondary Outlined

Box content

Success

Box content

Success Outlined

Box content

Warning

Box content

Warning Outlined

Box content

Danger

Box content

Danger Outlined

Box content

Dark

Box content

Grey with Shadow

Box content


                <div class="box-shadow has-ribbon">
                    <div class="ribbon" role="note">Default</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon">
                    <div class="ribbon is-white" role="note">White</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon">
                    <div class="ribbon is-primary has-shadow" role="note">Primary Shadow</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon">
                    <div class="ribbon is-primary-outlined has-shadow" role="note">Primary Outlined Shadow</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon">
                    <div class="ribbon is-secondary" role="note">Secondary</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon">
                    <div class="ribbon is-secondary-outlined" role="note">Secondary Outlined</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon">
                    <div class="ribbon is-success" role="note">Success</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon">
                    <div class="ribbon is-success-outlined" role="note">Success Outlined</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon">
                    <div class="ribbon is-warning" role="note">Warning</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon">
                    <div class="ribbon is-warning-outlined" role="note">Warning Outlined</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon">
                    <div class="ribbon is-danger" role="note">Danger</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon">
                    <div class="ribbon is-danger-outlined" role="note">Danger Outlined</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon">
                    <div class="ribbon is-dark" role="note">Dark</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon">
                     <div class="ribbon is-grey has-shadow" role="note">Grey with Shadow</div>
                    <p>Box content</p>
                </div>

Ribbons with Sizes and Placements

Small ribbon - outlined

Box content

Medium ribbon

Box content

Large ribbon

Box content

Left ribbon

Box content

Bottom ribbon small

Box content


                <div class="box-shadow has-ribbon">
                    <div class="ribbon is-primary-outlined is-small" role="note">Small ribbon - outlined</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon">
                    <div class="ribbon is-primary is-medium" role="note">Medium ribbon</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon">
                    <div class="ribbon is-primary is-large" role="note">Large ribbon</div>
                    Box content
                </div>

                <div class="box-shadow has-ribbon-left">
                    <div class="ribbon is-primary is-small" role="note">Left ribbon</div>
                    <p>Box content</p>
                </div>

                <div class="box-shadow has-ribbon-bottom">
                    <div class="ribbon is-primary is-small" role="note">Bottom ribbon small</div>
                    <p>Box content</p>
                </div>