vertically align banner to top

ONSdigital · Jul 23, 2021 · 367a289 · 367a289
1 parent 3a03b8e
commit 367a289
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/components/phase-banner/_macro.njk b/src/components/phase-banner/_macro.njk
@@ -1,9 +1,9 @@
 {% macro onsPhaseBanner(params) %}
     <div class="phase-banner">
         <div class="container{{ ' container--wide' if params.wide }}">
-            <div class="grid grid--flex grid--gutterless grid--vertical-center grid--no-wrap">
+            <div class="grid grid--flex grid--gutterless grid--vertical-top grid--no-wrap">
                 {% if not params.hideBadge %}
-                <div class="grid__col col-auto u-flex-no-grow">
+                <div class="grid__col col-auto u-flex-no-grow u-flex-no-shrink">
                     <h3 class="phase-banner__badge">{{ params.badge | default("Beta") }}</h3>
                 </div>
                 {% endif %}

diff --git a/src/components/phase-banner/_phase-banner.scss b/src/components/phase-banner/_phase-banner.scss
@@ -11,4 +11,8 @@
     padding: 0.4rem;
     text-transform: uppercase;
   }
+
+  &__desc {
+    margin-top: 0.3rem;
+  }
 }