Draft contact CTA redesign

torchbox · Jan 14, 2025 · 51b1920 · 51b1920
1 parent 6af702e
commit 51b1920
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 21 deletions.
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,9 +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>
-        {% if value.description %}{{ value.description|richtext }}{% endif %}
-
+        <div class="call-to-action__text">
+            <h2 class="heading heading--two-b">{{ value.text }}</h2>
+        {% if value.description %}
+        <div class="rich-text">
+        {{ 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/...ct_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html b/...ct_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html
@@ -1,12 +1,15 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 <div class="contact-cta grid__contact-cta">
+    <div class="contact-cta__text">
     {% for cta in value.call_to_action %}
-        <h2 class="contact-cta__text heading heading--three heading--light">{{ cta.value.text }}</h2>
-        {% if cta.value.description %}{{ cta.value.description|richtext }}{% endif %}
+        <h2 class="heading heading--two-b">{{ cta.value.text }}</h2>
+        {% if cta.value.description %}
+        <div class="rich-text">{{ cta.value.description|richtext }}</div>
+        {% endif %}
     {% endfor %}
-
+    </div>
     {% if value.person %}
-        {% include "patterns/atoms/avatar/avatar.html" with avatar=value.person.image classes="contact-cta__avatar avatar--small" %}
+        {% include "patterns/atoms/avatar/avatar.html" with avatar=value.person.image classes="contact-cta__avatar" %}
     {% endif %}
 
     {% if value.person %}

diff --git a/tbx/static_src/sass/components/_call-to-action.scss b/tbx/static_src/sass/components/_call-to-action.scss
@@ -1,7 +1,7 @@
 @use 'config' as *;
 
 .call-to-action {
-    background-color: var(--color--streamfield-background);
+    background-color: var(--color--theme-primary);
     padding: $spacer-small;
 
     @include media-query(large) {
@@ -18,8 +18,8 @@
     }
 
     &__text {
-        @include font-size(size-three);
-        color: var(--color--heading);
+        color: var(--color--white);
+        margin-bottom: $spacer-small;
         max-width: $streamfield-content-width;
     }
 

diff --git a/tbx/static_src/sass/components/_contact-cta.scss b/tbx/static_src/sass/components/_contact-cta.scss
@@ -1,12 +1,15 @@
 @use 'config' as *;
 
 .contact-cta {
+    background-color: var(--color--theme-primary);
     display: grid;
     grid-template-columns: repeat(12, 1fr);
+    padding: $spacer-medium $spacer-medium $spacer-medium $spacer-small-plus;
 
     &__text {
+        color: var(--color--white); 
         grid-column: 1 / span 11;
-        margin-bottom: $spacer-mini-plus;
+        margin-bottom: $spacer-small;
 
         @include media-query(large) {
             grid-column: 2 / span 10;
@@ -24,35 +27,37 @@
         }
     }
 
-    &__name {
-        color: var(--color--heading);
-        display: block;
-        font-weight: $weight--semibold;
-    }
-
     &__cite {
-        margin-top: ($spacer-mini-plus * 0.5);
+        display: flex;
+        gap: $spacer-mini;
         font-style: normal;
         grid-column: 3 / span 10;
 
         @include media-query(large) {
             margin-top: 0;
-            grid-row: 2;
             grid-column: 2 / span 5;
         }
     }
 
+    &__name {
+        color: var(--color--white);
+        display: block;
+        font-weight: $weight--semibold;
+    }
+
+    &__role {
+        color: var(--color--black);
+    }
+
     &__button {
         grid-column: 1 / span 12;
         margin-top: $spacer-small;
-        margin-right: auto;
 
         @include media-query(large) {
             grid-row: 2;
             grid-column: 9 / span 4;
             margin-top: 0;
             margin-left: auto;
-            margin-right: $spacer-medium;
         }
     }
 }