Image Banner

An image banner displays an image at the top of a web page or application. The banner image is typically a large, full-width image that spans the top of the page and serves as a visual header or introduction to the page’s content.’

When to use

Image banners are often used to display a hero image or other visually striking content that helps to grab the user’s attention and set the tone for the page.

Anatomy

1. Image container (required)

Examples

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

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 to communicate the page’s message or purpose.

The image banner can be used as a full-width banner or inside a container. This requires the following structure:

• <figure>
  • .ucla-banner

<figure>
  <img class="ucla-banner" src="image.jpg" alt="Description of the image" />
</figure>

By default, the image banner spans the full-width of the page. If you prefer to keep it contained within the content width, you may add it inside the grid:

<div class="ucla">
  <div class="col">
    <figure>
      <img class="ucla-banner" src="image.jpg" alt="Description of the image" />
    </figure>
  </div>
</div>