Merge pull request #325 from torchbox/feature/twe-3-homepage-fe

TWE-3 - FE - Home page redesign

Author: albinazs

docs/front-end/grid.md

@@ -36,7 +36,7 @@ Any alignment or spacing rules for a component should be added using BEM syntax
     grid-column: 2 / span 4;
 
     @include media-query(large) {
-      grid-column: 4 / span 9;
+      grid-column: 2 / span 9;
     }
   }
 }

tbx/core/models.py

@@ -179,7 +179,7 @@ def partner_logos(self):
                 " sentence or one paragraph, depending on the presence of punctuation."
             ),
         ),
-        InlinePanel("logos", heading="Partner logos", label="logo", max_num=7),
+        InlinePanel("logos", heading="Partner logos", label="logo", max_num=12),
         FieldPanel("body"),
     ]
 

tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/home_story_container.html

@@ -1,4 +1,5 @@
 
+{% include "patterns/molecules/streamfield/blocks/division_signpost_block.html" %}
 {% include "patterns/molecules/streamfield/blocks/promo_block.html" %}
 {% include "patterns/molecules/streamfield/blocks/event_block.html" %}
 {% include "patterns/molecules/streamfield/blocks/featured_case_study.html" %}

tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/home_story_container.yaml

@@ -1,5 +1,10 @@
 tags:
   srcset_image:
+    # Division signpost
+    'card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt=""':
+      raw: |
+        <img alt="" height="280" sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" src="https://picsum.photos/540/280.webp" srcset="https://picsum.photos/540/280.webp 540w, https://picsum.photos/490/280.webp 490w" width="540">
+
     # Featured case study
     'value.featured_case_study_image format-webp fill-{400x225,800x450,1600x900,1280x720} sizes="(max-width: 1022px) 90vw, (max-width: 1789px) 50vw, (min-width: 1800px) 1120px" class="featured-case-study__image"':
       raw: '<img alt="Jeth-JulyImage_from_iOS" class="featured-case-study__image" height="225" sizes="(max-width: 1022px) 90vw, (max-width: 1789px) 50vw, (min-width: 1800px) 1120px" src="https://picsum.photos/400/225.webp" srcset="https://picsum.photos/400/225.webp 400w, https://picsum.photos/800/450.webp 800w, https://picsum.photos/1600/900.webp 1280w, https://picsum.photos/1280/720.webp 1280w" width="400">'

tbx/project_styleguide/templates/patterns/atoms/icons/background-swirls.html

@@ -0,0 +1,20 @@
+
+{% comment %}
+This SVG doesn't work well when added to sprites.html,
+so we've separated it into its own HTML file.
+{% endcomment %}
+<svg class="swirls__icon" width="100%" height="100%" viewBox="0 0 1512 1239" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+    <g clip-path="url(#clip0_10543_57583)">
+        <g opacity="0.3">
+            <path d="M386.911 -1863.33C335.715 -1864.4 309.973 -1825.29 348.614 -1805.63C581.091 -1689.6 764.122 -1540.76 803.738 -1445.66L775.651 -1448.42C-1042.6 -1611.2 -2290.83 -901.081 -2671.39 -645.024C-2708.31 -620.893 -2672.23 -583.642 -2621 -592.488C-1932.47 -717.168 -1362.24 -589.766 -887.799 -219.967C-801.263 -150.001 -685.412 -71.2064 -566.404 -2.01501C-566.404 -2.01501 -429.339 80.8479 -231.715 165.694L-239.219 168.921C-599.844 266.335 -990.056 257.739 -1201.05 242.958C-1251.61 239.973 -1282.96 276.548 -1251.19 297.513C-1096.7 395.966 -773.901 570.438 -378.259 631.118C579.026 776.719 1691.37 519.197 2157.41 -65.5266C2179.36 -93.1108 2136.37 -119.145 2090.12 -105.844C1935.13 -65.5551 1730.9 -51.9129 1481.24 -76.4417C903.881 -133.165 153.197 -603.464 153.197 -603.464C153.197 -603.464 1156.42 -901.449 1733.77 -844.726C1986.56 -819.89 2169.32 -768.228 2288.96 -700.958C2324.48 -681.606 2381.36 -697.828 2377.71 -725.945C2323.13 -1343.97 1525.24 -1709.86 992.983 -1805.77C758.993 -1848.59 533.626 -1858.83 386.911 -1863.33Z" fill="var(--color--background-swirls-one)" style="mix-blend-mode:screen"/>
+        </g>
+        <g opacity="0.03">
+            <path d="M1066.63 1428.41C1010.06 1409.04 1030.4 1359.86 1096.3 1355.71C1490.02 1333 1870.76 1257.91 2030.55 1179.08L1996.84 1170.62C-166.142 607.248 -639.638 -597.31 -735.315 -1003.92C-745.479 -1042.66 -660.692 -1065.33 -616.277 -1036.09C-26.4958 -637.358 745.804 -536.652 1713.01 -715.358C1892.52 -750.457 2114.53 -782.647 2328.14 -804.022C2328.14 -804.022 2578.06 -831.797 2895.79 -837.387L2891.66 -843.592C2622.27 -1084.39 2190.49 -1231.5 1944.56 -1300.96C1886.3 -1318.16 1897.47 -1367.06 1957.56 -1375.25C2245.48 -1411.59 2808.62 -1456.42 3310.36 -1358.97C4522.85 -1121.97 5406.64 -421.98 5190.13 345.771C5179.88 381.977 5101.44 390.733 5067.88 359.047C4950.16 257.126 4746.5 162.081 4446.82 86.8903C3753.81 -86.9873 2364.75 81.5241 2364.75 81.5241C2364.75 81.5241 3080.95 778.247 3773.96 952.125C4077.39 1028.26 4338.24 1049.75 4550.16 1030.54C4612.32 1025.46 4653.75 1064.29 4615.22 1090.81C3795.76 1684.02 2484.23 1729.8 1791.67 1612.91C1486.41 1562.17 1230.53 1482.46 1066.63 1428.41Z" fill="var(--color--background-swirls-two)" style="mix-blend-mode:screen"/>
+        </g>
+    </g>
+    <defs>
+        <clipPath id="clip0_10543_57583">
+            <rect width="1512" height="1239" />
+        </clipPath>
+    </defs>
+</svg>

tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html

@@ -43,8 +43,8 @@
         <path d="M3.367 10.547a10 10 0 016.772-6.771l2.927-.861a10 10 0 015.644 0l2.927.86a10 10 0 016.772 6.772l.86 2.928a10 10 0 010 5.643l-.86 2.927a10 10 0 01-6.772 6.772l-2.927.861a10 10 0 01-5.644 0l-2.927-.86a10 10 0 01-6.772-6.773l-.86-2.927a10 10 0 010-5.643l.86-2.928z" fill="none"  stroke="currentColor" stroke-width="4"/>
     </symbol>
 
-    <symbol id="logo" viewBox="0 0 500 146" fill="none">
-        <g clip-path="url(#a)"><path class="logo__text" d="M27.65 75.249H0v-17h74.55v17h-27.5v68.3h-19.4v-68.3Z"/><path class="logo__text" d="M58.8 113.499c0-4.45.8-8.6 2.35-12.45 1.6-3.9 3.75-7.25 6.6-10.15 2.8-2.9 6.2-5.2 10.15-6.85 3.95-1.65 8.35-2.5 13.1-2.5s9.1.85 13.05 2.5c3.9 1.65 7.3 3.95 10.1 6.85 2.8 2.9 5 6.3 6.6 10.15 1.6 3.9 2.35 8.05 2.35 12.45 0 4.45-.8 8.6-2.35 12.45-1.6 3.9-3.75 7.25-6.6 10.15-2.8 2.9-6.2 5.2-10.1 6.9-3.9 1.7-8.25 2.55-13.05 2.55-4.8 0-9.15-.85-13.1-2.55-3.95-1.7-7.35-4-10.15-6.9-2.8-2.9-5-6.3-6.6-10.15-1.55-3.9-2.35-8.05-2.35-12.45Zm32.25 16.1c2.3 0 4.35-.45 6.15-1.35 1.8-.9 3.3-2.1 4.55-3.65 1.25-1.55 2.15-3.25 2.75-5.2.6-1.9.9-3.9.9-5.95 0-2.05-.3-4.05-.9-5.95-.6-1.9-1.5-3.6-2.75-5.1-1.25-1.5-2.75-2.7-4.55-3.6-1.8-.9-3.85-1.35-6.15-1.35-2.3 0-4.35.45-6.2 1.35-1.85.9-3.35 2.1-4.55 3.6-1.2 1.5-2.1 3.2-2.75 5.1-.65 1.9-.95 3.9-.95 5.95 0 2.05.3 4.05.95 5.95.65 1.9 1.55 3.65 2.75 5.2 1.2 1.55 2.7 2.75 4.55 3.65 1.85.9 3.9 1.35 6.2 1.35ZM130.85 83.55h17.65l.65 7.55c1.55-2.05 3.65-4 6.35-5.9 2.7-1.85 6.15-2.8 10.4-2.8 1.6 0 3 .1 4.15.25 1.15.15 2.3.45 3.4.9L170.5 99.8c-1.9-.6-4.1-.9-6.65-.9-4.35 0-7.85 1.299-10.55 3.899-2.7 2.6-4.05 6.3-4.05 11.05v29.65h-18.4v-59.95ZM230.75 135.6c-2.45 2.75-5.75 5.05-9.8 7.05-4.05 1.95-8.85 2.95-14.4 2.95-4.85 0-9.25-.8-13.25-2.35-3.95-1.6-7.35-3.8-10.15-6.65-2.8-2.85-5-6.25-6.6-10.15-1.6-3.9-2.35-8.25-2.35-12.9 0-4.45.8-8.6 2.45-12.45 1.6-3.9 3.85-7.25 6.7-10.15 2.85-2.9 6.25-5.2 10.25-6.85 3.95-1.65 8.3-2.5 13-2.5 5.45 0 10.2.9 14.2 2.7 4 1.8 7.35 4.2 10.1 7.15l-11.15 12c-1.35-1.55-3.05-2.9-5-4.1-1.95-1.2-4.55-1.8-7.8-1.8-2.2 0-4.2.45-5.95 1.35-1.75.9-3.25 2.05-4.5 3.5-1.25 1.45-2.15 3.15-2.8 5.05-.65 1.9-.95 3.95-.95 6.1 0 1.95.3 3.9.95 5.8.65 1.9 1.6 3.65 2.8 5.1 1.25 1.5 2.75 2.7 4.5 3.65 1.75.95 3.75 1.4 5.95 1.4 3.15 0 5.8-.6 7.95-1.85 2.15-1.25 3.85-2.6 5.1-4.05l10.75 12ZM235.9 58.2h18.3v31.1c1.95-2.3 4.55-4.05 7.8-5.3s6.5-1.85 9.85-1.85c6.9 0 12.45 2.05 16.55 6.15 4.15 4.1 6.2 10.15 6.2 18.149v37.1h-18.3v-34.3c0-3.5-.9-6.2-2.7-8.2-1.8-1.95-4.2-2.95-7.15-2.95-1.95 0-3.7.35-5.25 1.1-1.55.7-2.8 1.7-3.85 2.9-1 1.2-1.8 2.6-2.3 4.15-.5 1.6-.75 3.25-.75 5.05v32.25h-18.4v-85.35ZM305.15 58.2h18.4V88c1.7-1.8 4.05-3.2 6.95-4.2 2.95-1 5.85-1.55 8.75-1.55 4.25 0 8.05.8 11.4 2.45 3.35 1.6 6.1 3.8 8.4 6.6 2.25 2.75 4 5.95 5.2 9.599 1.2 3.65 1.8 7.5 1.8 11.55 0 4.85-.8 9.35-2.35 13.45-1.6 4.1-3.85 7.6-6.85 10.5-3 2.9-6.65 5.15-11 6.8-4.35 1.6-9.3 2.45-14.85 2.45-5.1 0-9.95-.45-14.5-1.4-4.55-.95-8.35-1.9-11.3-2.95v-83.1h-.05Zm18.4 70.749c1 .45 2.15.75 3.4.95 1.25.2 2.95.3 5.2.3 4.85 0 8.65-1.6 11.3-4.75 2.7-3.15 4.05-7.3 4.05-12.4 0-1.9-.25-3.7-.7-5.5-.45-1.8-1.15-3.4-2.1-4.8a11.48 11.48 0 0 0-3.65-3.45c-1.5-.9-3.3-1.35-5.45-1.35-4.1 0-7.1 1.15-9.1 3.4-1.95 2.25-2.95 5.25-2.95 9v18.6ZM371 113.499c0-4.45.8-8.6 2.35-12.45 1.6-3.9 3.75-7.25 6.6-10.15 2.8-2.9 6.2-5.2 10.15-6.85 3.95-1.65 8.35-2.5 13.1-2.5s9.1.85 13.05 2.5c3.9 1.65 7.3 3.95 10.1 6.85 2.8 2.9 5 6.3 6.6 10.15 1.6 3.9 2.35 8.05 2.35 12.45 0 4.45-.8 8.6-2.35 12.45-1.6 3.9-3.75 7.25-6.6 10.15-2.8 2.9-6.2 5.2-10.1 6.9-3.9 1.7-8.25 2.55-13.05 2.55-4.8 0-9.15-.85-13.1-2.55-3.95-1.7-7.35-4-10.15-6.9-2.8-2.9-5-6.3-6.6-10.15-1.55-3.9-2.35-8.05-2.35-12.45Zm32.25 16.1c2.3 0 4.35-.45 6.15-1.35 1.8-.9 3.3-2.1 4.55-3.65 1.25-1.55 2.15-3.25 2.75-5.2.6-1.9.9-3.9.9-5.95 0-2.05-.3-4.05-.9-5.95-.6-1.9-1.5-3.6-2.75-5.1-1.25-1.5-2.75-2.7-4.55-3.6-1.8-.9-3.85-1.35-6.15-1.35-2.3 0-4.35.45-6.2 1.35-1.85.9-3.35 2.1-4.55 3.6-1.2 1.5-2.1 3.2-2.75 5.1-.65 1.9-.95 3.9-.95 5.95 0 2.05.3 4.05.95 5.95.65 1.9 1.55 3.65 2.75 5.2 1.2 1.55 2.7 2.75 4.55 3.65 1.8.9 3.9 1.35 6.2 1.35Z"/><path class="logo__text" d="m456.25 113.499-21.85-29.95h22l10.75 16 10.85-16h20.1l-21.1 28.65 23 31.35h-22l-11.9-17.25-12 17.25H434l22.25-30.05Z"/><path class="logo__flame" d="M499.25 41.4c-.1-.8-1.15-1-1.55-.3-2.35 4.2-5.65 7.8-7.95 8.9v-.45c-.4-29.05-21.4-44.8-28.8-49.4-.7-.45-1.55.3-1.2 1.05 4.85 10.05 3.05 19.55-5.1 28.8-1.55 1.7-3.25 3.9-4.7 6.1 0 0-1.75 2.55-3.4 6.05l-.1-.1c-3.35-5.1-4.1-11.2-4.25-14.55-.05-.8-1.05-1.1-1.5-.5-2.1 2.9-5.7 8.8-6.25 15.25-1.3 15.6 7.95 31.55 23.85 35.8.75.2 1.3-.6.85-1.25-1.4-2.2-2.25-5.3-2.25-9.3 0-9.25 10-23.3 10-23.3s10 14.05 10 23.3c0 4.05-.85 7.15-2.25 9.35-.4.65.15 1.45.85 1.25 15.45-4 22.7-18.25 23.8-27 .5-3.85.2-7.4-.05-9.7Z"/></g><defs><clipPath id="a"><path class="logo__text" d="M0 0h500v145.6H0z"/></clipPath></defs>
+    <symbol id="logo" viewBox="0 0 168 28" fill="none">
+        <path fill="currentColor" d="M23.385 14.834c-.036-.287-.414-.358-.558-.107-.847 1.505-2.036 2.795-2.864 3.19v-.162C19.819 7.343 12.255 1.698 9.589.05c-.252-.162-.558.107-.432.376 1.747 3.602 1.098 7.007-1.837 10.323-.559.61-1.17 1.398-1.693 2.187 0 0-.63.913-1.225 2.168l-.036-.036C3.16 13.24 2.89 11.053 2.836 9.852c-.019-.287-.379-.394-.541-.18-.757 1.04-2.053 3.155-2.251 5.467-.469 5.591 2.863 11.309 8.59 12.832.27.072.469-.215.307-.448-.505-.789-.81-1.9-.81-3.334 0-3.315 3.601-8.351 3.601-8.351s3.602 5.036 3.602 8.351c0 1.452-.306 2.563-.81 3.352-.144.233.054.52.306.448 5.565-1.434 8.177-6.542 8.573-9.678.18-1.38.072-2.652-.018-3.477ZM162.509 27.645l-4.528-6.954-.962-.71-6.703-9.472h5.526l4.171 6.28.892.674L168 27.645h-5.491Zm-12.55 0 7.024-9.792 2.674 3.157-4.421 6.635h-5.277Zm11.124-7.699-2.745-3.122 4.1-6.315h5.241l-6.596 9.437ZM141.848 28c-1.735 0-3.304-.39-4.706-1.17a9.4 9.4 0 0 1-3.316-3.23c-.808-1.371-1.212-2.897-1.212-4.576 0-1.68.404-3.182 1.212-4.506a8.751 8.751 0 0 1 3.316-3.193c1.402-.804 2.959-1.207 4.67-1.207 1.759 0 3.328.403 4.707 1.207a8.765 8.765 0 0 1 3.316 3.193c.808 1.324 1.212 2.826 1.212 4.506 0 1.68-.404 3.205-1.212 4.576-.809 1.349-1.914 2.425-3.316 3.23-1.379.78-2.936 1.17-4.671 1.17Zm-.036-4.328c.88 0 1.652-.19 2.318-.568a4 4 0 0 0 1.569-1.632c.38-.71.57-1.514.57-2.413 0-.899-.19-1.691-.57-2.377a4.073 4.073 0 0 0-1.569-1.596c-.666-.402-1.438-.604-2.318-.604-.855 0-1.616.202-2.282.604a4.064 4.064 0 0 0-1.568 1.596c-.381.686-.571 1.478-.571 2.377 0 .899.19 1.703.571 2.413.38.686.903 1.23 1.568 1.632.666.378 1.427.568 2.282.568ZM123.024 28c-1.236 0-2.353-.26-3.352-.78a6.301 6.301 0 0 1-2.389-2.13 5.81 5.81 0 0 1-.962-3.015v-6.102c.047-1.112.368-2.106.962-2.98a6.293 6.293 0 0 1 2.425-2.094c.998-.497 2.104-.745 3.316-.745 1.592 0 3.019.39 4.278 1.17 1.26.781 2.247 1.846 2.96 3.194.736 1.348 1.105 2.874 1.105 4.577 0 1.68-.369 3.193-1.105 4.541-.713 1.348-1.7 2.413-2.96 3.193-1.259.78-2.686 1.171-4.278 1.171Zm-.785-4.293c.856 0 1.605-.19 2.247-.568a4.069 4.069 0 0 0 1.533-1.632c.38-.71.57-1.525.57-2.448 0-.899-.19-1.69-.57-2.377a3.788 3.788 0 0 0-1.533-1.632c-.666-.402-1.427-.603-2.282-.603-.856 0-1.617.201-2.282.603-.642.379-1.153.923-1.533 1.632-.357.686-.535 1.479-.535 2.377 0 .923.178 1.739.535 2.448.38.686.903 1.23 1.569 1.632.665.379 1.426.568 2.281.568Zm-8.771 3.938V1.994h4.671V14.73l-.784 4.115.749 4.187v4.612h-4.636ZM106.5 27.645v-9.828c0-1.017-.321-1.844-.963-2.483-.642-.639-1.473-.958-2.496-.958-.665 0-1.259.142-1.782.426a3.21 3.21 0 0 0-1.248 1.206c-.285.52-.428 1.124-.428 1.81l-1.818-.923c0-1.348.285-2.519.855-3.512a6.127 6.127 0 0 1 2.354-2.377c1.022-.568 2.186-.852 3.494-.852 1.307 0 2.46.284 3.458.851a6.135 6.135 0 0 1 2.389 2.342c.57.994.856 2.14.856 3.442v10.856H106.5Zm-11.588 0V1.994h4.671v25.651h-4.67ZM86.76 28c-1.759 0-3.34-.39-4.742-1.17a8.757 8.757 0 0 1-3.316-3.194c-.808-1.348-1.212-2.862-1.212-4.541 0-1.703.404-3.229 1.212-4.577a8.757 8.757 0 0 1 3.316-3.193c1.426-.804 3.007-1.207 4.742-1.207 1.355 0 2.603.249 3.744.746a8.517 8.517 0 0 1 2.959 2.128l-2.995 3.016a4.438 4.438 0 0 0-1.64-1.135c-.618-.26-1.307-.39-2.068-.39-.856 0-1.628.2-2.318.603a4.32 4.32 0 0 0-1.604 1.596c-.38.662-.57 1.455-.57 2.377 0 .899.19 1.703.57 2.413.404.686.939 1.23 1.605 1.632.689.378 1.461.568 2.317.568.784 0 1.486-.13 2.104-.39a4.612 4.612 0 0 0 1.64-1.207l3.03 3.016a9.025 9.025 0 0 1-3.03 2.164c-1.141.497-2.39.745-3.744.745ZM65.355 27.645V10.51h4.67v17.136h-4.67Zm4.67-9.473-1.817-1.206c.213-2.105.832-3.76 1.854-4.967 1.022-1.23 2.495-1.845 4.42-1.845.833 0 1.581.142 2.247.426.665.26 1.272.698 1.818 1.313l-2.923 3.335a2.452 2.452 0 0 0-.963-.639c-.356-.142-.773-.213-1.248-.213-.998 0-1.818.32-2.46.958-.618.615-.927 1.561-.927 2.838ZM54.22 28c-1.736 0-3.305-.39-4.707-1.17a9.403 9.403 0 0 1-3.316-3.23c-.808-1.371-1.212-2.897-1.212-4.576 0-1.68.404-3.182 1.212-4.506a8.757 8.757 0 0 1 3.316-3.193c1.402-.804 2.96-1.207 4.67-1.207 1.76 0 3.328.403 4.707 1.207a8.756 8.756 0 0 1 3.316 3.193c.808 1.324 1.212 2.826 1.212 4.506 0 1.68-.404 3.205-1.212 4.576-.808 1.349-1.914 2.425-3.316 3.23-1.379.78-2.936 1.17-4.67 1.17Zm-.036-4.328c.879 0 1.652-.19 2.317-.568a3.994 3.994 0 0 0 1.569-1.632c.38-.71.57-1.514.57-2.413 0-.899-.19-1.691-.57-2.377a4.064 4.064 0 0 0-1.569-1.596c-.665-.402-1.438-.604-2.317-.604-.856 0-1.617.202-2.282.604a4.064 4.064 0 0 0-1.57 1.596c-.38.686-.57 1.478-.57 2.377 0 .899.19 1.703.57 2.413a4.32 4.32 0 0 0 1.57 1.632c.665.378 1.426.568 2.282.568ZM36.548 27.645V3.235h4.884v24.41h-4.884ZM28.56 6.996V2.703h20.858v4.293H28.56Z"/>
     </symbol>
 
     <symbol id="calendar" viewBox="0 0 54 50" fill="none">

tbx/project_styleguide/templates/patterns/molecules/home-page-hero/home-page-hero.html

@@ -1,6 +1,6 @@
 {% load wagtailcore_tags %}
 <div class="grid__title home-page-hero">
-    <h1>{{ page.hero_heading_1 }} <b>{{ page.hero_heading_2 }}</b></h1>
+    <h1><span class="heading heading--one heading--extralight">{{ page.hero_heading_1 }}</span><br><span class="heading heading--mega">{{ page.hero_heading_2 }}</span></h1>
 
     <div class="employee-owned-icon home-page-hero__icon">
         {% include "patterns/atoms/icons/icon.html" with name="employee-owned-text" classname="employee-owned-icon__text-icon" %}

tbx/project_styleguide/templates/patterns/molecules/partner_logos/partner_logos.html

@@ -3,10 +3,10 @@
 <div class="partners__logos {% if classes %}{{ classes }}{% endif %}">
     {% for partner_logo in partner_logos %}
         <div class="partners__logo-wrapper">
-            {% image partner_logo max-100x90 format-webp as partner_logo_image %}
-            {% image partner_logo max-200x180 format-webp as partner_logo_image_retina %}
+            {% image partner_logo max-107x107 format-webp as partner_logo_image %}
+            {% image partner_logo max-214x214 format-webp as partner_logo_image_retina %}
 
-            <picture class="partners__logo-picture">
+            <picture>
                 <source srcset="{{ partner_logo_image.url }} 1x, {{ partner_logo_image_retina.url }} 2x" />
                 <img src="{{ partner_logo_image.url }}" alt="{{ partner_logo_image.alt }}" class="partners__logo" {% if not is_home_page %}loading="lazy"{% endif %} />
             </picture>

tbx/project_styleguide/templates/patterns/molecules/partner_logos/partner_logos.yaml

@@ -7,11 +7,11 @@ context:
 
 tags:
   image:
-    partner_logo max-100x90 format-webp as partner_logo_image:
+    partner_logo max-107x107 format-webp as partner_logo_image:
       target_var: partner_logo_image
       raw:
-        url: 'https://picsum.photos/100/90.webp'
-    partner_logo max-200x180 format-webp as partner_logo_image_retina:
+        url: 'https://picsum.photos/107/107.webp'
+    partner_logo max-214x214 format-webp as partner_logo_image_retina:
       target_var: partner_logo_image_retina
       raw:
-        url: 'https://picsum.photos/200/180.webp'
+        url: 'https://picsum.photos/214/214.webp'

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/division_signpost_block.html

@@ -1,27 +1,26 @@
 {% load wagtailcore_tags wagtailimages_tags %}
-<div class="grid division-signpost">
-    <div class="grid__division-signpost">
-        {# Section heading #}
-        {% if value.title %}
-            <h2 class="heading heading--two">{{ value.title }}</h2>
-        {% endif %}
-        {# Section intro #}
-        {% if value.intro %}
-            <div class="text text--five division-signpost__intro">{{ value.intro|richtext }}</div>
-        {% endif %}
-        {# Signposting cards #}
-        <ul class="division-signpost__cards">
-            {% for card in value.cards %}
-                <li class="division-signpost__card division-signpost__card--{{ card.card_colour }}">
-                    <div class="division-signpost__text">
-                        <h3 class="heading heading--two division-signpost__heading">{% firstof card.heading card.page.title %}</h3>
-                        <div class="heading heading--four-b heading--light division-signpost__description">{{ card.description|richtext }}</div>
-                    </div>
-                    {% srcset_image card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt="" %}
-                    {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #}
-                    <a href="{% pageurl card.page %}" class="button-link button-link--{{ card.card_colour }}">{{ card.link_text }}&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %}<span class="sr-only"> about {% firstof card.heading card.page.title %} division</span></a>
-                </li>
-            {% endfor %}
-        </ul>
-    </div>
+<div class="grid__division-signpost">
+    {# Section heading #}
+    {% if value.title %}
+        <h2 class="heading heading--two">{{ value.title }}</h2>
+    {% endif %}
+    {# Section intro #}
+    {% if value.intro %}
+        <div class="text text--five division-signpost__intro">{{ value.intro|richtext }}</div>
+    {% endif %}
+    {# Signposting cards #}
+    <ul class="division-signpost__cards">
+        {% for card in value.cards %}
+            <li class="division-signpost__card division-signpost__card--{{ card.card_colour }}">
+                <div class="division-signpost__text">
+                    <h2 class="heading heading--two division-signpost__heading">{% firstof card.heading card.page.title %}</h2>
+                    <div class="heading heading--four-b heading--light division-signpost__description">{{ card.description|richtext }}</div>
+                </div>
+                {% srcset_image card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt="" %}
+                {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #}
+                <a href="{% pageurl card.page %}" class="button-link button-link--{{ card.card_colour }}">{{ card.link_text }}&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %}<span class="sr-only"> about {% firstof card.heading card.page.title %} division</span></a>
+            </li>
+        {% endfor %}
+    </ul>
 </div>
+