Banners
Default banners used in pagebuilder widgets and templates.
See the base images page for more information about other types of images.
General page top level banner
A banner used on landing pages. The image used should be cropped to 1200 by 440 pixels.
Open this General page top level banner example in a new tab.
<style>
/* Use with background image */
.bg-image-a {
background-image: url('/design-system/assets/img/research-banner.jpg');
}
</style>
<section class="full-width bg-image bg-image-a">
<div class="container is-fullhd">
<div class="columns is-mobile">
<div class="column is-12-mobile is-10-tablet is-5-desktop is-offset-1-tablet is-offset-1-desktop">
<div class="inner-box">
<h1 class="is-size-1 font-type-2 has-text-white has-heading-line">Research</h1>
<h2 class="is-size-2 has-text-weight-bold is-uppercase has-text-light" style="line-height: 1.2;">Future th<span style="color:#f9c909;">in</span>kers</h2>
<p class="is-size-4 has-text-light">Our world-class reseachers are invaluable to us all. Challenging themselves and the world alike to protect and progress our future for generations to come.</p>
</div>
</div>
</div>
</div>
</section>- A full-width banner should only be used on landing pages.
- The image used should be cropped to 1200 by 440 pixels.
- A yellow to pink background gradient is optional.
- This banner has a main heading with optional sub-heading, text and either a primary or secondary button with link.
General page secondary banner
A banner used mainly on landing pages. The image used should be cropped to 930 by 350 pixels.
Open this General page secondary banner example in a new tab.
<section class="section hero-wrapper">
<div class="container is-fullhd">
<div class="columns is-gapless hb-wrapper">
<div class="column is-half-tablet is-one-third-desktop hb-insert-column">
<div class="hb-insert">
<div class="hb-content">
<h1 class="is-size-1 font-type-2 has-text-white has-heading-line">Science Bazaar</h1>
<h2 class="is-size-3 has-text-weight-bold is-uppercase has-text-light m-bottom-30">Growth</h2>
<p class="is-size-5 has-text-weight-bold has-text-light m-bottom-30">Hybrid event, Saturday 29 October 2022 10am - 4pm</p>
</div>
</div>
</div>
<div class="column hb-hero hero-nogradient"></div>
</div>
</div>
</section>- Secondary banners are mainly used on landing pages.
- The image used should be cropped to 930 by 350 pixels.
- A yellow to pink background gradient is optional.
- This banner has a main heading with optional uppercase sub-heading, introduction text and two primary or secondary buttons with links.
Open Days listing and event banner
A banner used on event listing pages. The image used should be cropped to 930 by 350 pixels.
Open this Open Days listing and event banner example in a new tab.
<section class="section hero-wrapper">
<div class="container is-fullhd">
<div class="columns is-gapless hb-wrapper">
<div class="column is-half-tablet is-one-third-desktop hb-insert-column">
<div class="hb-insert">
<div class="hb-content">
<h1 class="is-size-1 font-type-2 has-text-white has-heading-line">Undergraduate Study</h1>
<h2 class="is-size-4 has-text-weight-bold has-text-light m-bottom-30">Find out more about our next Open Evening</h2>
<p><a href="#" title="More details" class="button brookes-secondary light-text">More details</a></p>
<p><a href="#" title="Book now" class="button brookes-primary">Book now</a></p>
</div>
</div>
</div>
<div class="column hb-hero hero-gradient"></div>
</div>
</div>
</section>- These banners are used on Open Day and events pages.
- The image used should be cropped to 930 by 350 pixels.
- A yellow to pink background gradient is optional.
- This banner has a main heading with optional sub-heading and two primary or secondary buttons with links.
Course page banner
A banner used on course pages. The image used should be cropped to 930 by 350 pixels.
<section class="section hero-wrapper">
<div class="container is-fullhd">
<div id="js-course-hero">
<div class="columns is-gapless">
<div class="column is-two-thirds-tablet is-three-quarters-desktop cp-hero" style="background-image: url("/getmedia/321d925b-2dbc-49d5-9cf3-ce372dbad5b5/accounting-and-economics.jpg?width=930&height=349&ext=.jpg");">
<div class="cp-hero-content">
<h1 class="cp-hero-title">Accounting and Economics</h1>
<p class="is-size-4">BSc (Hons)</p>
</div>
</div>
<div class="column cp-hero-stats">
<div class="cp-hero-stats-content">
<div class="is-table cp-hero-table">
<div class="is-table-cell has-text-centered">
<div class="columns is-gapless is-multiline">
<div class="column is-half">
<p class="cp-hero-stat">90%</p>
<p class="cp-hero-stat-desc">Students in work or study 6 months after finishing this course</p>
</div>
<div class="column is-half">
<p class="cp-hero-stat">98%</p>
<p class="cp-hero-stat-desc">Students were satisfied with this course</p>
</div>
<div class="column is-full m-top-30"><a class="button brookes-secondary light-text m-auto p-top-20 p-bottom-20" href="/clearing/">Clearing places are available on this course</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-video-modal" data-video="<iframe width="560" height="315" src="https://www.youtube.com/embed/J_7J84aZJ20" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>">
<div class="modal js-modal">
<div class="modal-background">
<div class="is-table cp-video-table">
<div class="is-table-cell has-text-centered cp-video-table-cell">
<div class="modal-content is-clipped" style="width: 100%; max-width: 960px;">
<div class="video-container" style="position: relative; padding-bottom: 56.25%; width: 100%; height: 0px;"> </div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/J_7J84aZJ20" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" id="test-player" style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; width: 100%; height: 100%;"></iframe>
</div>
</div>
<button class="modal-close is-large" aria-label="close"> </button>
</div>
</div>
</div>
</div>
</div>
</section>