A Hero banner is a singular banner which must contain a title and image and has an optional lead sentence.
Use on pages that are homepages or section pages.
Images are displayed at various sizes dependent on viewing device and orientation. Banner images should always have a 2:1 (width:height) aspect ratio. The required dimension for a banner image is 1200px x 600px. If smaller images are used, they will be stretched and will suffer from degradation in quality, so it is essential to use the correct size of image.
<section class="uol-hero-banner">
<div class="uol-hero-banner--inner">
<div class="uol-hero-banner__text-container">
<{{ banner.heading_level if banner.heading_level else 'h2' }} class="uol-hero-banner__title">
{{ banner.title }}
</{{ banner.heading_level if banner.heading_level else 'h2' }}>
{% if banner.lead %}
<p class="uol-hero-banner__lead">{{ banner.lead }}</p>
{% endif %}
</div>
{% if banner.img.src %}
<img class="uol-hero-banner__img" src="{{ banner.img.src }}" alt="{{ banner.img.alt }}" loading="lazy">
{% endif %}
</div>
</section>
<section class="uol-hero-banner">
<div class="uol-hero-banner--inner">
<div class="uol-hero-banner__text-container">
<h1 class="uol-hero-banner__title">
Lorem Ipsum Dolor sit Amet Consectetural
</h1>
<p class="uol-hero-banner__lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
</div>
<img class="uol-hero-banner__img" src="/placeholders/banner/banner-01.jpg" alt="University campus" loading="lazy">
</div>
</section>
.uol-hero-banner {
width: calc(100vw - 0px);
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background-color: $color-black;
}
.uol-hero-banner--inner {
max-width: 91.125rem;
margin: 0 auto;
display: flex;
height: auto;
flex-direction: column-reverse;
background: $color-black;
color: $color-white;
overflow: hidden;
max-height: 592px;
@include media(">=uol-media-l") {
flex-direction: row;
align-items: center;
padding-right: 100px;
}
@include media(">=uol-media-xl") {
padding-right: 130px;
}
}
.uol-hero-banner__text-container {
padding: $spacing-5 $spacing-4 $spacing-6;
@include media(">=uol-media-m") {
padding: $spacing-6 $spacing-4 $spacing-7 $spacing-4;
}
@include media(">=uol-media-l") {
width: 38%;
padding-left: $spacing-6;
padding-right: $spacing-5;
}
@include media(">=uol-media-xxl") {
padding-left: 0;
}
}
.uol-hero-banner__title {
@extend .uol-typography-heading-2;
margin: 0;
}
.uol-hero-banner__lead {
@extend .uol-typography-paragraph;
margin: $spacing-2 0 0;
}
.uol-hero-banner__img {
// width: calc(100% + #{$spacing-4} * 2);
// margin: 0 -#{$spacing-4};
// height: auto;
@include media(">=uol-media-l") {
width: 62%;
padding: 39px 0 50px 100px;
}
@include media(">=uol-media-xl") {
padding: 0;
}
}
{
"banner": {
"heading_level": "h1",
"title": "Lorem Ipsum Dolor sit Amet Consectetural",
"img": {
"src": "/placeholders/banner/banner-01.jpg",
"alt": "University campus"
},
"lead": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim."
}
}