UCLA Design System

Box Banner

The box banner is a combination of a text box overlapped on top of an image.

When to use

Less emphasis on the image or when using a smaller, less horizontal image.

Anatomy

Box Banner Anatomy

1. Title (required)

2. Text box container

3. Button

4. Text (required)

5. Image container (required)

Examples

<div class="ucla-banner__box ucla-banner__box-left">
  <img
    class="ucla-banner__box-image"
    src="../../../theme-assets/img/examples/featured-story-bill-and-john.jpg"
    alt="Bill Walton with a drawing of Coach John Wooden."
  />

  <article class="ucla-banner__box-text ucla-prose">
    <h3>Lorem ipsum dolor sit amet, consectetuer adipiscing</h3>
    <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et
      gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus
      unum. Defacto lingo est igpay atinlay.</p>
    <button class="ucla-btn ucla-btn--primary-light">Button</button>
  </article>
</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 message and help communicate the message or purpose.

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.