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

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.

The ribbon banner is comprised of a background image and a contained Ribbon component. The required structure of this component is as follows:

• .ucla-banner__ribbon - This will have the background-image property with your image
  • .container - Container that sets the width of the content
    • .ucla - Container that houses the columns
      • .col.span_12_of_12 - Column that spans the full width of the container
        • .ucla-ribbon.ucla-ribbon--brand - Start of the Brand Ribbon component
          • .ucla-ribbon__text - Text for the ribbon

<div class="ucla-banner__ribbon" style="background-image: url('image.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>