diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index fceeeb99b..e5f5d094d 100644 --- 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 index 8d2ff43ee..42f467b3e 100644 --- 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/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/service_area_story_container.html b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/service_area_story_container.html index 41b269845..6ca2540b6 100644 --- a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/service_area_story_container.html +++ b/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" %} diff --git a/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html b/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html index 3268ce73c..1035d1179 100644 --- a/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html +++ b/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html @@ -171,4 +171,57 @@ + + {# for KeyPointIconChoice - bullseye / target #} + + + + + + + {# for KeyPointIconChoice - calendar #} + + + + + + + {# for KeyPointIconChoice - conversation #} + + + + + + {# for KeyPointIconChoice - lightbulb #} + + + + + + + {# for KeyPointIconChoice - mail #} + + + + + + {# for KeyPointIconChoice - megaphone #} + + + + + + + {# for KeyPointIconChoice - people #} + + + + + + + {# for KeyPointIconChoice - up arrow #} + + + + 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 index 5c6e8a107..46a6f6a83 100644 --- 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 @@

{{ contact_heading }}

{{ contact_text }}

- {% 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" %}

{{ contact_name }} {{ contact_role }}

diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.html index 075b5d6ae..2e4121238 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.html @@ -1,11 +1,20 @@ {% load wagtailcore_tags %} +{# Section heading #} {% if is_standard_page %}

{{ value.featured_blog_heading }}

{% 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 %} +
+ {{ value.intro|richtext }} +
+{% endif %} + +{# Blog posts #}
    {% for blog_page in value.blog_pages %} {% pageurl blog_page.blog_index as blog_index_url %} @@ -13,3 +22,13 @@

    {% 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 %}

+ +{# We expect only up to 1 primary button (`max_num=1` is set in the block definition.) #} +{% for button in value.primary_button %} + {{ button.value.text }} +{% endfor %} + +{# We expect only up to 1 secondary button (`max_num=1` is set in the block definition.) #} +{% for button in value.secondary_button %} + {{ button.value.text }} +{% endfor %} diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.yaml index 6c0552cdf..f8535139b 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.yaml +++ b/tbx/project_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: '

An injection of fresh ideas, and the occasional challenging opinion, to ignite your fire.

' + # 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 index 531ba6910..481d7bf48 100644 --- 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 @@
-

{{ value.text }}

- +
+

{{ value.text }}

+ {% if value.description %} +
+ {{ value.description|richtext }} +
+ {% endif %} +
{% if value.button_text and value.button_link %} {{ 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 index 863f282e7..0c29d660f 100644 --- 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: '

Speak to our team to boost regular giving, improve supporter loyalty, or mobilise people behind your cause.

' button_text: 'Contact Us' button_link: - internal_link: diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html index 539eb01ad..5bf2266a7 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html @@ -1,26 +1,34 @@ {% load wagtailcore_tags wagtailimages_tags %}
- {% for cta in value.call_to_action %} -

{{ cta.value.text }}

- {% endfor %} - + {# Contact person photo #} {% 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 avatar--cta" %} {% endif %} - {% if value.person %} -

- {% if value.person.name %} - {{ value.person.name }} + {# call_to_action is a required field (streamblock) in the block definition #} + {% with cta=value.call_to_action|first %} + {# CTA main content #} +

+

{{ cta.value.text }}

+ {% if cta.value.description %} +
{{ cta.value.description|richtext }}
{% endif %} +
- {% if value.person.role %} - {{ value.person.role }} - {% endif %} -

- {% endif %} + {# Contact person #} + {% if value.person %} +

+ {% if value.person.name %} + {{ value.person.name }} + {% endif %} + + {% if value.person.role %} + {{ value.person.role }} + {% endif %} +

+ {% endif %} - {% for cta in value.call_to_action %} + {# CTA button #} {% if cta.value.button_text and cta.value.button_link %} {{ cta.value.button_text }} @@ -29,5 +37,5 @@

{{ cta.value {% endif %} {% endif %} - {% endfor %} + {% endwith %}

diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.yaml index fd8e82f43..d177b551a 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.yaml +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.yaml @@ -3,6 +3,7 @@ context: call_to_action: - value: text: Get in touch to learn about our journey to becoming employee-owned + # description: '

Speak to our team to boost regular giving, improve supporter loyalty, or mobilise people behind your cause.

' button_text: 'Contact Us' button_link: True person: diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/icon_keypoints_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/icon_keypoints_block.html new file mode 100644 index 000000000..1f5503dd1 --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/icon_keypoints_block.html @@ -0,0 +1,25 @@ +{% load wagtailcore_tags wagtailimages_tags %} +
+ {% if value.title %} +

{{ value.title }}

+ {% endif %} + {% if value.intro %} +
{{ value.intro|richtext }}
+ {% endif %} + +
    + {% for key_point in value.key_points %} +
  • +
    +

    {{ key_point.icon_label }}

    + {% include "patterns/atoms/icons/icon.html" with name=key_point.icon classname="keypoints__icon" %} +
    + {# 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 %}{% else %}{% endif %} +
    {{ key_point.description|richtext }}
    +
    • + {% endfor %} +
+
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/icon_keypoints_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/icon_keypoints_block.yaml new file mode 100644 index 000000000..223b40f01 --- /dev/null +++ b/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: '

Optional section intro

' + key_points: + - icon: 'key-lightbulb' + icon_label: Grow sustainable income + heading: Future-proof your funding streams. + description: '

We help develop reliable income streams through giving, legacy and events, while creating innovative digital products that engage new audiences.

' + - icon: 'key-bullseye' + icon_label: Drive digital growth + heading: Expand your reach. + description: '

We'll help you improve search visibility to connect with supporters when they need you most, ensuring you stand out in an increasingly competitive landscape.

' + - icon: 'key-conversation' + icon_label: Create high-impact campaigns + heading: Turn audiences into advocates. + description: '

We create eye-catching, data-driven campaigns across digital channels to deliver exceptional results, from emergency appeals to regular giving.

' + - icon: 'key-people' + icon_label: Deepen supporter relationships + heading: Transform one-off donors into champions. + description: '

We'll help you create meaningful supporter journeys that show the difference they make, inspiring deeper connection to your cause.

' + - icon: 'key-up-arrow' + icon_label: Increase online giving + heading: Turn interest into action. + description: '

We'll help you create frictionless donation experiences across all channels, from compelling web journeys to seamless payment flows that drive regular giving.

' + - icon: 'key-calendar' + icon_label: Unlock your supporter network + heading: Multiply your reach through trusted voices. + description: '

We'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.

' + - icon: 'key-megaphone' + icon_label: Maximise your CRM investment + heading: Make systems work harder. + description: '

We help you choose and optimise tools for supporter management and stewardship, ensuring your CRM delivers ROI whilst making teams more efficient.

' + - icon: 'key-mail' + icon_label: Transform data into action + heading: Make every penny count. + description: '

We turn your data into insights to improve fundraising and engagement, helping you understand supporter behaviour and enhance performance across all channels.

' diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.html index 17d962775..bb8cb4d0b 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.html @@ -1,12 +1,21 @@ {% load wagtailcore_tags %} {% if work_pages %} + {# Section heading #} {% if is_standard_page %}

{{ value.featured_work_heading }}

{% else %} {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.featured_work_heading classes="motif-heading--two motif-heading--static motif-heading--half-width section-title--related-posts" %} {% endif %} + {# Section intro #} + {% if value.intro %} +
+ {{ value.intro|richtext }} +
+ {% endif %} + + {# Work pages / Case study pages #}
    {% for work_page in work_pages %} {% pageurl work_page.work_index as work_index_url %} @@ -15,3 +24,13 @@

    {% endfor %}

{% endif %} + +{# We expect only up to 1 primary button (`max_num=1` is set in the block definition.) #} +{% for button in value.primary_button %} + {{ button.value.text }} +{% endfor %} + +{# We expect only up to 1 secondary button (`max_num=1` is set in the block definition.) #} +{% for button in value.secondary_button %} + {{ button.value.text }} +{% endfor %} diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.yaml index 138eca9c5..7aca6b447 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.yaml +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.yaml @@ -1,6 +1,15 @@ context: value: featured_work_heading: Case studies + # intro: '

An injection of fresh ideas, and the occasional challenging opinion, to ignite your fire.

' + # primary_button: + # - value: + # text: Primary button + # url: '#' + # secondary_button: + # - value: + # text: Secondary button + # url: '#' work_pages: - title: Imagining and designing a future product for MQ in 5 days flat client: 'MQ: Transforming Mental Health' diff --git a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html index 2ec0bb4bb..b7d1b5708 100644 --- a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html +++ b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html @@ -15,8 +15,8 @@

Avatar

-

Avatar (footer cta)

- {% include "patterns/atoms/avatar/avatar.html" with classes="avatar--footer-cta" %} +

Avatar (cta)

+ {% include "patterns/atoms/avatar/avatar.html" with classes="avatar--cta" %}
@@ -139,6 +139,11 @@

Homepage Showcase

{% include "patterns/molecules/streamfield/blocks/showcase_block.html" with is_homepage_showcase=True %}
+
+

Icon keypoints

+ {% include "patterns/molecules/streamfield/blocks/icon_keypoints_block.html" %} +
+

Featured Case Study

{% include "patterns/molecules/streamfield/blocks/featured_case_study.html" %} diff --git a/tbx/services/blocks.py b/tbx/services/blocks.py index 24a4a9130..4536c767c 100644 --- a/tbx/services/blocks.py +++ b/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() diff --git a/tbx/static_src/sass/components/_avatar.scss b/tbx/static_src/sass/components/_avatar.scss index 7156e2f3e..80661b2c3 100644 --- a/tbx/static_src/sass/components/_avatar.scss +++ b/tbx/static_src/sass/components/_avatar.scss @@ -21,7 +21,7 @@ height: $avatar-size-145; } - &--footer-cta { + &--cta { width: $avatar-size-100; height: $avatar-size-100; diff --git a/tbx/static_src/sass/components/_call-to-action.scss b/tbx/static_src/sass/components/_call-to-action.scss index 7533139d6..575e35102 100644 --- 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,12 +18,17 @@ } &__text { - @include font-size(size-three); - color: var(--color--heading); + color: var(--color--white); + margin-bottom: $spacer-small; max-width: $streamfield-content-width; } + &__description { + @include font-size(size-four); + } + &__button { + @include font-size('size-five'); margin-top: $spacer-small; @include media-query(large) { diff --git a/tbx/static_src/sass/components/_contact-cta.scss b/tbx/static_src/sass/components/_contact-cta.scss index 3e5d7c1bf..005ca4c63 100644 --- a/tbx/static_src/sass/components/_contact-cta.scss +++ b/tbx/static_src/sass/components/_contact-cta.scss @@ -1,58 +1,78 @@ @use 'config' as *; .contact-cta { + background-color: var(--color--theme-primary); display: grid; - grid-template-columns: repeat(12, 1fr); + grid-template-columns: 1fr; + padding: $spacer-small; + + @include media-query(medium) { + grid-template-columns: auto 1fr; + padding: 50px 70px 50px $spacer-small-plus; + } &__text { - grid-column: 1 / span 11; - margin-bottom: $spacer-mini-plus; + color: var(--color--white); + margin-bottom: $spacer-small; - @include media-query(large) { + @include media-query(medium) { grid-column: 2 / span 10; grid-row: 1; } - } - - &__avatar { - grid-row: 2 / span 3; @include media-query(large) { - margin-right: $spacer-small; - grid-row: 1 / span 2; - grid-column: 1 / span 1; + grid-column: 2 / span 1; } } - &__name { - color: var(--color--heading); - display: block; - font-weight: $weight--semibold; + &__description { + @include font-size(size-four); + } + + &__avatar { + grid-column: span 1; + margin-bottom: $spacer-mini-plus; + + @include media-query(medium) { + grid-row: span 2; + margin-right: $spacer-small-plus; + margin-bottom: 0; + } } &__cite { - margin-top: ($spacer-mini-plus * 0.5); - font-style: normal; - grid-column: 3 / span 10; + @include font-size(size-five); + display: flex; + flex-direction: column; + margin-bottom: $spacer-mini-plus; - @include media-query(large) { - margin-top: 0; + @include media-query(medium) { + flex-direction: row; + flex-wrap: wrap; + grid-column: 2 / span 1; grid-row: 2; - grid-column: 2 / span 5; + margin-bottom: 0; } } + &__name { + color: var(--color--white); + font-weight: $weight--semibold; + } + + &__role { + color: var(--color--black); + } + &__button { - grid-column: 1 / span 12; - margin-top: $spacer-small; - margin-right: auto; + @include font-size('size-five'); + align-self: flex-start; + grid-column: span 1; - @include media-query(large) { - grid-row: 2; - grid-column: 9 / span 4; - margin-top: 0; + @include media-query(medium) { margin-left: auto; - margin-right: $spacer-medium; + grid-column: 9 / span 1; + grid-row: 2; } &:focus { diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss index 816491f3e..8a38c420a 100644 --- a/tbx/static_src/sass/components/_grid.scss +++ b/tbx/static_src/sass/components/_grid.scss @@ -81,16 +81,7 @@ } } - &__call-to-action { - margin-bottom: $spacer-medium; - grid-column: 2 / span 5; - - @include media-query(large) { - margin-bottom: $spacer-large; - grid-column: 4 / span 12; - } - } - + &__call-to-action, &__contact-cta { margin-bottom: $spacer-medium; grid-column: 2 / span 5; @@ -121,7 +112,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 new file mode 100644 index 000000000..3397d3c1a --- /dev/null +++ b/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; + } + } +} diff --git a/tbx/static_src/sass/main.scss b/tbx/static_src/sass/main.scss index 40eb86cfd..3422fa952 100755 --- a/tbx/static_src/sass/main.scss +++ b/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';