@ons/design-system 70.0.17 → 72.0.0

package/components/checkboxes/_checkbox.scss

@@ -1,5 +1,5 @@
 $checkbox-input-width: 22px;
-$checkbox-padding: 11px;
+$checkbox-padding: 10px;
 
 .ons-checkbox {
     display: inline-block;
@@ -74,7 +74,7 @@ $checkbox-padding: 11px;
 
     &--no-border {
         > .ons-checkbox__label {
-            padding: 0 0 0 1.85rem;
+            padding: 0 0 0 2rem;
 
             &::before {
                 background: none !important;
@@ -89,7 +89,7 @@ $checkbox-padding: 11px;
 
         > .ons-checkbox__input {
             left: 0.05rem;
-            top: 0.15rem;
+            top: 0.22rem;
 
             &:checked,
             &:focus {
@@ -170,7 +170,7 @@ $checkbox-padding: 11px;
     &__other {
         border-left: 4px solid var(--ons-color-borders-indent);
         display: block;
-        margin: 0 1rem 0.5rem 1.1rem;
+        margin: 0 1rem 0.5rem;
         padding: 0 $checkbox-padding $checkbox-padding $checkbox-padding * 2 - 1;
     }
 

package/components/checkboxes/_checkboxes.scss

@@ -1,7 +1,7 @@
 .ons-checkboxes {
     &__label {
         display: block;
-        margin: 0 0 1rem;
+        margin: 0 0 0.5rem;
     }
 
     &__items {

package/components/checkboxes/example-checkboxes-with-hidden-label.njk

@@ -1,14 +1,14 @@
 {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
 
-<div class="ons-grid ons-grid--flex ons-grid--between">
+<div class="ons-grid ons-grid-flex ons-grid-flex--between">
     <div class="ons-grid__col">
-        <h1 class="ons-u-fs-l u-mb-xs" name="page-manage-account-title">{{ name }}</h1>
+        <h1 class="ons-u-fs-l u-mb-2xs" name="page-manage-account-title">{{ name }}</h1>
     </div>
 </div>
 
-<div class="ons-grid ons-grid--flex ons-grid--between">
+<div class="ons-grid ons-grid-flex ons-grid-flex--between">
     <div class="ons-grid__col">
-        <h2 class="ons-u-fs-m u-mb-xs" name="page-manage-account-subtitle">Select user permissions</h2>
+        <h2 class="ons-u-fs-m u-mb-2xs" name="page-manage-account-subtitle">Select user permissions</h2>
     </div>
 </div>
 

package/components/cookies-banner/_cookies-banner.scss

@@ -13,18 +13,18 @@
         p {
             margin: 0 0 0.5rem;
 
-            @include mq(xxs, s) {
-                font-size: 0.9rem;
-                line-height: 1.4;
+            @include mq('2xs', s) {
+                font-size: 0.875rem;
+                line-height: 1.25rem;
             }
         }
     }
 
     &__link {
-        line-height: 2.1rem;
+        line-height: 2rem;
     }
 
     &__btn {
-        margin: 0 0 0.8rem;
+        margin: 0 0 0.75rem;
     }
 }

package/components/cookies-banner/_macro.njk

@@ -13,8 +13,8 @@
         {% set rejectedText = 'Rydych chi wedi gwrthod yr holl gwcis ychwanegol.' %}
         {% set confirmationButtonText = 'Cuddio' %}
         {% set contextSuffix = 'neges hon' %}
-        {% set beforeLinkPreferencesURL = 'Gallwch chi' %}
-        {% set afterLinkPreferencesURL = '"newid eich dewisiadau o ran cwcis</a> ar unrhyw adeg.' %}
+        {% set beforeLinkPreferencesUrl = 'Gallwch chi' %}
+        {% set afterLinkPreferencesUrl = '"newid eich dewisiadau o ran cwcis</a> ar unrhyw adeg.' %}
         {% set beforeLinkStatementText = '<p>Ffeiliau bach a gaiff eu storio ar eich dyfais pan fyddwch yn mynd ar wefan yw cwcis. Rydym ni’n defnyddio rhai cwcis hanfodol i wneud i’r wefan hon weithio.</p><p>Hoffem osod' %}
         {% set afterLinkStatementText = 'cwcis ychwanegol</a> er mwyn cofio eich gosodiadau a deall sut rydych chi’n defnyddio’r wefan. Mae hyn yn ein helpu ni i wella ein gwasanaethau.</p>' %}
     {% else %}
@@ -29,19 +29,19 @@
         {% set rejectedText = 'You have rejected all additional cookies.' %}
         {% set confirmationButtonText = 'Hide' %}
         {% set contextSuffix = 'cookie message' %}
-        {% set beforeLinkPreferencesURL = 'You can' %}
-        {% set afterLinkPreferencesURL = 'change your cookie preferences</a> at any time.' %}
+        {% set beforeLinkPreferencesUrl = 'You can' %}
+        {% set afterLinkPreferencesUrl = 'change your cookie preferences</a> at any time.' %}
         {% set beforeLinkStatementText = '<p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.</p><p>We would like to set' %}
         {% set afterLinkStatementText = 'additional cookies</a> to remember your settings and understand how you use the site. This helps us to improve our services. </p>' %}
     {% endif %}
 
     {% if not isDesignSystemExample %}
-        {% set settingsLinkURL = params.settingsLinkTextURL | default(defaultCookiesLink) %}
+        {% set settingsLinkUrl = params.settingsLinkUrl | default(defaultCookiesLink) %}
     {% else %}
-        {% set settingsLinkURL = '#0' %}
+        {% set settingsLinkUrl = '#0' %}
     {% endif %}
-    {% set statementText = beforeLinkStatementText + ' <a href="' + settingsLinkURL + '">' + afterLinkStatementText %}
-    {% set preferencesText = beforeLinkPreferencesURL + ' <a href="' + settingsLinkURL + '">' + afterLinkPreferencesURL %}
+    {% set statementText = beforeLinkStatementText + ' <a href="' + settingsLinkUrl + '">' + afterLinkStatementText %}
+    {% set preferencesText = beforeLinkPreferencesUrl + ' <a href="' + settingsLinkUrl + '">' + afterLinkPreferencesUrl %}
 
     <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default(ariaLabel) }}">
         <div
@@ -49,13 +49,13 @@
         >
             <div class="ons-grid">
                 <div class="ons-grid__col ons-col-8@m">
-                    <h2 class="ons-cookies-banner__title ons-u-mb-xs">
+                    <h2 class="ons-cookies-banner__title ons-u-mb-2xs">
                         {{ params.statementTitle | default(statementTitle) }} {{ params.serviceName | default(serviceName) }}
                     </h2>
                     <div class="ons-cookies-banner__statement">{{ params.statementText | default(statementText) | safe }}</div>
                 </div>
             </div>
-            <div class="ons-grid ons-grid--flex ons-u-mt-s">
+            <div class="ons-grid ons-grid-flex ons-u-mt-s">
                 <div class="ons-grid__col">
                     {{
                         onsButton({
@@ -81,7 +81,7 @@
                     }}
                 </div>
                 <div class="ons-grid__col">
-                    <a class="ons-cookies-banner__link" href="{{ settingsLinkURL }}"
+                    <a class="ons-cookies-banner__link" href="{{ settingsLinkUrl }}"
                         >{{ params.settingsLinkText | default(settingsLinkText) }}</a
                     >
                 </div>
@@ -90,8 +90,10 @@
         <div
             class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__confirmation ons-u-d-no"
         >
-            <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center">
-                <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
+            <div
+                class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid--gutterless ons-grid-flex--no-wrap@s ons-grid-flex--vertical-center"
+            >
+                <div class="ons-grid__col ons-grid__col-flex ons-col-auto ons-u-flex-shrink@s">
                     <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s">
                         <span class="ons-js-accepted-text ons-u-d-no">{{ params.acceptedText | default(acceptedText) | safe }} </span
                         ><span class="ons-js-rejected-text ons-u-d-no">{{ params.rejectedText | default(rejectedText) | safe }} </span

package/components/cookies-banner/_macro.spec.js

@@ -10,7 +10,7 @@ const EXAMPLE_COOKIES_BANNER_PARAMS = {
     serviceName: 'ons.gov.uk override',
     statementTitle: 'Cookies on override',
     settingsLinkText: 'Cookie settings override',
-    settingsLinkTextURL: '/cookiesoverride',
+    settingsLinkUrl: '/cookiesoverride',
     statementText: 'Statement override',
     acceptButtonText: 'Accept additional cookies override',
     rejectButtonText: 'Reject additional cookies override',

package/components/details/_details.scss

@@ -1,4 +1,4 @@
-$details-caret-width: 1.5rem;
+$details-caret-width: 1.75rem;
 
 .ons-details {
     &--initialised & {
@@ -58,7 +58,6 @@ $details-caret-width: 1.5rem;
 
         &__title {
             display: inline-block;
-            font-size: 1rem;
             font-weight: $font-weight-bold;
             margin-bottom: 0;
             text-underline-position: under;
@@ -78,7 +77,7 @@ $details-caret-width: 1.5rem;
             border-left: 4px solid var(--ons-color-borders-indent);
             display: block;
             margin: 1rem 0 0;
-            padding: 0 0 0 1.3em;
+            padding: 0 0 0 1.5rem;
         }
     }
 
@@ -86,8 +85,8 @@ $details-caret-width: 1.5rem;
         &__heading {
             border-top: 1px solid var(--ons-color-borders);
             margin: 0;
-            padding-bottom: 0.9rem;
-            padding-top: 1rem;
+            padding-bottom: 1rem;
+            padding-top: 15px; // set to 15px to allow for the 1px border top
             width: 100%;
 
             &:focus {
@@ -117,7 +116,7 @@ $details-caret-width: 1.5rem;
         &__content {
             border-left: 0;
             margin: 0;
-            padding: 0;
+            padding: 0 0 1rem;
         }
     }
 

package/components/details/_macro.njk

@@ -12,11 +12,11 @@
             role="button"
             {% if params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
         >
-            {% set titleTag = params.titleTag | default("h2") %}
-            {% set openingTag = "<" + titleTag %}
-            {% set closingTag = "</" + titleTag + ">" %}
+            {% set titleTag = params.headingLevel | default(2) %}
+            {% set openingTag = "<h" ~ titleTag %}
+            {% set closingTag = "</h" ~ titleTag ~ ">" %}
             {{ openingTag | safe }}
-            class="ons-details__title">{{ params.title }}{{ closingTag | safe }}
+            class="ons-details__title ons-u-fs-r--b">{{ params.title }}{{ closingTag | safe }}
             <span class="ons-details__icon">
                 {% from "components/icon/_macro.njk" import onsIcon %}
                 {{-

package/components/details/_macro.spec.js

@@ -48,7 +48,7 @@ describe('macro: details', () => {
         const $ = cheerio.load(
             renderComponent('details', {
                 ...EXAMPLE_DETAILS_BASIC,
-                titleTag: 'h4',
+                headingLevel: 4,
             }),
         );
 

package/components/document-list/_document-list.scss

@@ -148,8 +148,6 @@
 
     &__item-metadata {
         @extend .ons-list--bare;
-
-        line-height: 1.2 !important;
     }
 
     &__item-attribute {

package/components/document-list/_macro.njk

@@ -4,9 +4,9 @@
         {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
     >
         {% for document in params.documents %}
-            {% set titleTag = params.titleTag | default("h2") %}
-            {% set openingTag = "<" + titleTag %}
-            {% set closingTag = "</" + titleTag + ">" %}
+            {% set titleTag = params.headingLevel | default(2) %}
+            {% set openingTag = "<h" ~ titleTag %}
+            {% set closingTag = "</h" ~ titleTag ~ ">" %}
             {% set documentItem %}
                 {% if document.thumbnail %}
                     <div
@@ -15,7 +15,7 @@
                     >
                         <a
                             class="ons-document-list__image-link{{ ' ons-document-list__image-link--placeholder' if not document.thumbnail.smallSrc }}"
-                            href="{{ document.url }}"
+                            href="{{ document.title.url }}"
                             tabindex="-1"
                         >
                             {% if document.thumbnail.smallSrc and document.thumbnail.largeSrc %}
@@ -34,9 +34,9 @@
                     <div
                         class="ons-document-list__item-header{{ ' ons-document-list__item-header--reverse' if document.showMetadataFirst == true }}"
                     >
-                        {{ openingTag | safe }} class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-xs">
-                        <a href="{{ document.url }}"
-                            >{{ document.title }}
+                        {{ openingTag | safe }} class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-2xs">
+                        <a href="{{ document.title.url }}"
+                            >{{ document.title.text }}
                             {%- if document.metadata and document.metadata.file -%}
                                 <span class="ons-u-vh">
                                     {%
@@ -52,7 +52,7 @@
                         {{ closingTag | safe }}
 
                         {%- if document.metadata -%}
-                            <ul class="ons-document-list__item-metadata{{ ' ons-u-mb-xs' if document.description else ' ons-u-mb-no' }}">
+                            <ul class="ons-document-list__item-metadata{{ ' ons-u-mb-2xs' if document.description else ' ons-u-mb-no' }}">
                                 {%- if document.metadata.date -%}
                                     <li class="ons-document-list__item-attribute">
                                         {% set prefixClass = "ons-u-fw-b" if document.metadata.date.showPrefix == true else "ons-u-vh" %}
@@ -63,23 +63,23 @@
                                     </li>
                                 {% endif %}
 
-                                {%- if document.metadata.type and document.metadata.type.text -%}
+                                {%- if document.metadata.object and document.metadata.object.text -%}
                                     <li class="ons-document-list__item-attribute{{ ' ons-u-mr-no' if document.metadata.file }}">
-                                        {% set metadataType %}
+                                        {% set metadataObject %}
                                             <span
-                                                {% if not document.metadata.file and not document.metadata.type.url %}class="ons-u-fw-b"{% endif %}
-                                                >{{ document.metadata.type.text }}{%- if document.metadata.type.ref -%}:{% elif document.metadata.file %},{% endif %}</span
+                                                {% if not document.metadata.file and not document.metadata.object.url %}class="ons-u-fw-b"{% endif %}
+                                                >{{ document.metadata.object.text }}{%- if document.metadata.object.ref -%}:{% elif document.metadata.file %},{% endif %}</span
                                             >
                                         {% endset %}
-                                        {%- if document.metadata.type.url -%}
-                                            <a class="ons-document-list__attribute-link" href="{{ document.metadata.type.url }}">
-                                                {{ metadataType | safe }}
+                                        {%- if document.metadata.object.url -%}
+                                            <a class="ons-document-list__attribute-link" href="{{ document.metadata.object.url }}">
+                                                {{ metadataObject | safe }}
                                             </a>
                                         {% else %}
-                                            {{ metadataType | safe }}
+                                            {{ metadataObject | safe }}
                                         {% endif %}
-                                        {%- if document.metadata.type.ref -%}
-                                            <span>{{ document.metadata.type.ref }}</span>
+                                        {%- if document.metadata.object.ref -%}
+                                            <span>{{ document.metadata.object.ref }}</span>
                                         {% endif %}
                                     </li>
                                 {% endif %}

package/components/document-list/_macro.spec.js

@@ -6,8 +6,10 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_DOCUMENT_LIST_BASIC = {
-    url: '#0',
-    title: 'Crime and justice',
+    title: {
+        text: 'Crime and justice',
+        url: '#0',
+    },
     description: 'Some description',
 };
 
@@ -30,10 +32,10 @@ const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE = {
     },
 };
 
-const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE = {
+const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT = {
     ...EXAMPLE_DOCUMENT_LIST_BASIC,
     metadata: {
-        type: {
+        object: {
             text: 'Poster',
             url: '#0',
             ref: 'some ref',
@@ -49,7 +51,7 @@ const EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE = {
         largeSrc: '/example-large.png',
     },
     metadata: {
-        type: {
+        object: {
             text: 'Poster',
             url: '#0',
             ref: 'some ref',
@@ -154,15 +156,15 @@ describe('macro: document list', () => {
             expect($('.ons-document-list__item-header--reverse').length).toBe(1);
         });
 
-        it('overrides the heading title tag when `titleTag` is provided', () => {
+        it('overrides the heading title tag when `headingLevel` is provided', () => {
             const $ = cheerio.load(
                 renderComponent('document-list', {
-                    titleTag: 'h1',
+                    headingLevel: 1,
                     documents: [EXAMPLE_DOCUMENT_LIST_BASIC],
                 }),
             );
-            const titleTag = $('.ons-document-list__item-title')[0].tagName;
-            expect(titleTag).toBe('h1');
+            const headingLevel = $('.ons-document-list__item-title')[0].tagName;
+            expect(headingLevel).toBe('h1');
         });
 
         it('has expected `title`', () => {
@@ -256,11 +258,11 @@ describe('macro: document list', () => {
         });
     });
 
-    describe('mode: with metadata `type` configuration', () => {
+    describe('mode: with metadata `object` configuration', () => {
         it('passes jest-axe checks', async () => {
             const $ = cheerio.load(
                 renderComponent('document-list', {
-                    documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE],
+                    documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT],
                 }),
             );
 
@@ -271,7 +273,7 @@ describe('macro: document list', () => {
         it('has the provided `url`', () => {
             const $ = cheerio.load(
                 renderComponent('document-list', {
-                    documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE],
+                    documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT],
                 }),
             );
 
@@ -280,13 +282,13 @@ describe('macro: document list', () => {
         });
 
         it('has expected `text`', () => {
-            const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE] }));
+            const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT] }));
             const text = $('.ons-document-list__attribute-link > span').text().trim();
             expect(text).toBe('Poster:');
         });
 
         it('has expected `ref`', () => {
-            const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE] }));
+            const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT] }));
             const text = $('.ons-document-list__attribute-link + span').text().trim();
             expect(text).toBe('some ref');
         });

package/components/document-list/example-document-list-article-featured.njk

@@ -14,10 +14,12 @@
                     "smallSrc": '/img/small/census-monuments-lights-featured.jpg',
                     "largeSrc": '/img/large/census-monuments-lights-featured.jpg'
                 },
-                "url": '#0',
-                "title": 'Landmarks are lighting up purple to mark Census Day',
+                "title": {
+                    "text": 'Landmarks are lighting up purple to mark Census Day',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'Press releases',
                         "url": '#0'
                     },

package/components/document-list/example-document-list-articles.njk

@@ -8,10 +8,12 @@
                     "smallSrc": '/img/small/census-monuments-lights.jpg',
                     "largeSrc": '/img/large/census-monuments-lights.jpg'
                 },
-                "url": '#0',
-                "title": 'Landmarks are lighting up purple to mark Census Day',
+                "title": {
+                    "text": 'Landmarks are lighting up purple to mark Census Day',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'Press releases',
                         "url": '#0'
                     },
@@ -27,10 +29,12 @@
                     "smallSrc": '/img/small/ons-award-winners.jpg',
                     "largeSrc": '/img/large/ons-award-winners.jpg'
                 },
-                "url": '#0',
-                "title": 'Office for National Statistics win top Royal Statistical Society award',
+                "title": {
+                    "text": 'Office for National Statistics win top Royal Statistical Society award',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'Press releases',
                         "url": '#0'
                     },
@@ -43,10 +47,12 @@
             },
             {
                 "thumbnail": true,
-                "url": '#0',
-                "title": 'Five Office for National Statistics names in New Year’s Honours',
+                "title": {
+                    "text": 'Five Office for National Statistics names in New Year’s Honours',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'Press releases',
                         "url": '#0'
                     },

package/components/document-list/example-document-list-downloads.njk

@@ -4,10 +4,12 @@
         "documents": [
             {
                 "thumbnail": true,
-                "url": '#',
-                "title": 'Including everyone in Census 2021',
+                "title": {
+                    "text": 'Including everyone in Census 2021',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                       "text": 'Poster'
                     },
                     "file": {
@@ -20,10 +22,12 @@
             },
             {
                 "thumbnail": true,
-                "url": '#',
-                "title": 'Community handbook for Census 2021',
+                "title": {
+                    "text": 'Community handbook for Census 2021',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'Booklet'
                     },
                     "file": {
@@ -36,10 +40,12 @@
             },
             {
                 "thumbnail": true,
-                "url": '#',
-                "title": 'Census 2021 matters to everyone',
+                "title": {
+                    "text": 'Census 2021 matters to everyone',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'Poster'
                     },
                     "file": {

package/components/document-list/example-document-list-search-result-featured.njk

@@ -6,10 +6,12 @@
             {
                 "featured": true,
                 "showMetadataFirst": true,
-                "url": '#0',
-                "title": 'Crime and justice',
+                "title": {
+                    "text": 'Crime and justice',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'Topic'
                     }
                 },

package/components/document-list/example-document-list-search-results.njk

@@ -6,10 +6,12 @@
             {
                 "featured": true,
                 "showMetadataFirst": true,
-                "url": '#0',
-                "title": 'Crime and justice',
+                "title": {
+                    "text": 'Crime and justice',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'Topic'
                     }
                 },
@@ -17,10 +19,12 @@
                 <p>View all <a href="#0">datasets</a> or <a href="#0">publications</a> related to <a href="#0">Crime and justice</a></p>'
             },
             {
-                "url": '#0',
-                "title": 'Disability and crime',
+                "title": {
+                    "text": 'Disability and crime',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'Dataset'
                     },
                     "date": {
@@ -33,10 +37,12 @@
                 "description": '<p>Domestic abuse and sexual assault outcomes for disabled people in England and Wales aged 16 to 59 years, with analysis by age, sex, impairment type, impairment severity, country and region using the <mark>Crime</mark> Survey for England and Wales (CSEW) data.</p>'
             },
             {
-                "url": '#0',
-                "title": 'Disability and crime, UK: 2019 (Latest release)',
+                "title": {
+                    "text": 'Disability and crime, UK: 2019 (Latest release)',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'Statistical bulletin'
                     },
                     "date": {
@@ -49,10 +55,12 @@
                 "description": '<p>An overview of published data on disability and <mark>crime</mark> in the UK and analysis of the experience of domestic abuse and sexual assault for disabled adults aged 16 to 59 years in England and Wales. Analysis by age, sex and impairment type.</p>'
             },
             {
-                "url": '#0',
-                "title": 'Hate crime by disability status, Crime Survey for England and Wales (CSEW) combined years 2013 and 2014 to 2015 and 2016',
+                "title": {
+                    "text": 'Hate crime by disability status, Crime Survey for England and Wales (CSEW) combined years 2013 and 2014 to 2015 and 2016',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'User requested data',
                         "ref": 'Ref 008052'
                     },

package/components/download-resources/_download-resources.scss

@@ -34,8 +34,7 @@
 
         .ons-label {
             font-weight: $font-weight-regular;
-            margin-bottom: 0;
-            margin-right: 0.5rem;
+            margin: 0 0.5rem 0 0;
         }
 
         .ons-input--select {