No notes defined.
<div class="notification-banner">
<div class="notification-banner__text-container">
<h2 class="notification-banner__title">{{ title }}</h2>
<p class="notification-banner__lead">{{ lead | safe }}</p>
</div>
<button class="notification-banner__btn-close uol-button uol-icon uol-icon--mdiClose uol-icon--icon-only uol-icon--icon-only--large"></button>
</div>
<div class="notification-banner">
<div class="notification-banner__text-container">
<h2 class="notification-banner__title">This is an example webpage</h2>
<p class="notification-banner__lead">This page is for example purposes only and is not functional. <a href="https://www.leeds.ac.uk/">University of Leeds</a></p>
</div>
<button class="notification-banner__btn-close uol-button uol-icon uol-icon--mdiClose uol-icon--icon-only uol-icon--icon-only--large"></button>
</div>
.notification-banner {
position: sticky;
top: 0;
background: #3976CC;
color: $color-white;
padding: 1rem;
z-index: 1005;
@include media(">=uol-media-m") {
padding: 1.5rem;
}
a {
&:focus {
text-decoration-thickness: 4px;
}
}
}
.notification-banner__text-container {
width: 80%;
max-width: 1254px;
}
.notification-banner__title {
@extend .uol-typography-heading-4;
@extend %uol-font-sans-serif;
margin: 0;
}
.notification-banner__lead {
@extend .uol-typography-paragraph;
margin: 0 !important;
max-width: 1254px;
}
.notification-banner__title + .notification-banner__lead {
margin-top: .25rem !important;
}
.notification-banner__btn-close {
position: absolute !important;
top: 1rem;
right: 1rem;
height: 50px;
width: 50px;
border-radius: 100%;
border: 1px solid #fff;
background: #3976CC;
&:hover {
box-shadow: 0 3px 6px 0 rgba($color-black, 0.15), 0 2px 4px 0 rgba($color-black, 0.12);
}
@include button_focus(-4px, false, $color-black);
}
export const notificationBannerSetup = () => {
const notificationBanners = document.querySelectorAll('.notification-banner');
notificationBanners.forEach( (notificationBanner ) => {
document.querySelector('.notification-banner__btn-close').addEventListener("click", () => {
notificationBanner.remove();
});
});
}
{
"title": "This is an example webpage",
"lead": "This page is for example purposes only and is not functional. <a href=\"https://www.leeds.ac.uk/\">University of Leeds</a>"
}