diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py
index ba785a347..353d17fac 100644
--- a/tbx/core/blocks.py
+++ b/tbx/core/blocks.py
@@ -973,6 +973,27 @@ class NumericStatisticsBlock(blocks.StructBlock):
class Meta:
icon = "table"
+ label_format = "{headline_number} {description} {further_details}"
+
+
+class NumericStatisticsGroupBlock(blocks.StructBlock):
+ title = blocks.CharBlock(max_length=255, required=False)
+ intro = blocks.RichTextBlock(
+ features=settings.NO_HEADING_RICH_TEXT_FEATURES, required=False
+ )
+ statistics = blocks.ListBlock(
+ NumericStatisticsBlock(),
+ max_num=4,
+ min_num=1,
+ )
+
+ class Meta:
+ group = "Custom"
+ icon = "table"
+ label = "Numeric statistics"
+ template = (
+ "patterns/molecules/streamfield/blocks/numeric_stats_group_block.html"
+ )
class TextualStatisticsBlock(blocks.StructBlock):
diff --git a/tbx/divisions/blocks.py b/tbx/divisions/blocks.py
index 17d2a394e..0fbbced87 100644
--- a/tbx/divisions/blocks.py
+++ b/tbx/divisions/blocks.py
@@ -2,6 +2,7 @@
FeaturedServicesBlock,
FourPhotoCollageBlock,
IntroductionWithImagesBlock,
+ NumericStatisticsGroupBlock,
PartnersBlock,
StoryBlock,
)
@@ -10,5 +11,6 @@
class DivisionStoryBlock(StoryBlock):
four_photo_collage = FourPhotoCollageBlock()
introduction_with_images = IntroductionWithImagesBlock()
+ numeric_statistics = NumericStatisticsGroupBlock()
partners_block = PartnersBlock()
featured_services = FeaturedServicesBlock()
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.html
new file mode 100644
index 000000000..a2f9327cf
--- /dev/null
+++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.html
@@ -0,0 +1,12 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+<div class="grid__stats-group stats-group">
+ {% if value.title %}
+ {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.title classes="motif-heading motif-heading--two-c motif-heading--static stats-group__heading" %}
+ {% endif %}
+ {% if value.intro %}
+ <div class="text text--five stats-group__intro">{{ value.intro|richtext }}</div>
+ {% endif %}
+ {# Stats #}
+ {# Not sure if the impact report page (which uses stats_numeric.html) should be affected. #}
+ {% include "patterns/molecules/streamfield/blocks/stats_numeric.html" with value=value.statistics %}
+</div>
\ No newline at end of file
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.yaml
new file mode 100644
index 000000000..fb09b690f
--- /dev/null
+++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.yaml
@@ -0,0 +1,17 @@
+context:
+ value:
+ title: Lighting little fires
+ intro: 'Torchbox has been supporting charities since the start of the digital era. Some of the stats we're particularly proud of:'
+ statistics:
+ - headline_number: 120
+ description: charities
+ further_details: and counting...
+ - headline_number: 24
+ description: years
+ further_details: working with the sector
+ - headline_number: '263%'
+ description: traffic increase
+ further_details: for an imaginary charity
+ - headline_number: 1
+ description: Guinness record
+ further_details: working with the DEC
diff --git a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html
index 46a84b9ed..3473469d2 100644
--- a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html
+++ b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html
@@ -109,6 +109,11 @@ <h2 class="underline mt-8 mb-2">Stats block textual</h2>
{% include "patterns/molecules/streamfield/blocks/stats_textual.html" %}
</div>
+ <div>
+ <h2 class="underline mt-8 mb-2">Numeric stats group block</h2>
+ {% include "patterns/molecules/streamfield/blocks/numeric_stats_group_block.html" %}
+ </div>
+
<div>
<h2 class="underline mt-8 mb-2">Event block</h2>
{% include "patterns/molecules/streamfield/blocks/event_block.html" %}
diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss
index 1957fe723..14da784e2 100644
--- a/tbx/static_src/sass/components/_grid.scss
+++ b/tbx/static_src/sass/components/_grid.scss
@@ -101,7 +101,8 @@
}
&__related-posts-simple,
- &__team-listing {
+ &__team-listing,
+ &__stats-group {
grid-column: 2 / span 4;
@include media-query(large) {
diff --git a/tbx/static_src/sass/components/_stats-group.scss b/tbx/static_src/sass/components/_stats-group.scss
new file mode 100644
index 000000000..1c5de933f
--- /dev/null
+++ b/tbx/static_src/sass/components/_stats-group.scss
@@ -0,0 +1,20 @@
+@use 'config' as *;
+
+.stats-group {
+ &__heading {
+ margin-bottom: $spacer-mini;
+
+ @include media-query('large') {
+ max-width: 50%;
+ }
+ }
+
+ &__intro {
+ margin-bottom: $spacer-medium;
+
+ @include media-query('large') {
+ margin-bottom: $spacer-half;
+ max-width: 60%;
+ }
+ }
+}
diff --git a/tbx/static_src/sass/components/_stats.scss b/tbx/static_src/sass/components/_stats.scss
index d38fd792a..c1b618370 100644
--- a/tbx/static_src/sass/components/_stats.scss
+++ b/tbx/static_src/sass/components/_stats.scss
@@ -36,10 +36,9 @@
&__number {
@include font-size(size-zero);
- color: var(--color--heading);
+ color: var(--color--theme-primary);
display: block;
- font-weight: $weight--light;
- line-height: 1;
+ font-weight: $weight--semibold;
}
&__text {
@@ -51,14 +50,15 @@
}
&__description {
- @include font-size('size-five');
+ @include font-size('size-four');
+ font-weight: $weight--semibold;
color: var(--color--heading);
display: block;
- margin-bottom: $spacer-mini;
+ line-height: 1;
}
&__details {
- @include font-size('size-eight');
+ @include font-size('size-seven');
display: block;
}
}
diff --git a/tbx/static_src/sass/main.scss b/tbx/static_src/sass/main.scss
index 747c20275..fc56c53e1 100755
--- a/tbx/static_src/sass/main.scss
+++ b/tbx/static_src/sass/main.scss
@@ -44,6 +44,7 @@
@use 'components/markdown-block';
@use 'components/mode-switcher';
@use 'components/motif-heading';
+@use 'components/stats-group';
@use 'components/pagination';
@use 'components/partners';
@use 'components/photo-collage';