No notes defined.
<div class="uol-global-banner">
<h3 class="uol-global-banner__title">{{ title }}</h3>
<p class="uol-global-banner__description">{{ description }}</p>
{% if button %}{% render '@uol-button', button %}{% endif %}
</div>
<div class="uol-global-banner">
<h3 class="uol-global-banner__title">Open days 2025</h3>
<p class="uol-global-banner__description">Be the first to know when bookings open for October open days 2025</p>
<button class="uol-button uol-button--default
" type="submit">Register your interest</button>
</div>
.uol-global-banner {
position: relative;
box-sizing: border-box;
width: 100%;
padding: $spacing-5 $spacing-4;
background: $color-brand-teal;
color: $color-black;
@include media(">=uol-media-l") {
padding: $spacing-5;
}
}
.uol-global-banner__title {
@extend .uol-typography-heading-3;
display: inline-block;
margin: 0;
padding: $spacing-2;
background: $color-white;
}
.uol-global-banner__description {
@extend .uol-typography-paragraph;
font-weight: $font-weight-bold--sans-serif;
margin: $spacing-4 0;
max-width: 470px;
@include media(">=uol-media-m") {
max-width: 610px;
}
@include media(">=uol-media-l") {
max-width: 748px;
}
}
{
"title": "Open days 2025",
"description": "Be the first to know when bookings open for October open days 2025",
"button": {
"style": "default",
"type": "submit",
"content": "Register your interest"
}
}