Banners are a great way to introduce your content. Use a text, image, video, text overlay, or text and image banner to set the tone for the page and begin an immersive experience.
Image sizing information for all banner types, including video, can be found on the image page.
Text banners feature a solid-colored background with text taking center stage. Use this banner type to create context for the content on your page. Text banners can include a title, subtitle, and call to action.
<div id="banner" class="section bg-gray banner text ">
<div class="row pad">
<div class="banner--content text--content">
<h2 class="title">Compelling, intriguing title goes here</h2>
<p class="teaser">Great, equally interesting sub-title and descriptive text follows here</p>
<a href="#" class="button">Read the story</a>
</div>
</div>
</div>Image banners can add visual interest to your page and set the stage for the story you want to tell.
<div class="section fw-banner--picture image" id="banner">
<picture>
<source media="(min-width: 64.0625em)" srcset="https://placehold.it/1800x600" type="image/jpeg"/>
<source media="(min-width: 40em)" srcset="https://placehold.it/1200x400" type="image/jpeg"/>
<source media="(max-width: 39.9375em)" srcset="https://placehold.it/768x512" type="image/jpeg"/>
<img alt="Students sitting around a fire pit" src="https://placehold.it/1800x600"/>
</picture>
</div>Give your banner image context using the Text Overlay banner.
This style of banner pairs a full-width banner image with text positioned on the right or left side. A call to action (CTA) button may be added.
<div id="banner" class="section bg-image banner text-overlay ">
<div class="show-for-small-only" data-ratio="3x2">
<div class="bg-image-cover" style="background-image: url('https://placehold.it/768x512');"></div>
</div>
<div class="show-for-medium-only" data-ratio="2x1">
<div class="bg-image-cover" style="background-image: url('https://placehold.it/1024x512');"></div>
</div>
<div class="show-for-large" data-ratio="3x1">
<div class="bg-image-cover" style="background-image: url('https://placehold.it/1800x600');"></div>
</div>
<div class="row pad">
<div class="banner--content text-overlay--content">
<h2 class="title">Compelling, intriguing title goes here</h2>
<p class="teaser">Great, equally interesting sub-title and descriptive text follows here</p>
<a href="#" class="button" title="Read the story">Read the story</a>
</div><!-- /.banner-content -->
</div><!-- /.row.pad -->
</div>Begin your story with an image and content with this type of banner.
Include a picture or graphic and accompanying text—each gets half of the banner space. You can also add a CTA.
<div id="banner" class="section bg-secondary bg-dark banner text-image ">
<div class="show-for-small-only" data-ratio="3x2">
<div class="bg-image-cover" style="background-image: url('https://placehold.it/768x512');"></div>
</div>
<div class="show-for-medium-only" data-ratio="2x3">
<div class="bg-image-cover" style="background-image: url('https://placehold.it/512x768');"></div>
</div>
<div class="show-for-large" data-ratio="2x1">
<div class="bg-image-cover" style="background-image: url('https://placehold.it/1024x512');"></div>
</div>
<div class="row pad">
<div class="banner--content text-image--content">
<h2 class="title">Compelling, intriguing title goes here</h2>
<p class="teaser">Great, equally interesting sub-title and descriptive text follows here</p>
<a href="#" class="button" title="Read the story">Read the story</a>
</div>
</div>
</div>Video banners can add an element of surprise to your content and provide your users with a more immersive experience. When including video banners, make sure you have both an MP4 and WebM file to include, and a fallback image that can be substituted on mobile and in situations where video won't work.
Video banners will automatically mute all audio.
Video banners should be less than 2 MB in size. To meet this size requirement, your video should:
If you’re having difficulty, try:
To meet accessibility standards, you must include a written transcript for your video. You can learn more about transcripts and other accessibility requirements on the IU Accessibility website.
<div id="banner" class="section banner bg-video">
<div class="hide-for-medium img--small">
<div class="bg-image-cover" style="background-image: url('');"></div>
</div>
<div class="show-for-medium hide-for-large img--medium">
<div class="bg-image-cover" style="background-image: url('');"></div>
</div>
<div class="show-for-large img--large">
<div class="bg-image-cover" style="background-image: url('');"></div>
</div>
<div class="bg-video-viewport" data-height="600" data-width="1800" data-mp4="video.mp4" data-webm="video.webm"></div>
</div>
<div class="visually-hidden">
<p>Description of the video:</p>
<p>[Add transcript here with one descriptive line per paragraph element.]</p>
</div>