Ribbon Text Banner

A ribbon text banner is a combination of the ribbon banner and the text banner.

When to use

The ribbon text banner is used on the home page or landing page of the website.

Anatomy

Ribbon Text Banner Anatomy

1. Ribbon (required)

2. Image (required)

3. Text Container (required)

4. Button

5. Text (required)

Examples

<div class="ucla-banners__ribbon-text">
  <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>
  <div class="container">
    <div class="ucla">
      <div class="col span_12_of_12">
        <div class="ucla-banner__text">
          <div class="container">
            <div class="ucla">
              <div class="col span_10_of_12 ucla-prose mx-auto">
                <p class="lead">This text banner helps focus people's attention
                  on a single call to action. Limit copy in this banner to 200
                  characters or less. Lorem ipsum dolor sit amet, consectetur
                  adipiscing elit sed do eiusmod.</p>
                <button class="ucla-btn ucla-btn--primary-light">Button</button>
              </div>
            </div>
          </div>
        </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.

Use clear, concise text that is easy to read and understand. This will help grab the user’s attention and make it easy for them to understand the message of the banner.

Keep the text short and to the point. A text banner with too much text can be overwhelming for the user and make it difficult for them to understand the message.