Skip to content

Commit 28fef64

Browse files
diogo-filipe-costadiogo-filipe-costa
committed
docs(site): refine spacing and typography examples
Carry the QA-driven site example and docs fixes onto the stacked typography branch. Keep the spacing demo legible, fix stale typography examples and copy, refresh updated dates, and remove repeated showcase blocks so the docs remain a reliable validation surface.
1 parent 128d803 commit 28fef64

File tree

15 files changed

+141
-177
lines changed

15 files changed

+141
-177
lines changed

‎packages/site/views/content/a-to-z-of-nhs-health-writing.njk‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% set pageTitle = "A to Z of NHS health writing" %}
22
{% set pageSection = "Content style guide" %}
33
{% set pageDescription = "Words and phrases we use to make our content about health and the NHS easy to understand." %}
4-
{% set dateUpdated = "February 2022" %}
4+
{% set dateUpdated = "March 2026" %}
55
{% set backlog_issue_id = "318" %}
66
{% set unpublished = true %}
77

@@ -21,82 +21,82 @@
2121
<nav class="ofh-u-margin-bottom-16 ofh-u-margin-top-16" id="ofh-nav-a-z" role="navigation" aria-label="A to Z Navigation">
2222
<ol class="ofh-list ofh-u-clear ofh-u-margin-0" role="list">
2323
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
24-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#A">A</a>
24+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#A">A</a>
2525
</li>
2626
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
27-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#B">B</a>
27+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#B">B</a>
2828
</li>
2929
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
30-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#C">C</a>
30+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#C">C</a>
3131
</li>
3232
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
33-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#D">D</a>
33+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#D">D</a>
3434
</li>
3535
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
36-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#E">E</a>
36+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#E">E</a>
3737
</li>
3838
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
39-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#F">F</a>
39+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#F">F</a>
4040
</li>
4141
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
42-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#G">G</a>
42+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#G">G</a>
4343
</li>
4444
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
45-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#H">H</a>
45+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#H">H</a>
4646
</li>
4747
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
48-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#I">I</a>
48+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#I">I</a>
4949
</li>
5050
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
51-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#J">J</a>
51+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#J">J</a>
5252
</li>
5353
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
54-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#K">K</a>
54+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#K">K</a>
5555
</li>
5656
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
57-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#L">L</a>
57+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#L">L</a>
5858
</li>
5959
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
60-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#M">M</a>
60+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#M">M</a>
6161
</li>
6262
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
63-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#N">N</a>
63+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#N">N</a>
6464
</li>
6565
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
66-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#O">O</a>
66+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#O">O</a>
6767
</li>
6868
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
69-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#P">P</a>
69+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#P">P</a>
7070
</li>
7171
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
72-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#Q">Q</a>
72+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#Q">Q</a>
7373
</li>
7474
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
75-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#R">R</a>
75+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#R">R</a>
7676
</li>
7777
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
78-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#S">S</a>
78+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#S">S</a>
7979
</li>
8080
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
81-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#T">T</a>
81+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#T">T</a>
8282
</li>
8383
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
84-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#U">U</a>
84+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#U">U</a>
8585
</li>
8686
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
87-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#V">V</a>
87+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#V">V</a>
8888
</li>
8989
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
90-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#W">W</a>
90+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#W">W</a>
9191
</li>
9292
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
93-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#X">X</a>
93+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#X">X</a>
9494
</li>
9595
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
96-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#Y">Y</a>
96+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#Y">Y</a>
9797
</li>
9898
<li class="ofh-u-margin-bottom-0 ofh-u-float-left ofh-u-margin-right-4">
99-
<a class="ofh-u-font-size-22 ofh-u-padding-8 ofh-u-display-block" href="#Z">Z</a>
99+
<a class="ofh-u-font-size-heading-sm ofh-u-padding-8 ofh-u-display-block" href="#Z">Z</a>
100100
</li>
101101
</ol>
102102
</nav>

‎packages/site/views/design-system/components/card/group-quarter/index.njk‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,25 @@
44
<li class="ofh-grid-column-one-quarter ofh-card-group__item">
55
{{ card({
66
"clickable": "true",
7-
"headingHtml": "<p class=\"ofh-heading-xl ofh-u-font-size-64 ofh-u-margin-bottom-4\">91 <span class=\"ofh-u-visually-hidden\">Applicants</span></p><a href=\"#\" class=\"ofh-card__link ofh-u-font-weight-normal ofh-u-font-size-19 ofh-link--no-visited-state\">Applicants</a>"
7+
"headingHtml": "<p class=\"ofh-heading-xl ofh-u-margin-bottom-4\">91 <span class=\"ofh-u-visually-hidden\">Applicants</span></p><a href=\"#\" class=\"ofh-card__link ofh-u-font-weight-normal ofh-u-font-size-paragraph-md ofh-link--no-visited-state\">Applicants</a>"
88
}) }}
99
</li>
1010
<li class="ofh-grid-column-one-quarter ofh-card-group__item">
1111
{{ card({
1212
"clickable": "true",
13-
"headingHtml": "<p class=\"ofh-heading-xl ofh-u-font-size-64 ofh-u-margin-bottom-4\">23 <span class=\"ofh-u-visually-hidden\">Jobs</span></p><a href=\"#\" class=\"ofh-card__link ofh-u-font-weight-normal ofh-u-font-size-19 ofh-link--no-visited-state\">Jobs</a>"
13+
"headingHtml": "<p class=\"ofh-heading-xl ofh-u-margin-bottom-4\">23 <span class=\"ofh-u-visually-hidden\">Jobs</span></p><a href=\"#\" class=\"ofh-card__link ofh-u-font-weight-normal ofh-u-font-size-paragraph-md ofh-link--no-visited-state\">Jobs</a>"
1414
}) }}
1515
</li>
1616
<li class="ofh-grid-column-one-quarter ofh-card-group__item">
1717
{{ card({
1818
"clickable": "true",
19-
"headingHtml": "<p class=\"ofh-heading-xl ofh-u-font-size-64 ofh-u-margin-bottom-4\">8 <span class=\"ofh-u-visually-hidden\">Services</span></p><a href=\"#\" class=\"ofh-card__link ofh-u-font-weight-normal ofh-u-font-size-19 ofh-link--no-visited-state\">Services</a>"
19+
"headingHtml": "<p class=\"ofh-heading-xl ofh-u-margin-bottom-4\">8 <span class=\"ofh-u-visually-hidden\">Services</span></p><a href=\"#\" class=\"ofh-card__link ofh-u-font-weight-normal ofh-u-font-size-paragraph-md ofh-link--no-visited-state\">Services</a>"
2020
}) }}
2121
</li>
2222
<li class="ofh-grid-column-one-quarter ofh-card-group__item">
2323
{{ card({
2424
"clickable": "true",
25-
"headingHtml": "<p class=\"ofh-heading-xl ofh-u-font-size-64 ofh-u-margin-bottom-4\">33 <span class=\"ofh-u-visually-hidden\">Messages</span></p><a href=\"#\" class=\"ofh-card__link ofh-u-font-weight-normal ofh-u-font-size-19 ofh-link--no-visited-state\">Messages</a>"
25+
"headingHtml": "<p class=\"ofh-heading-xl ofh-u-margin-bottom-4\">33 <span class=\"ofh-u-visually-hidden\">Messages</span></p><a href=\"#\" class=\"ofh-card__link ofh-u-font-weight-normal ofh-u-font-size-paragraph-md ofh-link--no-visited-state\">Messages</a>"
2626
}) }}
2727
</li>
2828
</ul>

‎packages/site/views/design-system/components/skip-link/default/index.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<p class="ofh-body">To view the skip link, tab to this example, or click inside this example and press tab.</p>
1+
<p class="ofh-body-m">To view the skip link, tab to this example, or click inside this example and press tab.</p>
22

33
{% from 'skip-link/macro.njk' import skipLink %}
44

0 commit comments

Comments
 (0)