UHF-11656 template and styles for number highlights

src/scss/06_components/paragraphs/__index.scss

@@ -16,6 +16,7 @@
 @import 'map';
 @import 'news-archive';
 @import 'news-list';
+@import 'number-highlights';
 @import 'phasing';
 @import 'popular-service-item';
 @import 'popular-services';

src/scss/06_components/paragraphs/_number-highlights.scss

@@ -0,0 +1,55 @@
+.component--number-highlights {
+  .component__content {
+    display: grid;
+    gap: $spacing;
+    grid-template-columns: repeat(1, 1fr);
+
+    @include breakpoint($breakpoint-s) {
+      flex-direction: row;
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @include breakpoint($breakpoint-m) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @include breakpoint($breakpoint-l) {
+      gap: $spacing-and-half;
+    }
+  }
+}
+
+.has-sidebar .main-content .component--number-highlights {
+  .component__content {
+    @include breakpoint($breakpoint-l) {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    @include breakpoint($breakpoint-xl) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}
+
+.numbers-item__container {
+  border-left: $spacing-half solid $color-metro;
+  padding-left: $spacing-and-half;
+  position: relative;
+
+  @include breakpoint($breakpoint-l) {
+    padding-left: $spacing-double;
+  }
+}
+
+.numbers-item__number {
+  font-size: remify(40px);
+  font-weight: $font-weight-bold;
+
+  @include breakpoint($breakpoint-l) {
+    font-size: remify(64px);
+  }  
+}
+
+.numbers-item__text {
+  @include font('body');
+}

templates/paragraphs/paragraph--number-highlights.html.twig

@@ -0,0 +1,15 @@
+{% block paragraph %}
+  {% embed "@hdbt/misc/component.twig" with
+    {
+      component_classes: [ 'component--number-highlights' ],
+      component_title: content.field_number_highlights_title,
+      component_description: content.field_number_highlights_desc,
+    }
+  %}
+    {% block component_content %}
+
+      {{ content.field_number_highlight }}
+
+    {% endblock component_content %}
+  {% endembed %}
+{% endblock paragraph %}