diff --git a/src/patterns/03-layouts/_index.scss b/src/patterns/03-layouts/_index.scss
index 564579af6727d2028cc8e8839c8b3c82086e7fce..76058bb6ea4791bf2dccdf8c83d4d33351092705 100644
--- a/src/patterns/03-layouts/_index.scss
+++ b/src/patterns/03-layouts/_index.scss
@@ -17,3 +17,4 @@
@forward 'site-container/site-container';
@forward 'site-footer/site-footer';
@forward 'special-alert/special-alert';
+@forward 'emergency-notification/emergency-notification';
diff --git a/src/patterns/03-layouts/emergency-notification/_emergency-notification.scss b/src/patterns/03-layouts/emergency-notification/_emergency-notification.scss
new file mode 100644
index 0000000000000000000000000000000000000000..75a1c7c3081439a7bd28cf528a765a88a98985f8
--- /dev/null
+++ b/src/patterns/03-layouts/emergency-notification/_emergency-notification.scss
@@ -0,0 +1,115 @@
+@use '../../01-core' as *;
+
+.uw-emergency-notification {
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ position: relative;
+ width: 100%;
+ // Puts the content at z-index 3
+ z-index: var(--layer-content);
+ &__content {
+ @include uw-contained-width(var(--layout-max-width-narrow));
+
+ @media(min-width: $screen-xl) {
+ // Reset the width so we use all the width when we have room to.
+ @include uw-contained-width(var(--layout-max-width));
+ }
+ .block-uw-cbl-emergency-notification {
+ background: #f0f0f0;
+ border: 2px solid #96172e;
+ margin: var(--size-2) 0;
+ padding: var(--size-2);
+
+ // Prevent excess space at top from elements that have a margin-top.
+ > *:first-child {
+ margin-top: 0;
+ }
+
+ // Prevent excess space at bottom from elements that have a margin-bottom.
+ > *:last-child {
+ margin-bottom: 0;
+ }
+ p:last-of-type {
+ margin-bottom: 0;
+ }
+ .emergency-notification__heading {
+ @include heading-2();
+ }
+ .special-alert__date {
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-0);
+ margin: var(--size-05) 0;
+ }
+ }
+ }
+ &.special-alert {
+ background: var(--uw-alert);
+ max-width: 100%;
+ .uw-emergency-notification__content {
+ display: grid;
+ gap: var(--size-2);
+ grid-template-columns: 100%;
+ margin: var(--size-4) auto;
+ max-width: 80%;
+ padding: 0;
+ text-align: center;
+ .uw-icon {
+ align-self: center;
+ height: var(--size-8);
+ margin-left: auto;
+ margin-right: auto;
+ width: var(--size-8);
+ svg {
+ fill: var(--uw-white);
+ height: var(--size-8);
+ width: var(--size-8);
+ }
+ }
+ @media(min-width: $screen-md) {
+ @include uw-contained-width(var(--layout-max-width));
+ grid-template-columns: var(--size-10) auto;
+ margin: var(--size-2) auto;
+ padding: 0 var(--size-2);
+ text-align: left;
+ }
+ .block-uw-cbl-emergency-notification{
+ border: 0 solid transparent;
+ background-color: var(--uw-alert);
+ padding: var(--size-1);
+ margin: 0;
+ * {
+ color: var(--uw-white);
+ }
+ .emergency-notification__heading {
+ @include heading-2();
+ color: var(--uw-white);
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-2);
+ margin: var(--size-1) 0 var(--size-2) 0;
+ line-height: 1.25;
+ }
+ .emergency-notification__date {
+ background: var(--uw-white);
+ color: var(--uw-alert);
+ display: inline-block;
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-1);
+ padding: var(--size-05) var(--size-1);
+ text-transform: uppercase;
+ margin: var(--size-105) 0 0 0;
+ }
+ .emergency-notification__content {
+ * {
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-1);
+ }
+ p {
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/patterns/03-layouts/emergency-notification/emergency-notification.twig b/src/patterns/03-layouts/emergency-notification/emergency-notification.twig
new file mode 100644
index 0000000000000000000000000000000000000000..dd216aad6c0aff70a782ea06c24bdaeb6777121e
--- /dev/null
+++ b/src/patterns/03-layouts/emergency-notification/emergency-notification.twig
@@ -0,0 +1,29 @@
+<div class="uw-emergency-notification{% if emergency_notification.display_style == 'priority' %} special-alert{% endif %}">
+ <div role="complementary" class="uw-emergency-notification__content">
+ {% if emergency_notification.display_style == 'priority' %}
+ {% include '@components/icon/icon.twig' with {
+ 'name': 'special-alert',
+ } %}
+ {% endif %}
+ {% if pattern_lab %}
+ <div class="block-uw-cbl-emergency-notification">
+ {% endif %}
+ {% if emergency_notification.date %}
+ <div class="emergency-notification__date">
+ {{ emergency_notification.date }}
+ </div>
+ {% endif %}
+ {% if emergency_notification.heading %}
+ <div class="emergency-notification__heading">
+ {{ emergency_notification.heading }}
+ </div>
+ {% endif %}
+ <div class="emergency-notification__content">
+ {{ emergency_notification.content }}
+ </div>
+ {% if pattern_lab %}
+ </div>
+ {% endif %}
+ </div>
+</div>
+
diff --git a/src/patterns/03-layouts/site-container/_site-container.scss b/src/patterns/03-layouts/site-container/_site-container.scss
index 824f67431fcee89fe2ec9ea3fc52f1213a138044..597b97b4412f50f59d9081227b2bc39cb2dfeff7 100644
--- a/src/patterns/03-layouts/site-container/_site-container.scss
+++ b/src/patterns/03-layouts/site-container/_site-container.scss
@@ -13,7 +13,7 @@
// Puts the header at z-index 4
z-index: var(--layer-header);
}
- .uw-special-alert {
+ .uw-emergency-notification {
grid-column: 1 / 2;
grid-row: 2 / 3;
position: relative;
@@ -21,7 +21,7 @@
// Puts the content at z-index 3
z-index: var(--layer-content);
}
- .uw-highlighted {
+ .uw-special-alert {
grid-column: 1 / 2;
grid-row: 3 / 4;
position: relative;
@@ -29,10 +29,18 @@
// Puts the content at z-index 3
z-index: var(--layer-content);
}
+ .uw-highlighted {
+ grid-column: 1 / 2;
+ grid-row: 4 / 5;
+ position: relative;
+ width: 100%;
+ // Puts the content at z-index 3
+ z-index: var(--layer-content);
+ }
.uw-main {
grid-column: 1 / 2;
- grid-row: 4 / 5;
+ grid-row: 5 / 6;
min-height: 60vh;
position: relative;
width: 100%;
@@ -40,7 +48,7 @@
.uw-footer {
grid-column: 1 / 2;
- grid-row: 5 / 6;
+ grid-row: 6 / 7;
position: relative;
// Puts the footer at z-index 2
z-index: var(--layer-footer);
diff --git a/src/patterns/03-layouts/site-container/site-container.twig b/src/patterns/03-layouts/site-container/site-container.twig
index 37bc52f853d78e524e6cc6aca81b79ee5dae9370..320c8aa3afcc298e9d5caa2822492dfc36b5b76f 100644
--- a/src/patterns/03-layouts/site-container/site-container.twig
+++ b/src/patterns/03-layouts/site-container/site-container.twig
@@ -7,6 +7,9 @@
{% include "@layouts/header/header.twig"%}
{% endblock %}
+ {% block emergencynotification %}
+ {% endblock %}
+
{% block specialalert %}
{% endblock %}