TWE-13 - BE - Key points with icons (Service area page) (#336)

* Add IconKeyPointsBlock

* Add IconKeyPointsBlock to service area page in pattern library

* Add a note about potentially using icon.html instead

* Add icons to sprites.html

* TWE-13 | FE | Icon Keypoints (#347)

* Icon keypoints FE draft

* Icon keypoints FE

* Remove unnecessary class

---------

Co-authored-by: Sherry <[email protected]>

tbx/core/blocks.py

@@ -344,6 +344,46 @@ class Meta:
         template = "patterns/molecules/streamfield/blocks/four_photo_collage_block.html"
 
 
+class KeyPointIconChoice(models.TextChoices):
+    CALENDAR = "key-calendar", "calendar icon"
+    CONVERSATION = "key-conversation", "chat bubbles icon"
+    LIGHTBULB = "key-lightbulb", "lightbulb icon"
+    MAIL = "key-mail", "mail icon"
+    MEGAPHONE = "key-megaphone", "megaphone icon"
+    PEOPLE = "key-people", "people icon"
+    BULLSEYE = "key-bullseye", "target icon"
+    UP_ARROW = "key-up-arrow", "up arrow icon"
+
+
+class IconKeyPointBlock(blocks.StructBlock):
+    icon = blocks.ChoiceBlock(
+        choices=KeyPointIconChoice.choices,
+        default=KeyPointIconChoice.LIGHTBULB,
+        max_length=32,
+    )
+    icon_label = blocks.CharBlock()
+    heading = blocks.CharBlock()
+    description = blocks.RichTextBlock(features=settings.NO_HEADING_RICH_TEXT_FEATURES)
+
+    class Meta:
+        icon = "breadcrumb-expand"
+
+
+class IconKeyPointsBlock(blocks.StructBlock):
+    """Used on the service area page."""
+
+    title = blocks.CharBlock(max_length=255, required=False)
+    intro = blocks.RichTextBlock(
+        features=settings.NO_HEADING_RICH_TEXT_FEATURES, required=False
+    )
+    key_points = blocks.ListBlock(IconKeyPointBlock(label="Key point"), min_num=1)
+
+    class Meta:
+        group = "Custom"
+        icon = "list-ul"
+        template = "patterns/molecules/streamfield/blocks/icon_keypoints_block.html"
+
+
 class IntroductionWithImagesBlock(blocks.StructBlock):
     """Used on the division page."""
 

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

@@ -1,5 +1,6 @@
 
 {% include "patterns/molecules/streamfield/blocks/four_photo_collage_block.html" %}
+{% include "patterns/molecules/streamfield/blocks/icon_keypoints_block.html" %}
 {% include "patterns/molecules/streamfield/blocks/contact_call_to_action.html" %}
 {% include "patterns/molecules/streamfield/blocks/work_chooser_block.html" %}
 {% include "patterns/molecules/streamfield/blocks/pullquote_block.html" %}

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

@@ -171,4 +171,57 @@
     <symbol id="lightbulb-inner" viewBox="0 0 19.2 19.2" fill="none">
         <circle cx="9.6" cy="9.6" r="9.6" fill="var(--color--theme-primary)"/>
     </symbol>
+
+    {# for KeyPointIconChoice - bullseye / target #}
+    <symbol id="key-bullseye" viewBox="0 0 113 106" fill="none">
+        <circle cx="57" cy="53" r="14" fill="var(--color--theme-primary)"/>
+        <circle cx="57" cy="53" r="39.938" stroke="var(--color--theme-primary)" stroke-width="2.125"/>
+        <circle cx="57" cy="53" r="26.938" stroke="var(--color--theme-secondary)" stroke-width="2.125"/>
+    </symbol>
+
+    {# for KeyPointIconChoice - calendar #}
+    <symbol id="key-calendar" viewBox="0 0 113 106" fill="none">
+        <path d="M91.717 16.96H79.391v-5.22a1.73 1.73 0 0 0-.515-1.23 1.772 1.772 0 0 0-2.49 0 1.73 1.73 0 0 0-.516 1.23v5.22H37.13v-5.22a1.73 1.73 0 0 0-.515-1.23 1.772 1.772 0 0 0-2.49 0 1.73 1.73 0 0 0-.516 1.23v5.22H21.283c-1.401 0-2.745.55-3.736 1.529A5.19 5.19 0 0 0 16 22.18v69.6a5.19 5.19 0 0 0 1.547 3.691A5.315 5.315 0 0 0 21.283 97h70.434c1.401 0 2.745-.55 3.736-1.529A5.19 5.19 0 0 0 97 91.78v-69.6a5.19 5.19 0 0 0-1.547-3.691 5.315 5.315 0 0 0-3.736-1.529Zm-70.434 3.48h12.326v5.22c0 .462.185.904.515 1.23a1.772 1.772 0 0 0 2.49 0 1.73 1.73 0 0 0 .516-1.23v-5.22h38.74v5.22c0 .462.185.904.515 1.23a1.772 1.772 0 0 0 2.49 0 1.73 1.73 0 0 0 .516-1.23v-5.22h12.326c.467 0 .915.183 1.246.51.33.326.515.768.515 1.23v15.66H19.522V22.18c0-.462.185-.904.516-1.23.33-.327.778-.51 1.245-.51Zm70.434 73.08H21.283c-.467 0-.915-.183-1.245-.51a1.73 1.73 0 0 1-.516-1.23V41.32h73.956v50.46c0 .462-.185.904-.515 1.23-.33.327-.779.51-1.246.51Zm-31.695-34.8a3.45 3.45 0 0 1-.594 1.933 3.513 3.513 0 0 1-1.58 1.282 3.56 3.56 0 0 1-2.035.198 3.534 3.534 0 0 1-1.803-.952 3.467 3.467 0 0 1-.964-1.782 3.442 3.442 0 0 1 .2-2.01 3.49 3.49 0 0 1 1.297-1.563 3.552 3.552 0 0 1 4.447.433 3.459 3.459 0 0 1 1.032 2.461Zm19.37 0a3.45 3.45 0 0 1-.594 1.933 3.513 3.513 0 0 1-1.58 1.282 3.56 3.56 0 0 1-2.035.198 3.534 3.534 0 0 1-1.804-.952 3.467 3.467 0 0 1-.964-1.782 3.442 3.442 0 0 1 .2-2.01 3.49 3.49 0 0 1 1.298-1.563 3.552 3.552 0 0 1 4.447.433 3.459 3.459 0 0 1 1.031 2.461Zm-38.74 17.4c0 .688-.206 1.361-.593 1.933a3.513 3.513 0 0 1-1.58 1.282 3.56 3.56 0 0 1-2.036.198 3.534 3.534 0 0 1-1.803-.952 3.467 3.467 0 0 1-.964-1.782 3.441 3.441 0 0 1 .2-2.01 3.489 3.489 0 0 1 1.298-1.563 3.552 3.552 0 0 1 4.447.433 3.46 3.46 0 0 1 1.031 2.461Zm19.37 0a3.45 3.45 0 0 1-.594 1.933 3.513 3.513 0 0 1-1.58 1.282 3.56 3.56 0 0 1-2.035.198 3.534 3.534 0 0 1-1.803-.952 3.467 3.467 0 0 1-.964-1.782 3.442 3.442 0 0 1 .2-2.01 3.49 3.49 0 0 1 1.297-1.563 3.552 3.552 0 0 1 4.447.433 3.459 3.459 0 0 1 1.032 2.461Zm19.37 0a3.45 3.45 0 0 1-.594 1.933 3.513 3.513 0 0 1-1.58 1.282 3.56 3.56 0 0 1-2.035.198 3.534 3.534 0 0 1-1.804-.952 3.467 3.467 0 0 1-.964-1.782 3.442 3.442 0 0 1 .2-2.01 3.49 3.49 0 0 1 1.298-1.563 3.552 3.552 0 0 1 4.447.433 3.459 3.459 0 0 1 1.031 2.461Z" fill="var(--color--theme-secondary)"/>
+        <rect x="22" y="23" width="68" height="13" rx="1" fill="var(--color--theme-primary)" style="mix-blend-mode:screen"/>
+        <circle cx="37" cy="76" r="6.5" stroke="var(--color--theme-primary)" style="mix-blend-mode:screen"/>
+    </symbol>
+
+    {# for KeyPointIconChoice - conversation #}
+    <symbol id="key-conversation" viewBox="0 0 113 106" fill="none">
+        <ellipse cx="70.5" cy="63" rx="24.5" ry="25" fill="var(--color--theme-primary)"/>
+        <path d="M98.538 77.497a31.9 31.9 0 0 0-.551-29.94 31.98 31.98 0 0 0-10.538-11.291 32.063 32.063 0 0 0-14.61-5.047 31.95 31.95 0 0 0-7.02-10.738 32.025 32.025 0 0 0-10.683-7.12 32.078 32.078 0 0 0-25.168.43 32.017 32.017 0 0 0-10.433 7.482 31.942 31.942 0 0 0-6.646 10.972 31.893 31.893 0 0 0 1.565 25.071l-3.248 11.02a5.036 5.036 0 0 0 1.275 4.992 5.058 5.058 0 0 0 5.002 1.272l11.043-3.241a32.025 32.025 0 0 0 11.628 3.321 31.947 31.947 0 0 0 7.276 11.056 32.028 32.028 0 0 0 11.139 7.168 32.08 32.08 0 0 0 25.897-1.364l11.043 3.242a5.065 5.065 0 0 0 5.002-1.273 5.034 5.034 0 0 0 1.275-4.992l-3.248-11.02Zm-70.312-9.556-11.695 3.435a1.69 1.69 0 0 1-1.687-.419 1.68 1.68 0 0 1-.42-1.684l3.442-11.671c.12-.422.074-.873-.13-1.261a28.539 28.539 0 0 1-2.681-19.742 28.586 28.586 0 0 1 10.89-16.696 28.69 28.69 0 0 1 37.322 2.755 28.548 28.548 0 0 1 2.747 37.247A28.653 28.653 0 0 1 49.28 70.765a28.7 28.7 0 0 1-19.781-2.682 1.714 1.714 0 0 0-1.273-.143ZM98.13 91.132a1.686 1.686 0 0 1-1.685.42L84.75 88.119a1.718 1.718 0 0 0-1.264.13 28.691 28.691 0 0 1-22.736 1.864 28.662 28.662 0 0 1-10.038-5.9 28.593 28.593 0 0 1-6.854-9.401 32.071 32.071 0 0 0 13.847-3.552 32.003 32.003 0 0 0 10.917-9.212 31.891 31.891 0 0 0 5.359-27.296 28.683 28.683 0 0 1 12.655 5.046 28.609 28.609 0 0 1 8.888 10.31 28.543 28.543 0 0 1-.267 26.42c-.204.387-.25.839-.13 1.26l3.441 11.672a1.68 1.68 0 0 1-.438 1.673Z" fill="var(--color--theme-secondary)"/>
+    </symbol>
+
+    {# for KeyPointIconChoice - lightbulb #}
+    <symbol id="key-lightbulb" viewBox="0 0 113 106" fill="none">
+        <ellipse cx="63" cy="37.5" rx="27" ry="26.5" fill="var(--color--theme-primary)"/>
+        <path d="M77.843 41.886a29.545 29.545 0 0 1-8.025 24.724 7.146 7.146 0 0 0-1.986 5.973l.295 2.102a4.242 4.242 0 0 1-.817 3.146 4.252 4.252 0 0 1-2.805 1.648l-22.456 3.137a4.255 4.255 0 0 1-3.15-.816 4.245 4.245 0 0 1-1.65-2.8l-.295-2.103a7.072 7.072 0 0 0-3.498-5.16 29.598 29.598 0 0 1-9.746-9.052 29.553 29.553 0 0 1-4.793-12.4c-2.32-15.921 8.722-31.01 24.627-33.62a29.798 29.798 0 0 1 22.469 5.394 29.74 29.74 0 0 1 7.92 8.72 29.7 29.7 0 0 1 3.91 11.107Zm-2.807.392a26.903 26.903 0 0 0-10.706-17.94 26.94 26.94 0 0 0-20.334-4.879C29.599 21.83 19.62 35.468 21.722 49.88a26.74 26.74 0 0 0 4.338 11.213 26.779 26.779 0 0 0 8.815 8.184 9.918 9.918 0 0 1 4.886 7.228l.295 2.103a1.415 1.415 0 0 0 1.6 1.206l22.456-3.138a1.417 1.417 0 0 0 1.208-1.598l-.295-2.102a9.946 9.946 0 0 1 2.75-8.316 26.726 26.726 0 0 0 7.261-22.381Z" fill="var(--color--theme-secondary)"/>
+        <path d="M44.64 89.094c-.583-.848-.875-1.272-.872-1.65a1.2 1.2 0 0 1 .383-.869c.276-.257.786-.329 1.805-.471l15.233-2.131c1.02-.143 1.529-.214 1.865-.042a1.2 1.2 0 0 1 .607.73c.106.363-.058.85-.386 1.826l-1.711 5.084c-.138.408-.206.612-.329.772-.109.14-.247.255-.406.336-.179.091-.392.121-.819.181l-10.482 1.466c-.426.06-.64.09-.837.051a1.199 1.199 0 0 1-.483-.212c-.161-.12-.283-.297-.527-.652l-3.041-4.42Z" fill="var(--color--theme-primary)"/>
+    </symbol>
+
+    {# for KeyPointIconChoice - mail #}
+    <symbol id="key-mail" viewBox="0 0 113 106" fill="none">
+        <rect x="23.203" y="35.445" width="77.78" height="48.041" rx="2" transform="rotate(4.159 23.203 35.445)" fill="var(--color--theme-primary)" style="mix-blend-mode:screen"/>
+        <path d="M94.36 16H15.64c-.435 0-.852.175-1.16.486-.307.31-.48.732-.48 1.172v56.368c0 1.32.518 2.585 1.441 3.517A4.893 4.893 0 0 0 18.92 79h72.16a4.893 4.893 0 0 0 3.479-1.457A5.002 5.002 0 0 0 96 74.026V17.658c0-.44-.173-.861-.48-1.172A1.631 1.631 0 0 0 94.36 16ZM55 51.881 19.855 19.316h70.29L55 51.88ZM45.418 47.5 17.28 73.575v-52.15L45.418 47.5Zm2.428 2.25 6.047 5.625a1.63 1.63 0 0 0 2.214 0l6.047-5.604 27.991 25.913h-70.29l27.99-25.933Zm16.736-2.25L92.72 21.425v52.15L64.582 47.5Z" fill="var(--color--theme-secondary)"/>
+    </symbol>
+
+    {# for KeyPointIconChoice - megaphone #}
+    <symbol id="key-megaphone" viewBox="0 0 113 106" fill="none">
+        <path opacity=".8" d="M76.918 88.167 68.787 42.85c-.584-3.251-4.103-5.053-7.081-3.627L4.996 66.381a5 5 0 0 0-2.676 5.78l3.21 12.216a5 5 0 0 0 4.355 3.707l61.631 5.943c3.297.318 5.986-2.6 5.402-5.86Z" fill="var(--color--theme-secondary)"/>
+        <path d="m8.713 57.356 56.685-38.08a4.401 4.401 0 0 1 3.962-.448 4.485 4.485 0 0 1 1.715 1.143c.476.51.829 1.125 1.03 1.794L87.57 73.444a4.52 4.52 0 0 1-.337 3.418 4.423 4.423 0 0 1-3.913 2.35l-34.357-.345 1.684 5.627a4.52 4.52 0 0 1-.337 3.419 4.423 4.423 0 0 1-2.635 2.163l-11.36 3.4a4.423 4.423 0 0 1-3.39-.36 4.52 4.52 0 0 1-2.16-2.671l-3.53-11.793-12.178-.12a4.47 4.47 0 0 1-2.669-.896 4.55 4.55 0 0 1-1.624-2.32l-3.867-12.92a4.528 4.528 0 0 1 .077-2.828 4.447 4.447 0 0 1 1.738-2.211Zm74.612 18.859a1.468 1.468 0 0 0 1.181-.604 1.495 1.495 0 0 0 .225-1.318L69.264 22.615a1.511 1.511 0 0 0-.911-.978 1.472 1.472 0 0 0-1.302.136L37.765 41.447 48.07 75.88l35.255.335ZM33.606 89.594c.114.38.373.7.72.89.347.19.753.233 1.13.12l11.361-3.4c.377-.113.693-.372.878-.721.186-.35.227-.759.112-1.14l-1.947-6.506-15.519-.153 3.265 10.91Zm-20-15.13c.092.311.282.584.541.777.259.193.572.297.893.296l.018-.006 29.903.302-9.773-32.657-24.84 16.685a1.482 1.482 0 0 0-.583.738 1.51 1.51 0 0 0-.026.946l3.866 12.92Z" fill="var(--color--theme-primary)"/>
+        <path d="m99.315 15.314-3.553-4.09a2 2 0 0 0-2.947-.079l-9.898 10.228a2 2 0 0 0-.073 2.703l1.898 2.184a2 2 0 0 0 2.68.311l11.552-8.322a2 2 0 0 0 .341-2.935ZM111.094 39l-1.543-5.193a2 2 0 0 0-2.65-1.29l-13.243 5.216a2 2 0 0 0-1.184 2.43l.824 2.774a2 2 0 0 0 2.31 1.392l13.961-2.798a2 2 0 0 0 1.525-2.53ZM110.021 68.918l1.882-5.08a2 2 0 0 0-1.346-2.623l-13.724-3.772a2 2 0 0 0-2.406 1.234l-1.005 2.714a2 2 0 0 0 1.014 2.5l12.848 6.137a2 2 0 0 0 2.737-1.11Z" fill="var(--color--theme-secondary)"/>
+    </symbol>
+
+    {# for KeyPointIconChoice - people #}
+    <symbol id="key-people" viewBox="0 0 113 106" fill="none">
+        <path d="M103.321 77.754a1.561 1.561 0 0 1-2.134-.445 32.157 32.157 0 0 0-11.719-10.67A32.706 32.706 0 0 0 74 62.788c-.409 0-.801-.16-1.09-.445a1.51 1.51 0 0 1-.453-1.076c0-.403.163-.79.452-1.076.29-.285.682-.445 1.091-.445a18.744 18.744 0 0 0 7.89-1.744 18.485 18.485 0 0 0 6.382-4.89 18.16 18.16 0 0 0 3.662-7.106c.674-2.605.757-5.325.241-7.965a18.125 18.125 0 0 0-3.224-7.309 18.44 18.44 0 0 0-6.075-5.257 18.762 18.762 0 0 0-15.75-.938 1.565 1.565 0 0 1-1.682-.345A1.521 1.521 0 0 1 65 23.11a1.506 1.506 0 0 1 .463-1.073c.144-.14.316-.25.504-.326a21.895 21.895 0 0 1 16.536-.18c5.317 2.105 9.57 6.205 11.82 11.4a21.018 21.018 0 0 1 .183 16.3c-2.134 5.241-6.294 9.433-11.564 11.652 8.565 2.192 15.987 7.464 20.807 14.779a1.5 1.5 0 0 1 .22 1.132c-.08.391-.313.736-.648.96Z" fill="var(--color--theme-primary)"/>
+        <path d="M48.942 60.814a21.494 21.494 0 0 0 10.357-9.863 21.165 21.165 0 0 0 1.804-14.111 21.335 21.335 0 0 0-7.548-12.106A21.737 21.737 0 0 0 40 20c-4.932 0-9.716 1.67-13.555 4.734a21.335 21.335 0 0 0-7.548 12.105A21.165 21.165 0 0 0 20.7 50.952a21.494 21.494 0 0 0 10.357 9.863c-8.557 2.195-15.974 7.477-20.795 14.808a1.518 1.518 0 0 0 .437 2.13 1.553 1.553 0 0 0 2.146-.463 32.261 32.261 0 0 1 11.707-10.698A32.663 32.663 0 0 1 40 62.71a32.663 32.663 0 0 1 15.447 3.88 32.262 32.262 0 0 1 11.707 10.698 1.533 1.533 0 0 0 .975.676 1.559 1.559 0 0 0 1.171-.213 1.535 1.535 0 0 0 .67-.974 1.512 1.512 0 0 0-.233-1.156C64.917 68.29 57.5 63.009 48.942 60.814Zm-27.45-19.458c0-3.622 1.085-7.163 3.119-10.175a18.467 18.467 0 0 1 8.306-6.745 18.692 18.692 0 0 1 10.694-1.042c3.59.707 6.888 2.45 9.477 5.012a18.256 18.256 0 0 1 5.065 9.377A18.135 18.135 0 0 1 57.1 48.364a18.358 18.358 0 0 1-6.817 8.22A18.65 18.65 0 0 1 40 59.67a18.628 18.628 0 0 1-13.082-5.37 18.236 18.236 0 0 1-5.427-12.944Z" fill="var(--color--theme-secondary)"/>
+        <path d="M82 77.5c.552 0 1.01-.463.797-.972-.796-1.897-3.905-3.675-8.877-5.038C68.107 69.896 60.222 69 52 69c-8.222 0-16.107.895-21.92 2.49-4.972 1.363-8.08 3.142-8.877 5.038-.213.51.245.972.797.972h60Z" fill="var(--color--theme-primary)" style="mix-blend-mode:screen"/>
+    </symbol>
+
+    {# for KeyPointIconChoice - up arrow #}
+    <symbol id="key-up-arrow" viewBox="0 0 113 106" fill="none">
+        <path d="M56 88V20.36c0-.883 1.061-1.333 1.696-.718l44.529 43.112c.646.625.203 1.719-.696 1.719H86.838a1 1 0 0 0-1 1V88a1 1 0 0 1-1 1H57a1 1 0 0 1-1-1Z" fill="var(--color--theme-primary)"/>
+        <path d="M78.64 91.66V54.28h19.579a1.78 1.78 0 0 0 1.259-3.039L56.759 8.522a1.78 1.78 0 0 0-2.518 0l-42.719 42.72a1.78 1.78 0 0 0 1.26 3.039H32.36v37.38A5.34 5.34 0 0 0 37.7 97h35.598a5.34 5.34 0 0 0 5.34-5.34ZM37.7 93.44a1.78 1.78 0 0 1-1.78-1.78V52.5a1.78 1.78 0 0 0-1.78-1.78H17.08L55.5 12.3l38.42 38.42H76.86a1.78 1.78 0 0 0-1.78 1.78v39.16a1.78 1.78 0 0 1-1.78 1.78H37.7Z" fill="var(--color--theme-secondary)"/>
+    </symbol>
 </svg>

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

@@ -0,0 +1,25 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+<div class="grid__keypoints keypoints">
+    {% 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__wrapper">
+                    <p class="keypoints__label">{{ key_point.icon_label }}</p>
+                    {% include "patterns/atoms/icons/icon.html" with name=key_point.icon classname="keypoints__icon" %}
+                </div>
+                    {# 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>
+            </li>
+        {% endfor %}
+    </ul>
+</div>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/icon_keypoints_block.yaml

@@ -0,0 +1,37 @@
+context:
+  value:
+    title: Optional section title (Key Points with Icons)
+    intro: '<p>Optional section intro</p>'
+    key_points:
+      - icon: 'key-lightbulb'
+        icon_label: Grow sustainable income
+        heading: Future-proof your funding streams.
+        description: '<p>We help develop reliable income streams through giving, legacy and events, while creating innovative digital products that engage new audiences.</p>'
+      - icon: 'key-bullseye'
+        icon_label: Drive digital growth
+        heading: Expand your reach.
+        description: '<p>We&apos;ll help you improve search visibility to connect with supporters when they need you most, ensuring you stand out in an increasingly competitive landscape.</p>'
+      - icon: 'key-conversation'
+        icon_label: Create high-impact campaigns
+        heading: Turn audiences into advocates.
+        description: '<p>We create eye-catching, data-driven campaigns across digital channels to deliver exceptional results, from emergency appeals to regular giving.</p>'
+      - icon: 'key-people'
+        icon_label: Deepen supporter relationships
+        heading: Transform one-off donors into champions.
+        description: '<p>We&apos;ll help you create meaningful supporter journeys that show the difference they make, inspiring deeper connection to your cause.</p>'
+      - icon: 'key-up-arrow'
+        icon_label: Increase online giving
+        heading: Turn interest into action.
+        description: '<p>We&apos;ll help you create frictionless donation experiences across all channels, from compelling web journeys to seamless payment flows that drive regular giving.</p>'
+      - icon: 'key-calendar'
+        icon_label: Unlock your supporter network
+        heading: Multiply your reach through trusted voices.
+        description: '<p>We&apos;ll help you tap into friends and family networks - where donation rates are highest - to make it easy for supporters to advocate for your cause.</p>'
+      - icon: 'key-megaphone'
+        icon_label: Maximise your CRM investment
+        heading: Make systems work harder.
+        description: '<p>We help you choose and optimise tools for supporter management and stewardship, ensuring your CRM delivers ROI whilst making teams more efficient.</p>'
+      - icon: 'key-mail'
+        icon_label: Transform data into action
+        heading: Make every penny count.
+        description: '<p>We turn your data into insights to improve fundraising and engagement, helping you understand supporter behaviour and enhance performance across all channels.</p>'

tbx/project_styleguide/templates/patterns/styleguide/components/components.html

@@ -139,6 +139,11 @@ <h2 class="underline mt-8 mb-2">Homepage Showcase</h2>
             {% include "patterns/molecules/streamfield/blocks/showcase_block.html" with is_homepage_showcase=True %}
         </div>
 
+        <div>
+            <h2 class="underline mt-8 mb-2">Icon keypoints</h2>
+            {% include "patterns/molecules/streamfield/blocks/icon_keypoints_block.html" %}
+        </div>
+
         <div>
             <h2 class="underline mt-8 mb-2">Featured Case Study</h2>
             {% include "patterns/molecules/streamfield/blocks/featured_case_study.html" %}

tbx/services/blocks.py

@@ -5,6 +5,7 @@
     EventBlock,
     FeaturedCaseStudyBlock,
     FourPhotoCollageBlock,
+    IconKeyPointsBlock,
     ImageWithAltTextBlock,
     LinkColumnsBlock,
     PartnersBlock,
@@ -71,5 +72,6 @@ class ServiceStoryBlock(StoryBlock):
 class ServiceAreaStoryBlock(StoryBlock):
     blog_chooser = BlogChooserBlock()
     four_photo_collage = FourPhotoCollageBlock()
+    key_points = IconKeyPointsBlock(label="Key points with icons")
     link_columns = LinkColumnsBlock()
     work_chooser = WorkChooserBlock()

tbx/static_src/sass/components/_grid.scss

@@ -121,7 +121,8 @@
     }
 
     &__division-signpost,
-    &__featured-services {
+    &__featured-services,
+    &__keypoints {
         grid-column: 2 / span 4;
         margin-bottom: $spacer;
 

tbx/static_src/sass/components/_keypoints.scss

@@ -0,0 +1,68 @@
+@use 'config' as *;
+
+.keypoints {
+    &__list {
+        display: flex;
+        flex-direction: column;
+        gap: $spacer-medium;
+
+        @include media-query(medium) {
+            gap: $spacer;
+        }
+    }
+
+    &__item {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+    }
+
+    &__icon {
+        width: 115px;
+        height: 105px;
+    }
+
+    &__wrapper {
+        border-top: 1px solid var(--color--border);
+        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;
+        }
+    }
+
+    &__label {
+        @include font-size(size-four);
+        font-weight: $weight--semibold;
+        color: var(--color--theme-primary);
+    }
+
+    &__heading {
+        @include font-size(size-two);
+        font-weight: $weight--semibold;
+        color: var(--color--heading);
+        padding: $spacer-mini-plus 0 $spacer-mini;
+        align-self: flex-start;
+        grid-column: 1 / span 12;
+
+        @include media-query(medium) {
+            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;
+        }
+    }
+}

tbx/static_src/sass/main.scss

@@ -36,6 +36,7 @@
 @use 'components/image';
 @use 'components/instagram-gallery';
 @use 'components/intro-with-images';
+@use 'components/keypoints';
 @use 'components/link-columns';
 @use 'components/link';
 @use 'components/listing';