Fix alignment of mailing list title (#3973)

* Fix alignment of mailing list title * Update mailing_list_component.html.erb * Update mailing-list.scss * Update mailing-list.scss * Update mailing-list.scss
DFE-Digital · May 13, 2024 · fdfc7fe · fdfc7fe
1 parent 17d0534
commit fdfc7fe
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/app/components/home/mailing_list_component.html.erb b/app/components/home/mailing_list_component.html.erb
@@ -2,7 +2,11 @@
   <div class="home-mailing-list">
     <div class="col col-full-content">
       <div>
-        <h2><i class="icon icon-arrow-black icon--on-yellow"></i> Sign up for our emails</h2>
+        <h2 class="mailing-list-title">
+          <i class="icon icon-arrow-black icon--on-yellow"></i>
+          <span>Sign up for our emails</span>
+        </h2>
+
         <p>
           Everything you need to know to start a career in teaching sent straight into your inbox.
           Tailored to your own situation, you'll get all the latest information as well as advice and support.

diff --git a/app/webpacker/styles/components/mailing-list.scss b/app/webpacker/styles/components/mailing-list.scss
@@ -25,6 +25,21 @@
     position: relative;
   }
 
+  h2.mailing-list-title {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    & > i {
+      flex-basis: auto;
+    }
+
+    & > span {
+      display: inline-block;
+      padding-left: .3em;
+    }
+  }
+
   h2::before {
     content: "";
     background-image: url("../images/content/homepage/dashed-lineV2.svg");