Merge branch 'integration/2024-evolution' into feature/twe-21-seconda…

…ry-nav-be
torchbox · Feb 3, 2025 · 198e869 · 198e869
2 parents eb779af + 4297f3d
commit 198e869
Show file tree

Hide file tree

Showing 23 changed files with 401 additions and 67 deletions.
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -47,7 +47,7 @@ jobs:
       - name: Build site (_site directory name is used for Jekyll compatiblity)
         run: mkdocs build --config-file ./mkdocs.yml --site-dir ./_site
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
 
   deploy:
     needs: build

diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py
@@ -235,6 +235,9 @@ def get_button_file_size(self):
 
 class CallToActionBlock(blocks.StructBlock):
     text = blocks.CharBlock(required=True, max_length=255)
+    description = blocks.RichTextBlock(
+        features=settings.PARAGRAPH_RICH_TEXT_FEATURES, required=False
+    )
     button_text = blocks.CharBlock(max_length=55)
     button_link = blocks.StreamBlock(
         [
@@ -344,6 +347,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."""
 
@@ -614,11 +657,16 @@ def clean(self, value):
 
 class BlogChooserBlock(blocks.StructBlock):
     featured_blog_heading = blocks.CharBlock(max_length=255)
+    intro = blocks.RichTextBlock(
+        features=settings.NO_HEADING_RICH_TEXT_FEATURES, required=False
+    )
     blog_pages = blocks.ListBlock(
         blocks.PageChooserBlock(page_type="blog.BlogPage"),
         min_num=1,
         max_num=3,
     )
+    primary_button = LinkBlock(label="Primary button", required=False)
+    secondary_button = LinkBlock(label="Secondary button", required=False)
 
     def get_context(self, value, parent_context=None):
         context = super().get_context(value, parent_context=parent_context)
@@ -640,11 +688,16 @@ def get_context(self, value, parent_context=None):
 
 class WorkChooserBlock(blocks.StructBlock):
     featured_work_heading = blocks.CharBlock(max_length=255)
+    intro = blocks.RichTextBlock(
+        features=settings.NO_HEADING_RICH_TEXT_FEATURES, required=False
+    )
     work_pages = blocks.ListBlock(
         blocks.PageChooserBlock(page_type=["work.WorkPage", "work.HistoricalWorkPage"]),
         min_num=1,
         max_num=3,
     )
+    primary_button = LinkBlock(label="Primary button", required=False)
+    secondary_button = LinkBlock(label="Secondary button", required=False)
 
     def get_context(self, value, parent_context=None):
         context = super().get_context(value, parent_context)

diff --git a/...de/templates/patterns/_pattern_library_only/streamfield/service_area_story_container.html b/...de/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" %}

diff --git a/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html b/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>
diff --git a/tbx/project_styleguide/templates/patterns/molecules/footer-cta/footer-cta.html b/tbx/project_styleguide/templates/patterns/molecules/footer-cta/footer-cta.html
@@ -3,7 +3,7 @@
         <h2 class="heading heading--two-b heading--semibold">{{ contact_heading }}</h2>
         <p class="footer-cta__subtitle">{{ contact_text }}</p>
         <div class="footer-cta__container">
-            {% include "patterns/atoms/avatar/avatar.html" with avatar=contact_image classes="footer-cta__avatar avatar--footer-cta" %}
+            {% include "patterns/atoms/avatar/avatar.html" with avatar=contact_image classes="footer-cta__avatar avatar--cta" %}
             <div class="footer-cta__content">
                 <div class="footer-cta__text">
                     <p><span class="footer-cta__name">{{ contact_name }} </span>{{ contact_role }}</p>

diff --git a/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.html b/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.html
@@ -1,15 +1,34 @@
 {% load wagtailcore_tags %}
 
+{# Section heading #}
 {% if is_standard_page %}
     <h2 class="heading heading--two-b heading--light grid__heading mb-spacerMedium">{{ value.featured_blog_heading }}</h2>
 {% else %}
     {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.featured_blog_heading classes="motif-heading--two motif-heading--static  motif-heading--half-width   section-title--related-posts" %}
 {% endif %}
 
+{# Section intro #}
+{% if value.intro %}
+    <div class="rich-text">
+        {{ value.intro|richtext }}
+    </div>
+{% endif %}
+
+{# Blog posts #}
 <ul class="grid__related-posts streamfield__related-posts mb-spacerMedium lg:mb-spacerLarge">
     {% for blog_page in value.blog_pages %}
         {% pageurl blog_page.blog_index as blog_index_url %}
         {% pageurl blog_page as blog_post_url %}
         {% include "patterns/molecules/listing/listing--avatar.html" with title=blog_page.title name=blog_page.first_author.name job_title=blog_page.first_author.role link=blog_post_url date=blog_page.date reading_time=blog_page.read_time tags=blog_page.tags avatar=blog_page.first_author.image tag_link_base=blog_index_url %}
     {% endfor %}
 </ul>
+
+{# We expect only up to 1 primary button (`max_num=1` is set in the block definition.) #}
+{% for button in value.primary_button %}
+    <a href="{{ button.value.url }}">{{ button.value.text }}</a>
+{% endfor %}
+
+{# We expect only up to 1 secondary button (`max_num=1` is set in the block definition.) #}
+{% for button in value.secondary_button %}
+    <a href="{{ button.value.url }}">{{ button.value.text }}</a>
+{% endfor %}
diff --git a/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.yaml b/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.yaml
@@ -1,6 +1,15 @@
 context:
   value:
-    featured_blog_heading: Case studies
+    featured_blog_heading: Blog posts
+    # intro: '<p>An injection of fresh ideas, and the occasional challenging opinion, to ignite your fire.</p>'
+    # primary_button:
+    #   - value:
+    #       text: Primary button
+    #       url: '#'
+    # secondary_button:
+    #   - value:
+    #       text: Secondary button
+    #       url: '#'
     blog_pages:
       - title: Explore the potential of AI in content management
         date: 20 Oct 2023

diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/call_to_action.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/call_to_action.html
@@ -2,8 +2,14 @@
 
 <div class="call-to-action grid__call-to-action">
     <div class="call-to-action__inner">
-        <p class="call-to-action__text">{{ value.text }}</p>
-
+        <div class="call-to-action__text">
+            <h2 class="heading heading--two-b">{{ value.text }}</h2>
+            {% if value.description %}
+                <div class="call-to-action__description">
+                    {{ value.description|richtext }}
+                </div>
+            {% endif %}
+        </div>
         {% if value.button_text and value.button_link %}
             <a href="{{ value.get_button_link }}" class="call-to-action__button button">
                 {{ value.button_text }}

diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/call_to_action.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/call_to_action.yaml
@@ -1,6 +1,7 @@
 context:
   value:
     text: Get in touch to learn about our journey to becoming employee-owned
+    # description: '<p>Speak to our team to boost regular giving, improve supporter loyalty, or mobilise people behind your cause.</p>'
     button_text: 'Contact Us'
     button_link:
       - internal_link: