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" aria-label="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" aria-label="Hero banner">
{{ 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" aria-label="Hero banner">
<div class="uol-hero-banner--inner">
<div class="uol-hero-banner__text-container">
<h1 class="uol-hero-banner__title" aria-label="Hero banner">
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: 100%;
position: relative;
// left: 50%;
// right: 50%;
// margin-left: -50vw;
// margin-right: -50vw;
background-color: $color-black;
}
.uol-hero-banner--inner {
max-width: calc(103.75rem - 64px);
margin: 0 auto;
display: flex;
height: auto;
flex-direction: column-reverse;
background: $color-black;
color: $color-white;
overflow: hidden;
max-height: 592px;
// background: navy;
@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: calc(38% - 64px);
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;
// padding: 0 32px 0 0;
@include media(">=uol-media-l") {
width: 62%;
padding: 40px 0 48px;
}
@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."
}
}