Icon keypoints FE

torchbox · Jan 21, 2025 · 7bdaf49 · 7bdaf49
1 parent a72dc0e
commit 7bdaf49
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 37 deletions.
diff --git a/...ject_styleguide/templates/patterns/molecules/streamfield/blocks/icon_keypoints_block.html b/...ject_styleguide/templates/patterns/molecules/streamfield/blocks/icon_keypoints_block.html
@@ -1,28 +1,24 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 <div class="grid__keypoints keypoints">
-    <div class="keypoints__header">
-        {% if value.title %}
-            <h2 class="heading heading--two">{{ value.title }}</h2>
-        {% endif %}
-        {% if value.intro %}
-            <div class="text text--five">{{ value.intro|richtext }}</div>
-        {% endif %}
-    </div>
+    {% if value.title %}
+        <h2 class="heading heading--two">{{ value.title }}</h2>
+    {% endif %}
+    {% if value.intro %}
+        <div class="text text--five">{{ value.intro|richtext }}</div>
+    {% endif %}
 
     <ul class="keypoints__list">
         {% for key_point in value.key_points %}
             <li class="keypoints__item">
-                <div class="keypoints__icon-wrapper">
-                    <p class="keypoints__icon-label">{{ key_point.icon_label }}</p>
+                <div class="keypoints__wrapper">
+                    <p class="keypoints__label">{{ key_point.icon_label }}</p>
                     {% include "patterns/atoms/icons/icon.html" with name=key_point.icon classname="keypoints__icon key_point.icon" %}
                 </div>
-                <div class="keypoints__details">
                     {# header title is optional, so heading here may be h2 #}
-                    <{% if value.title %}h3{% else %}h2{% endif %} class="keypoints__heading">
-                    {{ key_point.heading }}
-                    {% if value.title %}</h3>{% else %}</h2>{% endif %}
-                    <div class="keypoints__description">{{ key_point.description|richtext }}</div>
-                </div>
+                <{% if value.title %}h3{% else %}h2{% endif %} class="keypoints__heading">
+                {{ key_point.heading }}
+                {% if value.title %}</h3>{% else %}</h2>{% endif %}
+                <div class="keypoints__description">{{ key_point.description|richtext }}</div>
             </li>
         {% endfor %}
     </ul>

diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss
@@ -102,8 +102,7 @@
 
     &__related-posts-simple,
     &__team-listing,
-    &__stats-group,
-    &__keypoints {
+    &__stats-group {
         grid-column: 2 / span 4;
 
         @include media-query(large) {
@@ -112,7 +111,8 @@
     }
 
     &__division-signpost,
-    &__featured-services {
+    &__featured-services,
+    &__keypoints {
         grid-column: 2 / span 4;
         margin-bottom: $spacer;
 

diff --git a/tbx/static_src/sass/components/_keypoints.scss b/tbx/static_src/sass/components/_keypoints.scss
@@ -4,52 +4,65 @@
     &__list {
         display: flex;
         flex-direction: column;
-        gap: $spacer;
+        gap: $spacer-medium;
+
+        @include media-query(medium) {
+            gap: $spacer;
+        }
     }
 
     &__item {
         display: grid;
-        grid-template-columns: 1fr;
-        column-gap: $spacer-small-plus;
-
-        @include media-query(medium) {
-            grid-template-columns: 1fr 3fr;
-        }
+        grid-template-columns: repeat(12, 1fr);
     }
 
     &__icon {
-        width: 112px;
-        height: 100px;
+        width: 115px;
+        height: 105px;
     }
 
-    &__icon-wrapper {
+    &__wrapper {
         border-top: 1px solid var(--color--border);
-        padding: $spacer-mini-plus $spacer-small 0 0;
+        padding-top: $spacer-mini-plus;
+        grid-column: 1 / span 9;
+        grid-row: 1;
+
+        @include media-query(medium) {
+            margin-right: $spacer-medium;
+            grid-column: 1 / span 3;
+            grid-row: span 2;
+        }
     }
 
-    &__icon-label {
+    &__label {
         @include font-size(size-four);
         font-weight: $weight--semibold;
         color: var(--color--theme-primary);
     }
 
-    &__details {
-        padding-top: $spacer-mini-plus;
-    }
-
     &__heading {
         @include font-size(size-two);
         font-weight: $weight--semibold;
         color: var(--color--heading);
-        margin-bottom: $spacer-mini;
+        padding: $spacer-mini-plus 0 $spacer-mini;
+        align-self: flex-start;
+        grid-column: 1 / span 12;
 
         @include media-query(medium) {
-            margin-bottom: $spacer-mini-plus;
+            padding: 0 0 $spacer-mini-plus;
+            grid-column: 4 / span 6;
+            grid-row: 1;
         }
     }
 
     &__description {
         @include font-size(size-four);
+        font-weight: $weight--light;
         color: var(--color--heading);
+        grid-column: 1 / span 12;
+
+        @include media-query(medium) {
+            grid-column: 4 / span 8;
+        }
     }
 }