Update page template examples

CHANGELOG.md

@@ -1,5 +1,9 @@
 # NHS digital service manual Changelog
 
+## Unreleased
+:wrench: **Maintenance**
+- Update page template examples to make the default example size l and inside the grid system
+
 ## 6.3.0 – 17 April 2024
 :new: **New features**
 - Add page on new accessibility requirements: WCAG 2.2

app/views/design-system/styles/page-template/content/index.njk

@@ -56,7 +56,7 @@
 {% block content %}
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-two-thirds">
-      <h1>
+      <h1 class="nhsuk-heading-xl">
         Content page template
       </h1>
     </div>

app/views/design-system/styles/page-template/default/index.njk

@@ -1,5 +1,11 @@
 {% extends "includes/template.njk" %}
 
 {% block content %}
-  <h1>Default page template</h1>
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+      <h1 class="nhsuk-heading-l">
+        Default page template
+      </h1>
+    </div>
+  </div>
 {% endblock %}

app/views/design-system/styles/page-template/index.njk

@@ -49,7 +49,7 @@
 
   <p>This page template combines boilerplate markup and <a href="/design-system/components">components</a> needed for a content page and a transactional page. This includes:</p>
   <ul>
-    <li>JavaScript that adds a <code>.js-enabled</code> class, which components with JavaScript behaviour need</li>
+    <li>JavaScript that adds a <code>js-enabled</code> class, which components with JavaScript behaviour need</li>
     <li>the <a href="/design-system/components/skip-link">skip link</a>, <a href="/design-system/components/header">header</a> and <a href="/design-system/components/footer">footer</a> components</li>
     <li>favicons, and other page metadata</li>
   </ul>
@@ -78,6 +78,8 @@
 
   <p>The content page template example includes navigation and search in the <a href="/design-system/components/header">header</a> and a <a href="/design-system/components/back-link">breadcrumbs</a> component.</p>
 
+  <p>We recommend you use a larger <code>{{ "<h1>" | escape }}</code> heading size using the <code>nhsuk-heading-xl</code> modifier class. Content pages may need more heading levels and the larger size makes the heading hierarchy clearer.
+
   {{ designExample({
     group: "styles",
     item: "page-template",
@@ -98,7 +100,8 @@
     showArguments: false
   }) }}
 
-  <p>Vertical padding is reduced on transactional services using the <code>.nhsuk-main-wrapper--s</code> modifier class. We also recommended you use a smaller page heading size using the <code>.nhsuk-heading-l</code> modifier class.</p>
+  <p>Vertical padding is reduced on transactional services using the <code>nhsuk-main-wrapper--s</code> modifier class.
+  We also recommend you use a smaller <code>{{ "<h1>" | escape }}</code> heading size using the <code>nhsuk-heading-l</code> modifier class.
 
   <h2 id="changing-template-content">Changing template content</h2>