diff --git a/examples/wagtail/core/jinja/home_page.jinja b/examples/wagtail/core/jinja/home_page.jinja
index e8a57ab46..7dfa09683 100644
--- a/examples/wagtail/core/jinja/home_page.jinja
+++ b/examples/wagtail/core/jinja/home_page.jinja
@@ -20,6 +20,7 @@
 {% from 'combo-box/combo-box.html' import govieComboBox %}
 {% from 'alert/alert.html' import govieAlert %}
 {% from 'toast/toast.html' import govieToast %}
+{% from 'list/list.html' import govieList %}
 {% from 'pagination/pagination.html' import goviePagination %}
 
 {% from 'vars.jinja' import comboBoxProps, cookieBannerProps, modalProps, footerProps, HeaderProps, SelectProps, tabsProps, radioProps, listProps %}
@@ -229,6 +230,14 @@
   <h2>Pagination</h2>
   {{ goviePagination({'totalPages': 10, 'currentPage': 5}) }}
   
+  <h2>List</h2>
+  {{ govieList({
+    "items": [
+      "Item 1",
+      "Item 2",
+      "Item 3"
+    ]
+  }) }}
   <h2>Footer (Local)</h2>
   <footer class="govie-footer"></footer>
   <h2>Footer (Global)</h2>
diff --git a/examples/wagtail/core/jinja/vars.jinja b/examples/wagtail/core/jinja/vars.jinja
index 6148078a5..0e392c64f 100644
--- a/examples/wagtail/core/jinja/vars.jinja
+++ b/examples/wagtail/core/jinja/vars.jinja
@@ -47,6 +47,7 @@
 
 {% set HeaderProps = {
     "logo": { "href": '/home' },
+    "fullWidth": false,
     "tools": {
       "search": {
         "action": '/search_page',
diff --git a/packages/html/ds/src/list/list.html b/packages/html/ds/src/list/list.html
index 5d2d53e97..6fa1f991b 100644
--- a/packages/html/ds/src/list/list.html
+++ b/packages/html/ds/src/list/list.html
@@ -2,25 +2,26 @@
 
 {% macro govieList(props) %}
   {% macro getListClass(type, spaced) %}
-    {% set listClasses = [] %}
+    {% set listClasses = '' %}
+
     {% if type == 'bullet' %}
-      {% set listClasses = (listClasses.push('gi-list-bullet'), listClasses) %}
+      {% set listClasses = listClasses + ' gi-list-bullet' %}
     {% elif type == 'number' %}
-      {% set listClasses = (listClasses.push('gi-list-number'), listClasses) %}
+      {% set listClasses = listClasses + ' gi-list-number' %}
     {% else %}
-      {% set listClasses = (listClasses.push('gi-list'), listClasses) %}
+      {% set listClasses = listClasses + ' gi-list' %}
     {% endif %}
 
     {% if spaced %}
-      {% set listClasses = (listClasses.push('gi-list-spaced'), listClasses) %}
+      {% set listClasses = listClasses + ' gi-list-spaced' %}
     {% endif %}
 
-    {{ listClasses | join(' ') }}
+    {{ listClasses | trim }}
   {% endmacro %}
 
   <ul
     data-testid="govieList"
-    class="{{ getListClass(props.type, props.spaced) | trim }}"
+    class="{{ getListClass(props.type, props.spaced) }}"
     data-element="list-container"
   >
     {% for item in props['items'] %}
@@ -33,4 +34,4 @@
       </li>
     {% endfor %}
   </ul>
-{% endmacro %}
+{% endmacro %}
\ No newline at end of file