torchbox · siimonevans · Jan 4, 2024 · Jan 3, 2024 · Jan 3, 2024 · Jan 3, 2024
diff --git a/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html b/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html
@@ -69,4 +69,8 @@
     <symbol id="flame" viewBox="0 0 130.37 156.35">
         <path d="M129.64 82.82c-.2-1.59-2.3-1.96-3.08-.57-4.72 8.4-11.32 15.63-15.95 17.77l.03-.94C109.85 40.98 67.87 9.53 53.1.26c-1.39-.87-3.08.63-2.36 2.11 9.67 20.07 6.11 39.15-10.19 57.56-3.05 3.45-6.46 7.82-9.36 12.24v-.01s-3.48 5.06-6.84 12.09l-.16-.19c-6.73-10.16-8.2-22.44-8.47-29.08-.06-1.59-2.07-2.25-3-.95C8.53 59.86 1.31 71.61.24 84.57c-2.58 31.23 15.9 63.11 47.72 71.64 1.46.39 2.56-1.25 1.75-2.52-2.81-4.41-4.49-10.59-4.49-18.62 0-18.53 19.97-46.64 19.97-46.64s19.97 28.11 19.97 46.64c0 8.09-1.71 14.29-4.55 18.71-.81 1.26.27 2.9 1.73 2.52 30.86-7.96 45.44-36.5 47.64-53.99.78-7.79.24-14.95-.34-19.49z"></path>
     </symbol>
+
+    <symbol id="star" viewBox="0 0 41 41">
+        <circle cx="20.5" cy="20.5" r="19.5" fill="currentColor" stroke="currentColor" stroke-width="2"/><circle fill="currentColor" cx="20.5" cy="20.5" r="17.5" stroke="#fff" stroke-width="2"/><path fill="currentColor" d="M18.023 32.262c.593-6.388 1.262-12.74 3.22-18.727.205-.626 1.89-5.792 1.99-3.576.316 6.942 1.366 13.623 3.512 20.078.613 1.843-.96-.474-1.476-.872-4.365-3.378-9.248-5.646-13.978-8.055-.312-.158-7.464-3.04-4.54-3.04 5.606 0 11.212-.027 16.818 0 3.615.016 13.97-.677 10.78 1.463-5.347 3.588-11.568 5.526-16.371 10.364-1.132 1.14-1.157 1.458.045 2.365Z" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
+    </symbol>
 </svg>
diff --git a/tbx/project_styleguide/templates/patterns/molecules/course-grid/course-grid.html b/tbx/project_styleguide/templates/patterns/molecules/course-grid/course-grid.html
@@ -0,0 +1,12 @@
+{% load wagtailcore_tags %}
+
+<div class="course-grid {% if not page.child_page_listing_heading %}course-grid--margin-top{% endif %}">
+    {% for card in cards %}
+        <div class="course-grid-item">
+            <p class="course-grid-item__sessions"><span>{{ card.sessions }}</span> {% if card.sessions and card.cost %} | {% endif %} {{ card.cost }}</p>
+            <h3 class="course-grid-item__title">{{ card.title }}</h3>
+            <div class="course-grid-item__intro">{{ card.intro|richtext }}</div>
+            <a href="{% pageurl card %}" class="course-grid-item__link">View details</a>
+        </div>
+    {% endfor %}
+</div>
diff --git a/tbx/project_styleguide/templates/patterns/molecules/hero/hero.html b/tbx/project_styleguide/templates/patterns/molecules/hero/hero.html
@@ -4,7 +4,7 @@
         <div class="hero__content">
             <h1 class="hero__title">{{ title|richtext }}</h1>
             {% if sub_title %}
-                <h3 class="hero__sub-title">{{ sub_title|richtext }}</h3>
+                <p class="hero__sub-title">{{ sub_title|richtext }}</p>
             {% endif %}
             {% if desc %}
                 <div class="hero__description">{{ desc|richtext }}</div>

diff --git a/...ject_styleguide/templates/patterns/molecules/streamfield/blocks/course_outline_block.html b/...ject_styleguide/templates/patterns/molecules/streamfield/blocks/course_outline_block.html
@@ -1,14 +1,23 @@
 {% load wagtailcore_tags %}
 
-{% if value.heading %}
-    <h3>{{ value.heading }}</h3>
-{% endif %}
+<div class="course-outline">
+    {% if value.heading %}
+        <h2 class="course-outline__heading">{{ value.heading }}</h2>
+    {% endif %}
 
-<ol>
-    {% for block in value.course_outline %}
-        <li>
-            <h2>{{ block.title }}</h2>
-            {{ block.text|richtext }}
-        </li>
-    {% endfor %}
-</ol>
+    <ol class="course-outline__list">
+        {% for block in value.course_outline %}
+            <li class="course-outline__list-item">
+                <svg class="course-outline__icon" aria-hidden="true">
+                    <use xlink:href="#star" />
+                </svg>
+                <div>
+                    <h3 class="course-outline__sub-heading" aria-label="{{ block.title }}">
+                        {{ forloop.counter }}. {{ block.title }}
+                    </h3>
+                    {{ block.text|richtext }}
+                </div>
+            </li>
+        {% endfor %}
+    </ol>
+</div>
diff --git a/...t_styleguide/templates/patterns/molecules/streamfield/blocks/external_link_cta_block.html b/...t_styleguide/templates/patterns/molecules/streamfield/blocks/external_link_cta_block.html
@@ -1,4 +1,13 @@
-<a href="{{ value.link}}">
-    <h3>{{ value.heading }}</h3>
-    <p>{{ value.text }}</p>
-</a>
+<div class="external-link-cta-wrapper">
+    <a class="external-link-cta" href="{{ value.link }}">
+        <div class="external-link-cta__overflow-hider">
+            <div class="external-link-cta__swish-background"></div>
+        </div>
+        <div class="external-link-cta__title-container">
+            <p class="external-link-cta__title">{{ value.heading }}</p>
+            <div class="external-link-cta__chevron" aria-hidden="true"></div>
+        </div>
+        <p class="external-link-cta__text">{{ value.text }}</p>
+    </a>
+</div>
+
diff --git a/tbx/project_styleguide/templates/patterns/pages/courses/course_detail_page.html b/tbx/project_styleguide/templates/patterns/pages/courses/course_detail_page.html
@@ -5,23 +5,24 @@
 
     <div class="title-block">
         <div class="title-block__container">
-            <h1 class="title-block__heading">
+            <h1 class="title-block__heading title-block__heading--course">
                 {{ page.strapline|richtext }}
             </h1>
-            {% if page.sessions or page.cost %}
-                <h2>
-                    {{ page.sessions }}
-                    {% if page.cost and page.sessions %} | {% endif %} {{ page.cost }}
-                </h2>
-            {% endif %}
+            <div class="title-block__course-detail">
+                {% if page.sessions %}
+                    <p class="title-block__sessions">
+                        {{ page.sessions }}
+                        {% if page.cost and page.sessions %} <span aria-hidden="true"></span> {% endif %} {{ page.cost }}
+                    </p>
+                {% endif %}
 
-            <div class="">{{ page.intro|richtext }}</div>
-            <a class="pullquote__link" href="{{ page.header_link }}">
-                {{ page.header_link_text }}
-            </a>
+                <div class="title-block__intro">{{ page.intro|richtext }}</div>
+                <a class="title-block__link" href="{{ page.header_link }}">
+                    {{ page.header_link_text }}
+                </a>
+            </div>
         </div>
     </div>
 
     {% include_block page.body %}
-
 {% endblock %}
diff --git a/tbx/project_styleguide/templates/patterns/pages/courses/course_landing_page.html b/tbx/project_styleguide/templates/patterns/pages/courses/course_landing_page.html
@@ -3,17 +3,16 @@
 
 {% block content %}
 
-    {% include "patterns/molecules/hero/hero.html" with title=page.strapline desc=page.intro sub_title=page.sub_title %}
+    {% include "patterns/molecules/hero/hero.html" with title=page.strapline desc=page.intro sub_title=page.sub_title classes='hero--course-landing' %}
 
-    {% if page.child_page_listing_heading %}
-        <h3>{{ page.child_page_listing_heading }}</h3>
-    {% endif %}
+    <div class="proposition-section">
+        {% if page.child_page_listing_heading %}
+            <h2 class="course-grid-title">{{ page.child_page_listing_heading }}</h2>
+        {% endif %}
 
-    {% for subpage in subpages %}
-        {{ subpage.sessions }} {% if subpage.sessions and subpage.cost %} | {% endif %} {{ subpage.cost }}
-        {{ subpage.title }}
-        {{ subpage.intro|richtext }}
-        <a href="{% pageurl subpage %}">View details</a>
-    {% endfor %}
+        {% if subpages %}
+            {% include "patterns/molecules/course-grid/course-grid.html" with cards=subpages %}
+        {% endif %}
+    </div>
 
 {% endblock %}
diff --git a/tbx/static_src/sass/abstracts/_variables.scss b/tbx/static_src/sass/abstracts/_variables.scss
@@ -17,7 +17,9 @@
     --color--light-grey-accessible: #757575;
     --color--grey: #444;
     --color--grey-dark: #333;
+    --color--grey-bg: #fafafa;
     --color--grey-border: #e6e4ea;
+    --color--grey-border-dark: #e9e7ee;
     --color--white: #fff;
     --color--white-translucent: rgba(255, 255, 255, 0.8);
     --color--black-translucent: rgba(0, 0, 0, 0.05);

diff --git a/tbx/static_src/sass/components/_course-grid-item.scss b/tbx/static_src/sass/components/_course-grid-item.scss
@@ -0,0 +1,76 @@
+.course-grid-item {
+    padding: 25px;
+    background-color: var(--color--grey-bg);
+    border: 1px solid var(--color--grey-border-dark);
+
+    @include media-query(medium-large) {
+        padding: 50px;
+    }
+
+    &__sessions {
+        @include font-size(xs);
+        text-transform: uppercase;
+        color: var(--color--grey);
+        font-weight: $weight--bold;
+        letter-spacing: 2px;
+        margin-bottom: 10px;
+
+        span {
+            color: var(--color--coral);
+        }
+    }
+
+    &__title {
+        @include font-size(l);
+        line-height: 32px;
+        margin: 15px 0 10px;
+
+        @include media-query(large) {
+            line-height: 44px;
+        }
+    }
+
+    &__intro {
+        @include font-size(s);
+        line-height: 27px;
+        font-weight: $weight--normal;
+
+        p {
+            color: var(--color--grey-dark);
+        }
+    }
+
+    &__link {
+        @include font-size(s);
+        line-height: 27px;
+        color: var(--color--indigo);
+        font-weight: $weight--bold;
+        display: inline-block;
+        position: relative;
+        text-decoration: underline;
+        text-decoration-color: var(--color--coral);
+        text-underline-offset: 5px;
+        border: 0;
+
+        &:focus,
+        &:hover {
+            text-decoration-thickness: 5px;
+        }
+
+        &::after {
+            content: '';
+            display: block;
+            position: absolute;
+            right: -21px;
+            top: 5px;
+            width: 15px;
+            height: 14px;
+            background-color: var(--color--coral);
+            clip-path: $arrow-path;
+
+            @include hcm() {
+                filter: invert(1);
+            }
+        }
+    }
+}
diff --git a/tbx/static_src/sass/components/_course-grid.scss b/tbx/static_src/sass/components/_course-grid.scss
@@ -0,0 +1,17 @@
+.course-grid-title {
+    @include font-size(ml);
+    margin-bottom: 0;
+}
+
+.course-grid {
+    display: grid;
+    gap: 30px;
+    margin: 25px 0 100px;
+
+    @include media-query(medium-large) {
+        grid-template-columns: repeat(2, 1fr);
+        max-width: 1280px;
+        gap: 50px;
+        margin: 50px 0 120px;
+    }
+}
diff --git a/tbx/static_src/sass/components/_course-outline.scss b/tbx/static_src/sass/components/_course-outline.scss
@@ -0,0 +1,70 @@
+.course-outline {
+    @include streamblock-padding();
+    margin-bottom: 75px;
+
+    &__heading {
+        @include font-size(l);
+        line-height: 38px;
+        margin: 0 0 40px;
+    }
+
+    &__sub-heading {
+        @include font-size(ml);
+        line-height: 33px;
+        margin-top: 0;
+
+        @include media-query(large) {
+            margin-top: 5px;
+        }
+    }
+
+    &__list {
+        max-width: 720px;
+    }
+
+    &__icon {
+        flex-shrink: 0;
+        color: var(--color--coral);
+        width: 30px;
+        height: 30px;
+
+        @include media-query(large) {
+            width: 41px;
+            height: 41px;
+        }
+    }
+
+    // Override existing specificity
+    &__list-item {
+        display: flex;
+        margin-top: 35px;
+        gap: 15px;
+
+        @include media-query(large) {
+            gap: 25px;
+        }
+
+        .streamfield & {
+            ul {
+                list-style: disc;
+                padding-left: 25px;
+            }
+        }
+    }
+
+    .streamfield & {
+        li {
+            padding: 0;
+
+            &::before {
+                display: none;
+            }
+        }
+
+        p {
+            &:last-of-type {
+                margin-bottom: 0;
+            }
+        }
+    }
+}