The global banner provides a means of communicating primary messages e.g information on open days.
This component is very similar in structure and configuration to the global marketing banner. Currently both are to be kept in the design system until agreement to replace all old with new. This might be some time off as the newer global banner is for “new style” pages following the web improvement project.
Use whenever a key marketing message is needed at the top of a course page.
Configuration parameters:
The below options detail whether fields are required are optional. The advised pattern is to include a description and link button. Consideration should be given to the function of this component if description or link button aren’t included. The user may think that the component is clickable. Note the component block isn’t a link, only the link button.
| Name | Type | Required/Optional | Description |
|---|---|---|---|
| title | string | Required | heading for the marketing message |
| description | string | Optional | summary of the marketing message |
| link | string | Optional | includes link text and link href |
<div class="uol-global-banner">
<h3 class="uol-global-banner__title">{{ title }}</h3>
{% if description %}<p class="uol-global-banner__description">{{ description }}</p>{% endif %}
{% if button %}{% render '@uol-button', button %}{% endif %}
</div>
<div class="uol-global-banner">
<h3 class="uol-global-banner__title">Mandatory title</h3>
<button class="uol-button uol-button--
" type="link button">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-button {
display: block;
margin-top: $spacing-4;
}
}
.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 0;
max-width: 470px;
@include media(">=uol-media-m") {
max-width: 610px;
}
@include media(">=uol-media-l") {
max-width: 748px;
}
}
{
"title": "Mandatory title",
"button": {
"type": "link button",
"content": "Register your interest",
"url": "/url"
}
}