@ons/design-system 72.1.2 → 72.2.1

package/components/header/_macro.spec.js

@@ -723,7 +723,6 @@ describe('FOR: Macro: Header', () => {
                     ariaMinChars: 'Enter 3 or more characters for suggestions.',
                     ariaNResults: 'There are {n} suggestions available.',
                     ariaOneResult: 'There is one suggestion available.',
-                    ariaResultsLabel: 'Country suggestions',
                     ariaYouHaveSelected: 'You have selected',
                     containerClasses: 'ons-autosuggest--header',
                     id: 'ons-site-search',

package/components/header/example-header-external-with-navigation-and-search.njk

@@ -45,7 +45,6 @@
             "instructions": "instructions",
             "ariaYouHaveSelected": "ariaYouHaveSelected",
             "ariaMinChars": "ariaMinChars",
-            "ariaResultsLabel": "ariaResultsLabel",
             "ariaOneResult": "ariaOneResult",
             "ariaNResults": "ariaNResults",
             "ariaLimitedResults": "ariaLimitedResults",

package/components/hero/_hero.scss

@@ -28,6 +28,35 @@
         }
     }
 
+    &--grey {
+        background-color: var(--ons-color-grey-10);
+        &::before {
+            content: '';
+            background-color: var(--ons-color-banner-bg);
+            border-radius: 0 0 50% 50%;
+            inset: 0;
+            left: -40%;
+            position: absolute;
+            width: 150%;
+            @include mq(l) {
+                border-radius: 0 0 300% 150%;
+                left: 0;
+                width: 100%;
+            }
+        }
+    }
+    &__badge {
+        @include mq(xs, l) {
+            margin-top: 2.5rem;
+            margin-bottom: 1rem;
+        }
+    }
+
+    &--topic {
+        color: var(--ons-color-branded);
+        @extend .ons-u-mb-no;
+    }
+
     &__container {
         align-items: center;
         display: flex;
@@ -43,10 +72,6 @@
         height: 100%;
     }
 
-    &__text:has(+ .ons-btn) {
-        margin-bottom: 2rem;
-    }
-
     &__pre-title {
         margin-bottom: 0.5rem;
 
@@ -62,6 +87,10 @@
         z-index: 5;
     }
 
+    &__details:has(.ons-breadcrumbs) {
+        padding-top: 1rem;
+    }
+
     &--dark & {
         &__details {
             color: var(--ons-color-text-inverse) !important;
@@ -299,4 +328,16 @@
             }
         }
     }
+
+    &__title-container {
+        @include mq(l) {
+            display: grid;
+            align-items: start;
+            justify-content: space-between;
+
+            &.ons-hero__title-badge {
+                grid-template-columns: 1fr auto;
+            }
+        }
+    }
 }

package/components/hero/_macro.njk

@@ -15,16 +15,41 @@
         {% endif %}
         <div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
             <div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m ons-col-10@s@m">
-                <header>
-                    <h1 class="ons-hero__title ons-u-fs-3xl">{{ params.title }}</h1>
-                    {% if params.subtitle %}
-                        <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
-                    {% endif %}
-                </header>
-
-                {% if params.text %}
-                    <p class="ons-hero__text">{{ params.text | safe }}</p>
+                {% if params.breadcrumbs %}
+                    {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
+                    {{
+                        onsBreadcrumbs({
+                            "itemsList": params.breadcrumbs.itemsList,
+                            "ariaLabel": params.breadcrumbs.ariaLabel,
+                            "id": params.breadcrumbs.id,
+                            "classes": 'ons-u-pt-no' ~ (' ' + params.breadcrumbs.classes if params.breadcrumbs.classes else '')
+                        })
+                    }}
+                {% endif %}
+                {% if params.topic %}
+                    <h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
                 {% endif %}
+                <div class="ons-hero__title-container {% if params.officialStatisticsBadge %}ons-hero__title-badge{% endif %}">
+                    <header>
+                        <h1 class="ons-hero__title ons-u-fs-3xl">{{ params.title }}</h1>
+                        {% if params.subtitle %}
+                            <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
+                        {% endif %}
+                    </header>
+                    {% if params.officialStatisticsBadge == true %}
+                        {% from "components/icon/_macro.njk" import onsIcon %}
+                        <div class="ons-hero__badge">
+                            {{-
+                                onsIcon({
+                                    "iconType": 'official-statistics'
+                                })
+                            -}}
+                        </div>
+                    {% endif %}
+                    {% if params.text %}
+                        <p class="ons-hero__text">{{ params.text | safe }}</p>
+                    {% endif %}
+                </div>
 
                 {% if params.button %}
                     {% from "components/button/_macro.njk" import onsButton %}
@@ -34,7 +59,7 @@
                     {% endif %}
                     {{
                         onsButton({
-                            "classes": btnClasses,
+                            "classes": 'ons-u-mt-s' + btnClasses,
                             "type": 'button',
                             "text": params.button.text,
                             "url": params.button.url
@@ -44,7 +69,21 @@
                 {% if caller %}
                     <div class="ons-hero__additional-content">{{- caller() -}}</div>
                 {% endif %}
+
+                {% if params.descriptionList %}
+                    {% from "components/description-list/_macro.njk" import onsDescriptionList %}
+                    {{
+                        onsDescriptionList({
+                            "classes": "ons-u-mb-no",
+                            "variant": 'inline',
+                            "termCol": params.descriptionList.termCol,
+                            "descriptionCol": params.descriptionList.descriptionCol,
+                            "itemsList": params.descriptionList.itemsList
+                        })
+                    }}
+                {% endif %}
             </div>
+
             {% if params.html %}
                 <div class="ons-hero__additional-html">{{- params.html | safe -}}</div>
             {% endif %}

package/components/hero/_macro.spec.js

@@ -78,7 +78,7 @@ describe('macro: hero', () => {
 
         faker.renderComponent('hero', { ...EXAMPLE_HERO, variants: 'dark' });
 
-        expect(buttonSpy.occurrences[0]).toHaveProperty('classes', ' ons-btn--ghost');
+        expect(buttonSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mt-s ons-btn--ghost');
     });
 
     it('calls with content', () => {
@@ -92,4 +92,87 @@ describe('macro: hero', () => {
         const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'navy-blue' }));
         expect($('.ons-hero--navy-blue .ons-hero__circles').length).toBe(1);
     });
+
+    it('outputs the correct topic when set', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, topic: 'Topic Text' }));
+
+        const content = $('.ons-hero--topic').text().trim();
+        expect(content).toBe('Topic Text');
+    });
+
+    it('outputs the official statistics badge when officialStatisticsBadge is set to true', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, officialStatisticsBadge: true }));
+
+        expect($('.ons-hero__badge').length).toBe(1);
+        expect($('.ons-hero__badge svg title').text().trim()).toBe('Offical Statistics Badge');
+    });
+
+    it('renders curved gradient when variant is `grey`', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'grey' }));
+        expect($('.ons-hero--grey').length).toBe(1);
+    });
+
+    it('outputs the correct breadcrumbs', () => {
+        const $ = cheerio.load(
+            renderComponent('hero', {
+                ...EXAMPLE_HERO,
+                variants: 'grey',
+                breadcrumbs: {
+                    ariaLabel: 'Breadcrumbs',
+                    itemsList: [
+                        {
+                            url: '/breadcrumb-1',
+                            text: 'Breadcrumbs 1',
+                        },
+                        {
+                            url: '/breadcrumb-2',
+                            text: 'Breadcrumbs 2',
+                        },
+                    ],
+                },
+            }),
+        );
+
+        const breadcrumbs = $('.ons-breadcrumbs__link');
+        expect($(breadcrumbs).length).toBe(2);
+        expect($(breadcrumbs[0]).attr('href')).toBe('/breadcrumb-1');
+        expect($(breadcrumbs[0]).text().trim()).toBe('Breadcrumbs 1');
+        expect($(breadcrumbs[1]).attr('href')).toBe('/breadcrumb-2');
+        expect($(breadcrumbs[1]).text().trim()).toBe('Breadcrumbs 2');
+    });
+
+    it('outputs the correct description list value', () => {
+        const $ = cheerio.load(
+            renderComponent('hero', {
+                ...EXAMPLE_HERO,
+                variants: 'grey',
+                descriptionList: {
+                    termCol: '4',
+                    descriptionCol: '8',
+                    itemsList: [
+                        {
+                            term: 'term1:',
+                            descriptions: [
+                                {
+                                    description: 'description1',
+                                },
+                            ],
+                        },
+                        {
+                            term: 'term2:',
+                            descriptions: [
+                                {
+                                    description: 'description2',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            }),
+        );
+
+        const descriptionText = $('.ons-description-list__value');
+        expect($(descriptionText[0]).text().trim()).toBe('description1');
+        expect($(descriptionText[1]).text().trim()).toBe('description2');
+    });
 });

package/components/hero/example-hero-grey.njk

@@ -0,0 +1,78 @@
+---
+'fullWidth': true
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    onsHero({
+        "variants": 'grey',
+        "detailsColumns": '12',
+        "officialStatisticsBadge": true,
+        "topic": 'Statistical article',
+        "title": 'Retail sales rise amid summer discounts and sporting events, according to a first estimate',
+        "text": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id mattis ligula, nec sollicitudin arcu. Donec non tristique tellus. Donec eget malesuada lorem.',
+        "breadcrumbs": {
+            "ariaLabel": 'Breadcrumbs',
+            "itemsList": [
+                {
+                    "url": '/',
+                    "text": 'Home'
+                },
+                {
+                    "url": '/',
+                    "text": 'Business, industry and trade'
+                },
+                {
+                    "url": '/',
+                    "text": 'Retail industry'
+                }
+            ]
+        },
+        "descriptionList": {
+            "termCol": "5",
+            "descriptionCol": "7",
+            "itemsList": [
+                {
+                    "term": "Release date:",
+                    "descriptions": [
+                        {
+                            "description": "16 August 2024"
+                        }
+                    ]
+                },
+                {
+                    "term": "Edition:",
+                    "descriptions": [
+                        {
+                            "description": "Latest"
+                        }
+                    ]
+                },
+                {
+                    "term": "Contact:",
+                    "descriptions": [
+                        {
+                            "description": "Retail Sales team"
+                        }
+                    ]
+                },
+                {
+                    "term": "Next release:",
+                    "descriptions": [
+                        {
+                            "description": "20 September 2024"
+                        }
+                    ]
+                },
+                {
+                    "term": "Releases:",
+                    "descriptions": [
+                        {
+                            "description": "View previous releases"
+                        }
+                    ]
+                }
+            ]
+        }
+    })
+}}

package/components/icon/_macro.njk

@@ -698,5 +698,151 @@
                 d="M211.25,203.37c1.01-1.12,2.01-2.24,2.97-3.43l25-48.6c0.42-1.47,0.78-2.93,1.07-4.42L211.25,203.37zM192.12,220.32c0.66-0.44,1.25-0.85,1.89-1.34l48.96-95.17c0.03-0.8,0.04-1.57,0.01-2.36L192.12,220.32z M178.35,228.81c0.56-0.24,1.1-0.54,1.64-0.84l62.16-120.82c-0.09-0.58-0.16-1.19-0.27-1.82L178.35,228.81z M165.96,234.53c0.54-0.2,1.02-0.39,1.52-0.61L239.7,93.54c-0.11-0.54-0.22-1.07-0.38-1.6L165.96,234.53z M154.53,238.39c0.48-0.09,0.94-0.24,1.43-0.42l80.34-156.16c-0.13-0.5-0.28-0.96-0.48-1.41L154.53,238.39z M143.84,240.89c0.42-0.07,0.89-0.12,1.35-0.27l87-169.12c-0.14-0.46-0.37-0.87-0.56-1.25L143.84,240.89z M133.65,242.35c0.38,0,0.84-0.05,1.27-0.12l92.61-180.02c-0.19-0.38-0.41-0.79-0.64-1.1L133.65,242.35z M123.86,243c0.4-0.03,0.82-0.01,1.24-0.08l97.28-189.09c-0.19-0.38-0.45-0.72-0.66-1.06L123.86,243z M114.59,242.76c0.38,0.1,0.77,0.11,1.17,0.07L216.88,46.27c-0.2-0.35-0.43-0.66-0.74-0.91L114.59,242.76z M2.67,96.04l29.04-56.45c-1.04,1.1-2.02,2.24-2.97,3.43l-25,48.6C3.32,93.09,2.99,94.56,2.67,96.04z M106.68,242.11L211.02,39.3c-0.25-0.27-0.5-0.54-0.8-0.8L105.57,241.93C105.95,242.03,106.31,242.07,106.68,242.11z M97.97,240.67L204.78,33.05c-0.25-0.27-0.5-0.54-0.8-0.79L96.87,240.48C97.25,240.59,97.61,240.63,97.97,240.67z M89.58,238.71L198.31,27.36c-0.27-0.23-0.57-0.49-0.86-0.68L88.53,238.41C88.86,238.53,89.23,238.63,89.58,238.71z M0,119.49l49.26-95.75c-0.68,0.47-1.31,0.96-1.97,1.49L0.07,117.02C0.02,117.86-0.01,118.67,0,119.49z M81.45,236.17L191.51,22.22c-0.27-0.24-0.55-0.43-0.9-0.6L80.43,235.79C80.77,235.96,81.1,236.08,81.45,236.17z M73.58,233.08L184.43,17.62c-0.27-0.23-0.61-0.41-0.91-0.57L72.59,232.67C72.9,232.83,73.24,233,73.58,233.08z M0.88,136.14L63.32,14.78c-0.6,0.32-1.14,0.62-1.7,0.96L0.68,134.2C0.69,134.84,0.77,135.51,0.88,136.14z M65.99,229.56L177.16,13.49c-0.04-0.02-0.04-0.02-0.08-0.04c-0.3-0.16-0.57-0.29-0.9-0.41l-111.12,216c0.28,0.2,0.55,0.33,0.86,0.49C65.96,229.55,65.96,229.55,65.99,229.56z M58.68,225.41L169.53,9.95c-0.28-0.19-0.65-0.33-0.99-0.41L57.77,224.85C58.03,225.08,58.36,225.29,58.68,225.41z M3.33,149.74L75.79,8.91c-0.54,0.21-1.03,0.39-1.52,0.62L2.95,148.15C3.06,148.69,3.19,149.19,3.33,149.74z M51.64,220.83L161.71,6.89c-0.31-0.16-0.67-0.3-1.01-0.38L50.75,220.23C51.01,220.46,51.34,220.67,51.64,220.83z M6.75,161.38L87.24,4.92c-0.5,0.13-0.96,0.27-1.42,0.42L6.26,159.98C6.41,160.44,6.56,160.9,6.75,161.38z M44.82,215.73L153.59,4.3c-0.36-0.14-0.7-0.22-1.07-0.26L43.98,215.01C44.23,215.28,44.5,215.51,44.82,215.73z M10.88,171.7L98.04,2.28c-0.42,0.07-0.88,0.12-1.32,0.23L10.3,170.49C10.47,170.91,10.69,171.32,10.88,171.7z M38.29,210.05L145.18,2.29c-0.38-0.1-0.75-0.14-1.11-0.19L37.49,209.26C37.74,209.53,37.99,209.8,38.29,210.05z M32.09,203.83L136.51,0.86c-0.36-0.04-0.76-0.11-1.15-0.11L31.34,202.96C31.56,203.27,31.85,203.56,32.09,203.83z M15.57,180.96L108.29,0.71c-0.44,0.02-0.84,0.05-1.27,0.12l-92.1,179.03C15.12,180.24,15.32,180.59,15.57,180.96z M26.21,196.9L127.45,0.11c-0.4-0.06-0.78-0.07-1.19-0.03L25.5,195.95C25.7,196.29,25.93,196.6,26.21,196.9z M20.67,189.32L118.06,0c-0.41,0.03-0.83,0.01-1.25,0.08L20.01,188.26C20.19,188.64,20.46,188.97,20.67,189.32z"
             ></path>
         </svg>
+    {%- elif params.iconType == "official-statistics" -%}
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="77"
+            height="93"
+            viewBox="0 0 77 93"
+            fill="none"
+            title="ons-official-statistics-badge"
+            focusable="false"
+            role="img"
+            class="ons-icon--logo{{ iconClasses }}"
+        >
+            <title id="{{ params.altTextId | default ('official-statistics-alt') }}">
+                {{ params.altText | default ('Offical Statistics Badge') }}
+            </title>
+            <path
+                d="M12.4999 92.59C7.18988 92.59 2.87988 88.27 2.87988 82.97C2.87988 77.67 7.19988 73.35 12.4999 73.35H64.4999C69.8099 73.35 74.1199 77.67 74.1199 82.97C74.1199 88.27 69.7999 92.59 64.4999 92.59H12.4999Z"
+                fill="white"
+            />
+            <path
+                d="M64.5 73.71C69.6 73.71 73.75 77.86 73.75 82.96C73.75 88.06 69.6 92.21 64.5 92.21H12.5C7.4 92.21 3.25 88.06 3.25 82.96C3.25 77.86 7.4 73.71 12.5 73.71H64.5ZM64.5 72.96H12.5C6.98 72.96 2.5 77.44 2.5 82.96C2.5 88.48 6.98 92.96 12.5 92.96H64.5C70.02 92.96 74.5 88.48 74.5 82.96C74.5 77.44 70.02 72.96 64.5 72.96Z"
+                fill="#003C57"
+            />
+            <path
+                d="M16.4702 86.67L15.9502 84.97H13.3502L12.8302 86.67H11.2002L13.7202 79.5H15.5702L18.1002 86.67H16.4702ZM15.5902 83.7C15.1102 82.16 14.8402 81.29 14.7802 81.09C14.7202 80.89 14.6802 80.73 14.6502 80.61C14.5402 81.03 14.2302 82.06 13.7302 83.7H15.5902Z"
+                fill="#003C57"
+            />
+            <path
+                d="M21.2004 86.76C19.5004 86.76 18.6504 85.83 18.6504 83.96C18.6504 83.03 18.8804 82.32 19.3404 81.83C19.8004 81.34 20.4604 81.09 21.3304 81.09C21.9604 81.09 22.5304 81.21 23.0304 81.46L22.5904 82.61C22.3604 82.52 22.1404 82.44 21.9404 82.38C21.7404 82.32 21.5404 82.29 21.3304 82.29C20.5604 82.29 20.1704 82.84 20.1704 83.94C20.1704 85.04 20.5604 85.54 21.3304 85.54C21.6204 85.54 21.8804 85.5 22.1304 85.43C22.3704 85.35 22.6204 85.23 22.8604 85.07V86.34C22.6204 86.49 22.3804 86.6 22.1304 86.66C21.8804 86.72 21.5804 86.75 21.2004 86.75V86.76Z"
+                fill="#003C57"
+            />
+            <path
+                d="M26.4504 86.76C24.7504 86.76 23.9004 85.83 23.9004 83.96C23.9004 83.03 24.1304 82.32 24.5904 81.83C25.0504 81.34 25.7104 81.09 26.5804 81.09C27.2104 81.09 27.7804 81.21 28.2804 81.46L27.8404 82.61C27.6104 82.52 27.3904 82.44 27.1904 82.38C26.9904 82.32 26.7904 82.29 26.5804 82.29C25.8104 82.29 25.4204 82.84 25.4204 83.94C25.4204 85.04 25.8104 85.54 26.5804 85.54C26.8704 85.54 27.1304 85.5 27.3804 85.43C27.6204 85.35 27.8704 85.23 28.1104 85.07V86.34C27.8704 86.49 27.6304 86.6 27.3804 86.66C27.1304 86.72 26.8204 86.75 26.4504 86.75V86.76Z"
+                fill="#003C57"
+            />
+            <path
+                d="M32.5197 81.11C32.7197 81.11 32.8897 81.12 33.0197 81.15L32.9097 82.55C32.7897 82.52 32.6397 82.5 32.4697 82.5C31.9997 82.5 31.6197 82.62 31.3597 82.87C31.0997 83.12 30.9597 83.46 30.9597 83.9V86.68H29.4697V81.22H30.5997L30.8197 82.14H30.8897C31.0597 81.83 31.2897 81.59 31.5797 81.4C31.8697 81.21 32.1797 81.12 32.5197 81.12V81.11Z"
+                fill="#003C57"
+            />
+            <path
+                d="M36.5803 86.76C35.7003 86.76 35.0103 86.52 34.5203 86.03C34.0303 85.54 33.7803 84.86 33.7803 83.97C33.7803 83.08 34.0103 82.35 34.4703 81.85C34.9303 81.35 35.5603 81.1 36.3703 81.1C37.1803 81.1 37.7403 81.32 38.1703 81.76C38.6003 82.2 38.8103 82.81 38.8103 83.58V84.3H35.2903C35.3103 84.72 35.4303 85.05 35.6703 85.29C35.9103 85.53 36.2303 85.65 36.6603 85.65C36.9903 85.65 37.3003 85.62 37.5903 85.55C37.8803 85.48 38.1903 85.37 38.5103 85.22V86.37C38.2503 86.5 37.9703 86.6 37.6803 86.66C37.3803 86.72 37.0203 86.76 36.6003 86.76H36.5803ZM36.3703 82.16C36.0503 82.16 35.8103 82.26 35.6303 82.46C35.4503 82.66 35.3503 82.94 35.3203 83.31H37.4103C37.4103 82.94 37.3103 82.66 37.1203 82.46C36.9303 82.26 36.6803 82.16 36.3703 82.16Z"
+                fill="#003C57"
+            />
+            <path
+                d="M41.85 86.7599C41.21 86.7599 40.71 86.5099 40.34 86.0099C39.97 85.5099 39.79 84.8199 39.79 83.9399C39.79 83.0599 39.98 82.3499 40.35 81.8499C40.72 81.3499 41.24 81.0999 41.89 81.0999C42.54 81.0999 43.1 81.3699 43.46 81.8999H43.51C43.43 81.4899 43.4 81.1299 43.4 80.8099V79.0599H44.89V86.6599H43.75L43.46 85.9499H43.4C43.06 86.4899 42.55 86.7599 41.85 86.7599ZM42.37 85.5699C42.75 85.5699 43.03 85.4599 43.21 85.2399C43.39 85.0199 43.48 84.6399 43.5 84.1099V83.9499C43.5 83.3599 43.41 82.9399 43.23 82.6899C43.05 82.4399 42.76 82.3099 42.35 82.3099C42.02 82.3099 41.76 82.4499 41.58 82.7299C41.39 83.0099 41.3 83.4199 41.3 83.9599C41.3 84.4999 41.39 84.8999 41.58 85.1699C41.77 85.4399 42.03 85.5699 42.37 85.5699Z"
+                fill="#003C57"
+            />
+            <path
+                d="M46.4805 79.7999C46.4805 79.3099 46.7505 79.0699 47.2905 79.0699C47.8305 79.0699 48.1005 79.3099 48.1005 79.7999C48.1005 80.0299 48.0305 80.2099 47.9005 80.3399C47.7605 80.4699 47.5605 80.5299 47.2905 80.5299C46.7505 80.5299 46.4805 80.2899 46.4805 79.7999ZM48.0305 86.6699H46.5405V81.2099H48.0305V86.6699Z"
+                fill="#003C57"
+            />
+            <path
+                d="M52.0004 85.5799C52.2604 85.5799 52.5704 85.5199 52.9404 85.4099V86.5199C52.5704 86.6899 52.1104 86.7699 51.5704 86.7699C50.9704 86.7699 50.5404 86.6199 50.2704 86.3199C50.0004 86.0199 49.8604 85.5699 49.8604 84.9599V82.3299H49.1504V81.6999L49.9704 81.1999L50.4004 80.0499H51.3504V81.2099H52.8804V82.3299H51.3504V84.9599C51.3504 85.1699 51.4104 85.3299 51.5304 85.4299C51.6504 85.5299 51.8104 85.5799 52.0004 85.5799Z"
+                fill="#003C57"
+            />
+            <path
+                d="M56.6105 86.76C55.7305 86.76 55.0406 86.52 54.5506 86.03C54.0606 85.54 53.8105 84.86 53.8105 83.97C53.8105 83.08 54.0405 82.35 54.5005 81.85C54.9605 81.35 55.5906 81.1 56.4006 81.1C57.2106 81.1 57.7705 81.32 58.2005 81.76C58.6305 82.2 58.8405 82.81 58.8405 83.58V84.3H55.3205C55.3405 84.72 55.4605 85.05 55.7005 85.29C55.9405 85.53 56.2606 85.65 56.6906 85.65C57.0206 85.65 57.3306 85.62 57.6206 85.55C57.9106 85.48 58.2206 85.37 58.5406 85.22V86.37C58.2806 86.5 58.0005 86.6 57.7105 86.66C57.4105 86.72 57.0505 86.76 56.6305 86.76H56.6105ZM56.4006 82.16C56.0806 82.16 55.8406 82.26 55.6606 82.46C55.4806 82.66 55.3805 82.94 55.3505 83.31H57.4406C57.4406 82.94 57.3406 82.66 57.1506 82.46C56.9606 82.26 56.7106 82.16 56.4006 82.16Z"
+                fill="#003C57"
+            />
+            <path
+                d="M61.8803 86.7599C61.2403 86.7599 60.7403 86.5099 60.3703 86.0099C60.0003 85.5099 59.8203 84.8199 59.8203 83.9399C59.8203 83.0599 60.0103 82.3499 60.3803 81.8499C60.7503 81.3499 61.2703 81.0999 61.9203 81.0999C62.6103 81.0999 63.1303 81.3699 63.4903 81.8999H63.5403C63.4603 81.4899 63.4303 81.1299 63.4303 80.8099V79.0599H64.9203V86.6599H63.7803L63.4903 85.9499H63.4303C63.0903 86.4899 62.5803 86.7599 61.8803 86.7599ZM62.4003 85.5699C62.7803 85.5699 63.0603 85.4599 63.2403 85.2399C63.4203 85.0199 63.5103 84.6399 63.5303 84.1099V83.9499C63.5303 83.3599 63.4403 82.9399 63.2603 82.6899C63.0803 82.4399 62.7903 82.3099 62.3803 82.3099C62.0503 82.3099 61.7903 82.4499 61.6103 82.7299C61.4303 83.0099 61.3303 83.4199 61.3303 83.9599C61.3303 84.4999 61.4203 84.8999 61.6103 85.1699C61.8003 85.4399 62.0603 85.5699 62.4103 85.5699H62.4003Z"
+                fill="#003C57"
+            />
+            <path
+                d="M1 38.5C1 17.79 17.79 1 38.5 1C59.21 1 76 17.79 76 38.5C76 59.21 59.21 76 38.5 76C17.79 76 1 59.21 1 38.5Z"
+                fill="white"
+                stroke="#003C57"
+                stroke-width="0.75"
+                stroke-miterlimit="10"
+            />
+            <path
+                d="M16.3799 18.47C17.5699 19.28 18.2799 20.19 18.4999 21.2C18.7199 22.21 18.4499 23.27 17.6799 24.4C16.9299 25.51 16.0299 26.15 15.0099 26.32C13.9799 26.49 12.8699 26.17 11.6799 25.36C10.4999 24.56 9.79994 23.65 9.57994 22.64C9.35994 21.63 9.62994 20.56 10.3899 19.44C11.1599 18.31 12.0499 17.67 13.0599 17.51C14.0699 17.35 15.1799 17.67 16.3699 18.49L16.3799 18.47ZM13.0699 23.34C14.4399 24.27 15.4499 24.26 16.0999 23.31C16.4299 22.83 16.5099 22.35 16.3299 21.89C16.1599 21.43 15.7199 20.96 15.0099 20.48C14.2999 20 13.6999 19.76 13.1999 19.77C12.6999 19.77 12.2899 20.02 11.9699 20.49C11.3199 21.45 11.6799 22.4 13.0699 23.34Z"
+                fill="#003C57"
+            />
+            <path
+                d="M23.4603 18.2101L21.6303 19.5701L16.5303 12.6901L20.6003 9.68005L21.7103 11.1701L19.4703 12.8301L20.4403 14.1401L22.5003 12.6101L23.6103 14.1001L21.5503 15.6301L23.4703 18.2101H23.4603Z"
+                fill="#003C57"
+            />
+            <path
+                d="M29.6796 14.8301L27.5396 15.6201L24.5596 7.59008L29.3096 5.83008L29.9596 7.57008L27.3496 8.54008L27.9196 10.0701L30.3296 9.18008L30.9796 10.9201L28.5696 11.8101L29.6896 14.8301H29.6796Z"
+                fill="#003C57"
+            />
+            <path d="M34.4002 13.55L33.4102 5.04002L35.7202 4.77002L36.7102 13.28L34.4002 13.55Z" fill="#003C57" />
+            <path
+                d="M44.0304 6.92005C43.4904 6.84005 43.0304 7.00005 42.6604 7.40005C42.2904 7.80005 42.0504 8.39005 41.9304 9.18005C41.6904 10.81 42.1904 11.72 43.4304 11.9C43.8104 11.95 44.1804 11.96 44.5404 11.9C44.9004 11.84 45.2804 11.77 45.6604 11.68L45.3704 13.62C44.6204 13.83 43.7904 13.87 42.9004 13.74C41.6204 13.55 40.6904 13.04 40.1204 12.19C39.5504 11.35 39.3604 10.23 39.5704 8.82005C39.7004 7.94005 39.9804 7.20005 40.4004 6.58005C40.8304 5.96005 41.3804 5.52005 42.0504 5.26005C42.7204 5.00005 43.4804 4.92005 44.3204 5.05005C45.2404 5.18005 46.0804 5.51005 46.8604 6.03005L45.8904 7.73005C45.6004 7.54005 45.3004 7.37005 45.0104 7.22005C44.7104 7.07005 44.3804 6.97005 44.0204 6.92005H44.0304Z"
+                fill="#003C57"
+            />
+            <path d="M47.5098 14.87L50.9298 7.02002L53.0598 7.95002L49.6398 15.8L47.5098 14.87Z" fill="#003C57" />
+            <path
+                d="M56.0002 20.2L56.7002 18.69L54.5602 16.92L53.2002 17.88L51.2402 16.26L58.8802 11.42L61.2602 13.39L57.9502 21.82L56.0002 20.21V20.2ZM57.5402 16.93L58.1502 15.61C58.2802 15.31 58.4602 14.94 58.6802 14.48C58.9002 14.02 59.0702 13.69 59.1702 13.5C59.0202 13.63 58.7502 13.84 58.3802 14.13C58.0102 14.42 57.2602 14.96 56.1302 15.77L57.5302 16.93H57.5402Z"
+                fill="#003C57"
+            />
+            <path
+                d="M58.7197 23.1501L66.0297 18.6801L67.2397 20.6501L61.5297 24.1501L63.2497 26.9601L61.6597 27.9401L58.7297 23.1501H58.7197Z"
+                fill="#003C57"
+            />
+            <path
+                d="M9.56963 51.1301C9.06963 51.3001 8.57963 51.3201 8.09963 51.1901C7.61963 51.0701 7.19963 50.8001 6.81963 50.3901C6.43963 49.9801 6.14963 49.4501 5.92963 48.8001C5.74963 48.2601 5.63963 47.7901 5.58963 47.4001C5.53963 47.0101 5.54963 46.5801 5.60963 46.1201L7.56963 45.4701C7.49963 45.9601 7.46963 46.4501 7.49963 46.9401C7.52963 47.4301 7.60963 47.8701 7.72963 48.2401C7.83963 48.5701 7.96963 48.7901 8.13963 48.9001C8.29963 49.0101 8.46963 49.0401 8.64963 48.9801C8.75963 48.9401 8.84963 48.8801 8.90963 48.7901C8.96963 48.7001 9.01963 48.5701 9.05963 48.4101C9.09963 48.2501 9.14963 47.8301 9.21963 47.1501C9.27963 46.5401 9.38963 46.0701 9.51963 45.7201C9.65963 45.3801 9.84963 45.1001 10.0996 44.8701C10.3496 44.6401 10.6796 44.4701 11.0796 44.3301C11.8296 44.0801 12.4996 44.1601 13.0996 44.5601C13.6996 44.9701 14.1596 45.6401 14.4796 46.6001C14.7596 47.4401 14.8496 48.3601 14.7496 49.3701L12.8296 49.2601C12.9296 48.3801 12.8796 47.6701 12.6996 47.1201C12.5996 46.8301 12.4896 46.6401 12.3396 46.5501C12.1996 46.4501 12.0496 46.4301 11.8996 46.4801C11.7396 46.5301 11.6196 46.6601 11.5496 46.8701C11.4796 47.0801 11.3996 47.6001 11.3096 48.4401C11.2296 49.2401 11.0496 49.8401 10.7796 50.2401C10.5096 50.6401 10.0996 50.9201 9.54963 51.1001L9.56963 51.1301Z"
+                fill="#003C57"
+            />
+            <path
+                d="M11.11 58.62L9.79004 56.72L15.28 52.92L14.09 51.2L15.65 50.12L19.35 55.46L17.79 56.54L16.6 54.83L11.11 58.63V58.62Z"
+                fill="#003C57"
+            />
+            <path
+                d="M19.2596 66.4801L19.8996 64.9501L17.6896 63.2601L16.3696 64.2701L14.3496 62.7301L21.7896 57.5901L24.2396 59.4701L21.2696 68.0201L19.2596 66.4801ZM20.6696 63.1501L21.2296 61.8101C21.3496 61.5101 21.5096 61.1301 21.7196 60.6601C21.9196 60.1901 22.0796 59.8601 22.1796 59.6701C22.0296 59.8101 21.7796 60.0301 21.4196 60.3301C21.0596 60.6301 20.3296 61.2101 19.2296 62.0601L20.6796 63.1701L20.6696 63.1501Z"
+                fill="#003C57"
+            />
+            <path
+                d="M28.2894 70.83L26.1094 70.06L28.3194 63.76L26.3494 63.07L26.9794 61.28L33.0994 63.43L32.4694 65.22L30.4994 64.53L28.2894 70.83Z"
+                fill="#003C57"
+            />
+            <path d="M34.9893 72.2L35.5693 63.65L37.8893 63.81L37.3093 72.36L34.9893 72.2Z" fill="#003C57" />
+            <path
+                d="M46.6697 68.85C46.7597 69.37 46.6997 69.86 46.4997 70.31C46.2997 70.76 45.9697 71.14 45.4997 71.45C45.0397 71.76 44.4697 71.97 43.7897 72.08C43.2297 72.17 42.7497 72.21 42.3497 72.19C41.9597 72.17 41.5397 72.1 41.0897 71.97L40.7597 69.93C41.2297 70.08 41.7097 70.18 42.1997 70.23C42.6897 70.28 43.1297 70.27 43.5297 70.21C43.8697 70.15 44.1097 70.05 44.2497 69.91C44.3897 69.77 44.4397 69.6 44.4097 69.42C44.3897 69.3 44.3397 69.21 44.2597 69.13C44.1797 69.05 44.0697 68.98 43.9097 68.92C43.7497 68.85 43.3497 68.73 42.6997 68.56C42.1097 68.4 41.6497 68.23 41.3397 68.03C41.0297 67.84 40.7797 67.6 40.5897 67.32C40.4097 67.04 40.2797 66.69 40.2097 66.27C40.0797 65.49 40.2697 64.84 40.7597 64.31C41.2497 63.78 41.9997 63.44 42.9897 63.27C43.8697 63.13 44.7897 63.18 45.7697 63.44L45.3597 65.32C44.5097 65.09 43.7997 65.02 43.2197 65.11C42.9197 65.16 42.7197 65.25 42.5997 65.37C42.4797 65.5 42.4397 65.64 42.4597 65.79C42.4897 65.96 42.5997 66.09 42.7897 66.19C42.9797 66.29 43.4897 66.46 44.2997 66.68C45.0797 66.89 45.6497 67.16 45.9897 67.49C46.3297 67.82 46.5497 68.27 46.6497 68.84L46.6697 68.85Z"
+                fill="#003C57"
+            />
+            <path
+                d="M54.2896 68.52L52.1996 69.52L49.3096 63.5L47.4196 64.41L46.5996 62.7L52.4496 59.89L53.2696 61.6L51.3896 62.5L54.2796 68.52H54.2896Z"
+                fill="#003C57"
+            />
+            <path d="M59.78 64.94L54.21 58.43L55.98 56.92L61.55 63.43L59.78 64.94Z" fill="#003C57" />
+            <path
+                d="M61.29 53.34C60.97 53.79 60.91 54.27 61.1 54.78C61.29 55.29 61.71 55.78 62.35 56.24C63.69 57.19 64.73 57.16 65.45 56.14C65.67 55.83 65.84 55.5 65.96 55.15C66.08 54.8 66.18 54.43 66.27 54.06L67.87 55.19C67.71 55.96 67.38 56.71 66.85 57.44C66.1 58.49 65.22 59.09 64.21 59.22C63.2 59.35 62.12 59 60.96 58.18C60.24 57.67 59.7 57.08 59.34 56.42C58.98 55.76 58.84 55.07 58.91 54.35C58.98 53.63 59.26 52.92 59.75 52.23C60.29 51.48 60.96 50.87 61.78 50.41L62.86 52.04C62.56 52.21 62.27 52.4 62.01 52.6C61.75 52.8 61.51 53.05 61.3 53.34H61.29Z"
+                fill="#003C57"
+            />
+            <path
+                d="M69.3701 45.2701C69.8701 45.4401 70.2801 45.7101 70.5901 46.1001C70.9001 46.4801 71.0801 46.9501 71.1301 47.5101C71.1901 48.0601 71.1101 48.6701 70.8901 49.3101C70.7101 49.8501 70.5201 50.29 70.3201 50.64C70.1201 50.98 69.8601 51.3201 69.5401 51.6501L67.5801 51C67.9301 50.65 68.2501 50.2701 68.5201 49.8601C68.7901 49.4501 68.9901 49.0501 69.1101 48.6701C69.2201 48.3401 69.2401 48.0901 69.1801 47.9001C69.1201 47.7101 69.0001 47.59 68.8201 47.53C68.7101 47.49 68.6001 47.49 68.5001 47.53C68.4001 47.56 68.2801 47.6301 68.1501 47.7401C68.0201 47.8501 67.7301 48.1501 67.2701 48.6501C66.8501 49.1001 66.4901 49.4201 66.1701 49.6101C65.8601 49.8001 65.5301 49.91 65.2001 49.94C64.8701 49.97 64.5001 49.9201 64.1001 49.7901C63.3501 49.5401 62.8601 49.08 62.6201 48.39C62.3801 47.7 62.4201 46.89 62.7401 45.93C63.0201 45.09 63.5001 44.29 64.1801 43.55L65.6501 44.7901C65.0501 45.4301 64.6601 46.03 64.4701 46.59C64.3801 46.88 64.3601 47.1001 64.4101 47.2601C64.4701 47.4201 64.5701 47.5301 64.7201 47.5801C64.8801 47.6301 65.0501 47.6001 65.2301 47.4701C65.4101 47.3501 65.7901 46.9801 66.3701 46.3601C66.9201 45.7601 67.4201 45.3901 67.8701 45.2401C68.3201 45.0901 68.8201 45.1 69.3701 45.28V45.2701Z"
+                fill="#003C57"
+            />
+            <path
+                d="M38.5004 60.85C50.844 60.85 60.8504 50.8436 60.8504 38.5C60.8504 26.1565 50.844 16.15 38.5004 16.15C26.1568 16.15 16.1504 26.1565 16.1504 38.5C16.1504 50.8436 26.1568 60.85 38.5004 60.85Z"
+                fill="#003C57"
+            />
+            <path d="M32.5902 37.8201H27.7402V46.7401H32.5902V37.8201Z" fill="white" />
+            <path d="M40.1498 28.26H35.2998V46.73H40.1498V28.26Z" fill="white" />
+            <path d="M47.7104 33.36H42.8604V46.73H47.7104V33.36Z" fill="white" />
+            <path
+                d="M42.6506 44.2001C42.2706 44.2001 41.9006 44.0501 41.6306 43.7801L37.3106 39.4601C36.7506 38.9001 36.7506 37.9901 37.3106 37.4201L37.9806 36.7601C38.2506 36.4901 38.6106 36.3401 39.0006 36.3401C39.3906 36.3401 39.7506 36.4901 40.0206 36.7601L42.6606 39.4001L50.5606 31.5001C50.8306 31.2301 51.1906 31.0801 51.5806 31.0801C51.9706 31.0801 52.3306 31.2301 52.6006 31.5001L53.2606 32.1601C53.8206 32.7201 53.8206 33.6301 53.2606 34.2001L43.6806 43.7801C43.4106 44.0501 43.0506 44.2001 42.6606 44.2001H42.6506Z"
+                fill="#A8BD3A"
+            />
+            <path
+                d="M51.5709 31.5801C51.8109 31.5801 52.0509 31.6701 52.2309 31.8601L52.8909 32.5201C53.2609 32.8901 53.2609 33.4801 52.8909 33.8501L43.3109 43.4301C43.1309 43.6101 42.8909 43.7101 42.6509 43.7101C42.4109 43.7101 42.1709 43.6201 41.9909 43.4301L37.6709 39.1101C37.3009 38.7401 37.3009 38.1501 37.6709 37.7801L38.3309 37.1201C38.5109 36.9401 38.7509 36.8501 38.9909 36.8501C39.2309 36.8501 39.4709 36.9401 39.6509 37.1301L42.6409 40.1201L50.9009 31.8601C51.0809 31.6801 51.3209 31.5801 51.5609 31.5801M51.5609 30.5801C51.0409 30.5801 50.5609 30.7801 50.1909 31.1501L42.6409 38.7001L40.3509 36.4101C39.9809 36.0401 39.5009 35.8401 38.9809 35.8401C38.4609 35.8401 37.9809 36.0401 37.6109 36.4101L36.9509 37.0701C36.1909 37.8301 36.1909 39.0601 36.9509 39.8101L41.2709 44.1301C41.6409 44.5001 42.1209 44.7001 42.6409 44.7001C43.1609 44.7001 43.6409 44.5001 44.0109 44.1301L53.5909 34.5501C53.9609 34.1801 54.1609 33.7001 54.1609 33.1801C54.1609 32.6601 53.9609 32.1801 53.5909 31.8101L52.9309 31.1501C52.5609 30.7801 52.0809 30.5801 51.5609 30.5801Z"
+                fill="#003C57"
+            />
+        </svg>
     {%- endif -%}
 {% endmacro %}

package/components/list/_list.scss

@@ -90,6 +90,9 @@
 
     &--p {
         padding: 0;
+        .ons-list__item {
+            margin: 0;
+        }
     }
 
     &--summary {

package/components/list/_macro.njk

@@ -16,23 +16,15 @@
     {% if params.element and listLength > 1 %}
         {% set listEl = params.element | lower %}
     {% elif (params.element == 'ol') and listLength < 2 %}
-        {% set listEl = 'p' %}
+        {% set listEl = 'div' %}
     {% else %}
         {% set listEl = 'ul' %}
     {% endif %}
-
-    {% if listLength < 2 and not params.attributes %}
-        {% set attributes = [params.itemsList[0].attributes] %}
-    {% elif listLength < 2 and params.attributes and params.itemsList[0].attributes and listEl == 'p' %}
-        {% set attributes = [params.attributes, params.itemsList[0].attributes] %}
-    {% else %}
-        {% set attributes = [params.attributes] %}
-    {% endif %}
     {% set openingTag = "<" + listEl %}
     {% set closingTag = "</" + listEl + ">" %}
 
     {{ openingTag | safe }}{% if params.id %}{{ ' ' }}id="{{ params.id }}"{% endif %}
-    class="ons-list{{ ' ons-list--p' if listEl == 'p' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes or params.itemsList[0].attributes %}{% for attributeList in attributes %}{% for attribute, value in (attributeList.items() if attributeList is mapping and attributeList.items else attributeList) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endfor %}{% endif %}>
+    class="ons-list{{ ' ons-list--p' if listEl == 'div' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes %}{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}{% endif %}>
     {%- for item in params.itemsList -%}
         {% set sublistClasses = item.listClasses if item.listClasses %}
         {%
@@ -124,16 +116,18 @@
         {% endset %}
 
         {% if listLength > 1 or listEl == 'ul' %}
-            <li
-                class="ons-list__item{{ ' ' + item.listClasses if item.listClasses else '' }}"
-                {% if item.current %}aria-current="true"{% endif %}
-                {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
-            >
-                {{- listItem | safe -}}
-            </li>
+            {% set listItemEl = 'li' %}
         {% else %}
-            {{- listItem | safe -}}
+            {% set listItemEl = 'p' %}
         {% endif %}
+        {% set openingItemTag = "<" + listItemEl %}
+        {% set closingItemTag = "</" + listItemEl + ">" %}
+
+        {{ openingItemTag | safe }}
+        class="ons-list__item{{ ' ' + item.listClasses if item.listClasses else '' }}" {% if item.current %}aria-current="true"{% endif %}
+        {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
+        > {{- listItem | safe -}}
+        {{ closingItemTag | safe }}
     {%- endfor -%}
     {{ closingTag | safe }}
 {% endmacro %}

package/components/list/_macro.spec.js

@@ -194,11 +194,15 @@ describe('macro: list', () => {
                 }),
             );
 
-            it('renders a <p> element', () => {
-                expect($('.ons-list')[0].tagName).toBe('p');
+            it('renders the list as a <div> container element', () => {
+                expect($('.ons-list')[0].tagName).toBe('div');
             });
 
-            it('has `ons-list--p` modifier class', () => {
+            it('renders the list item as a <p> element', () => {
+                expect($('.ons-list__item')[0].tagName).toBe('p');
+            });
+
+            it('the list has `ons-list--p` modifier class', () => {
                 expect($('.ons-list').hasClass('ons-list--p')).toBe(true);
             });
 
@@ -206,14 +210,14 @@ describe('macro: list', () => {
                 expect($('.ons-list li').length).toBe(0);
             });
 
-            it('has additionally provided list `attributes`', () => {
+            it('has additionally provided list `attributes` on the <div>', () => {
                 expect($('.ons-list').attr('a')).toBe('123');
                 expect($('.ons-list').attr('b')).toBe('456');
             });
 
-            it('has additionally provided list item `attributes`', () => {
-                expect($('.ons-list--p').attr('c')).toBe('789');
-                expect($('.ons-list--p').attr('d')).toBe('123');
+            it('has additionally provided list item `attributes` on the <p>', () => {
+                expect($('.ons-list--p > .ons-list__item').attr('c')).toBe('789');
+                expect($('.ons-list--p > .ons-list__item').attr('d')).toBe('123');
             });
         });
 

package/components/message-list/_macro.njk

@@ -15,10 +15,17 @@
                     <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--date ons-u-fs-s">
                         {{ message.dateText }}
                     </dd>
+                    <dt class="ons-message-item__metadata-term ons-message-item__metadata-term--body ons-u-vh">
+                        {% if params.ariaLabelMsg and not params.bodyLabel %}
+                            {{ params.ariaLabelMsg | default("Message text") }}:
+                        {% else %}
+                            {{ params.bodyLabel | default("Message text") }}:
+                        {% endif %}
+                    </dt>
+                    <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--body ons-u-fs-r ons-u-mt-s">
+                        {{ message.body | safe }}
+                    </dd>
                 </dl>
-                <div class="ons-message-item__body" aria-label="{{ params.ariaLabelMsg | default("Message text") }}">
-                    {{ message.body | safe }}
-                </div>
                 <div class="ons-message-item__link ons-u-vh">
                     <a href="{{ message.subject.url }}">{{ params.hiddenReadLabel }}: {{ message.subject.text }}</a>
                 </div>