Add display headings

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

releases.yml

@@ -1,3 +1,9 @@
+- version: 4.1.0
+  features:
+    - component: Display headings
+      url: /docs/base/typography#display-headings
+      status: New
+      notes: We've added a new display heading component.
 - version: 4.0.0
   features:
     - component: Migration guide

scss/_base_typography-definitions.scss

@@ -35,6 +35,20 @@
     font-weight: 550;
   }
 
+  %vf-heading-display {
+    @extend %vf-heading-2;
+
+    font-size: #{map-get($font-sizes, display-mobile)}rem;
+    font-weight: 100;
+    line-height: map-get($line-heights, display-mobile);
+    padding-top: 0;
+
+    @media (min-width: $breakpoint-heading-threshold) {
+      font-size: #{map-get($font-sizes, display)}rem;
+      line-height: map-get($line-heights, display);
+    }
+  }
+
   %vf-heading-3 {
     @extend %vf-is-accent;
 

scss/_patterns_headings.scss

@@ -2,6 +2,10 @@
 
 // Default breadcrumbs styling
 @mixin vf-p-headings {
+  .p-heading--display {
+    @extend %vf-heading-display;
+  }
+
   .p-heading--1 {
     @extend %vf-heading-1;
   }

scss/_settings_spacing.scss

@@ -8,6 +8,8 @@ $sp-unit-ratio: 0.5 !default;
 $sp-unit: 1rem * $sp-unit-ratio !default;
 
 $font-sizes: (
+  display: 5,
+  display-mobile: 4,
   h1: 2.5,
   h1-mobile: 2,
   h2: 2.5,
@@ -21,6 +23,8 @@ $font-sizes: (
 ) !default;
 
 $line-heights: (
+  display: 11 * $sp-unit,
+  display-mobile: 9 * $sp-unit,
   h1: 6 * $sp-unit,
   h1-mobile: 5 * $sp-unit,
   h2: 6 * $sp-unit,

templates/docs/base/typography.md

@@ -159,6 +159,14 @@ better suits your document style and tree.
 View example of the mixed headings pattern
 </a></div>
 
+## Display headings
+
+Display headings are reserved for the titles of important bespoke pages. They should be used sparingly by adding the `.p-heading--display` class to a `h1` heading element.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/headings/display/" class="js-example">
+View example of the display headings pattern
+</a></div>
+
 ## Accented headings
 
 The accent colour can be sparingly used to highlight headings to help them stand out from the rest of the page.

templates/docs/examples/patterns/headings/display.html

@@ -0,0 +1,8 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Headings / Display{% endblock %}
+
+{% block standalone_css %}patterns_headings{% endblock %}
+
+{% block content %}
+<h1 class="p-heading--display">Build at speed.<br>Operate at scale.</h1>
+{% endblock %}