From 5d944c3e98c801c738835484194908125357d283 Mon Sep 17 00:00:00 2001
From: Bleddyn Pijpers <bleddyn.pijpers@cloud-studio.co.uk>
Date: Sun, 24 Mar 2024 19:39:43 +0000
Subject: [PATCH] feat: gdh-1461 | Hero link with icon alignment if spread to
 two lines

---
 components/Hero/src/index.scss              | 8 ++++++++
 components/Hero/src/stories/bem.stories.mdx | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/Hero/src/index.scss b/components/Hero/src/index.scss
index bb262d673f..7b512bb42e 100644
--- a/components/Hero/src/index.scss
+++ b/components/Hero/src/index.scss
@@ -101,6 +101,14 @@
     height: calc(100% - (2 * var(--denhaag-hero-theme-page-content-after-height)));
     transform: translateY(var(--denhaag-hero-theme-page-content-transform, 0));
   }
+
+  .denhaag-link--with-icon {
+    align-items: flex-start;
+
+    .denhaag-link__label {
+      margin-block-start: 2px;
+    }
+  }
 }
 
 .denhaag-hero--theme-page .denhaag-hero__text {
diff --git a/components/Hero/src/stories/bem.stories.mdx b/components/Hero/src/stories/bem.stories.mdx
index 675ee37990..d0ad8a8c88 100644
--- a/components/Hero/src/stories/bem.stories.mdx
+++ b/components/Hero/src/stories/bem.stories.mdx
@@ -258,7 +258,7 @@ export const heroImage = (h, w, id = "photo-1513384312027-9fa69a360337") =>
                 />
               </svg>
             </span>
-            <span class="denhaag-link__label">Link with icon before</span>
+            <span class="denhaag-link__label">Link with icon before, which might spread to two lines</span>
           </a>
         </div>
       </div>