Add faded gradient test

alphagov · Nov 11, 2024 · 6c1780d · 6c1780d
1 parent 32e719a
commit 6c1780d
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 1 deletion.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -131,3 +131,28 @@ $govuk-include-default-font-face: false;
     width: 100%;
   }
 }
+
+.herotest--image-fade {
+  .herotest-additional-wrapper {
+    position: relative;
+
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      height: 100%;
+      width: 150px;
+    }
+
+    &:before {
+      left: 0;
+      background: linear-gradient(90deg, rgba(177,180,182,1) 0%, rgba(2,0,36,0) 100%);
+    }
+
+    &:after {
+      right: 0;
+      background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(177,180,182,1) 100%);
+    }
+  }
+}
diff --git a/app/views/full_width_images/index.html.erb b/app/views/full_width_images/index.html.erb
@@ -53,7 +53,7 @@
     <div class="herotest-text-wrapper">
       <div class="govuk-width-container">
         <div class="herotest-text-box">
-          <h1 class="govuk-heading-m">Full width with fixed height</h1>
+          <h1 class="govuk-heading-m">Full width with fixed height (chosen option)</h1>
           <p class="govuk-body"></p>
           <ul class="govuk-list govuk-list--bullet">
             <li>Good: height is fixed</li>
@@ -88,4 +88,28 @@
     </div>
   </div>
 
+  <div class="herotest herotest--fixed-height herotest--image-fade">
+    <div class="herotest-wrapper">
+      <div class="herotest-additional-wrapper">
+        <%= image_tag 'herotest.png', class: 'herotest-image', alt: '' %>
+      </div>
+    </div>
+
+    <div class="herotest-text-wrapper">
+      <div class="govuk-width-container">
+        <div class="herotest-text-box">
+          <h1 class="govuk-heading-m">Full width, fixed height, fade out</h1>
+          <p class="govuk-body"></p>
+          <ul class="govuk-list govuk-list--bullet">
+            <li>Good: height is fixed</li>
+            <li>Good: position of content is known</li>
+            <li>Good: fade out helps reduce jarring edge of image on large screens</li>
+            <li>Bad: won't be full width on largest screens</li>
+            <li>Bad: image content is lost either side as browser gets narrower</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+
 </main>