UCLA Design System

Ribbon Banner

A ribbon banner is an image banner that has a text ribbon overlaid on top of it. The text ribbon typically contains a short message or tagline that is related to the image, and is positioned in a prominent location on the banner.

When to use

Used to convey additional information or context to the user, and can help grab their attention and draw them into the page’s content.

Anatomy

Ribbon Banner Anatomy

1. Ribbon (required)

2. Image container (required)

Examples

<div class="ucla-banner__ribbon" style="background-image: url(../../../theme-assets/img/examples/home-hero-desktop.jpg)">
    <div class="container">
        <div class="ucla">
            <div class="col span_12_of_12">

                <div class="ucla-ribbon ucla-ribbon--brand">
                    <h2 class="ucla-ribbon__text">Lorem ispum dolor sit amet consectetuer adipiscing</h2>
                </div>

            </div>
        </div>
    </div>
</div>

Best practices

Use high-quality images that are visually striking and engaging. This will help grab the user’s attention and set the tone for the page.

Choose images that are relevant to the page’s content and help communicate the message or purpose.

Limit 1 - 2 ribbons per page and focus on your most important message.

Keep ribbon length between 25 - 30 characters and between 3 - 5 lines.