Default banners used in pagebuilder widgets and templates.
For more information about other types of images, see the base images webpage.
Banners
A banner used on landing pages. The image used should be cropped to 1200 by 440 pixels.
Research
Future thinkers
Our world-class researchers are invaluable to us all. Challenging themselves and the world alike to protect and progress our future for generations to come.
<style>
/* Use with background image */
.bg-image-a {
background-image: url('/getmedia/427c9333-9d97-4476-9623-0e3f4eceba30/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 researchers 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 banner used mainly on landing pages. The image used should be cropped to 930 by 350 pixels.
Science Bazaar
Growth
Hybrid event, Saturday 29 October 2022 10am - 4pm
<style>
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.hero-gradient {
background: linear-gradient(90deg, rgba(249, 201, 9,.5), rgba(0, 0, 0,.2) 25%, rgba(255, 255, 255,.0), rgba(0, 0, 0,.2) 55%, rgba(209, 3, 115,.6) 100%), url(/getmedia/0fb74da1-57c2-452e-88c4-e09fcf3e348d/science-bazaar2020.jpg?width=930&height=341&ext=.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.hero-nogradient {
background: url("/getmedia/0fb74da1-57c2-452e-88c4-e09fcf3e348d/science-bazaar2020.jpg?width=930&height=341&ext=.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
</style>
<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><style>
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.hero-gradient {
background: linear-gradient(90deg, rgba(249, 201, 9,.5), rgba(0, 0, 0,.2) 25%, rgba(255, 255, 255,.0), rgba(0, 0, 0,.2) 55%, rgba(209, 3, 115,.6) 100%), url("/getmedia/24d0b118-a4d7-4a25-b83c-3f936f0b0159/open-day-banner.jpg");
}
.hero-nogradient {
background: url("/getmedia/24d0b118-a4d7-4a25-b83c-3f936f0b0159/open-day-banner.jpg");
}
</style>
<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 Open Day</h1>
<h2 class="is-size-4 has-text-weight-bold has-text-light m-bottom-30">Saturday 18 November</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-nogradient"></div>
</div>
</div>
</section>A banner used on course pages. The image used should be cropped to 930 by 350 pixels.
Accounting and Economics
BSc (Hons)
90%
Students in work or study 6 months after finishing this course
98%
Students were satisfied with this course
<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>
</section>