@ons/design-system 70.0.7 → 70.0.9

package/components/skip-to-content/_macro.spec.js

@@ -6,58 +6,58 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 describe('macro: skip-to-content', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(
-      renderComponent('skip-to-content', {
-        url: '#example-anchor',
-        text: 'Skip to the content',
-      }),
-    );
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has a hyperlink element', async () => {
-    const $ = cheerio.load(
-      renderComponent('skip-to-content', {
-        url: '#example-anchor',
-        text: 'Skip to the content',
-      }),
-    );
-
-    expect($('.ons-skip-to-content')[0].tagName).toBe('a');
-  });
-
-  it('has skip link with the provided `url`', async () => {
-    const $ = cheerio.load(
-      renderComponent('skip-to-content', {
-        url: '#example-anchor',
-        text: 'Skip to the content',
-      }),
-    );
-
-    expect($('.ons-skip-to-content').attr('href')).toBe('#example-anchor');
-  });
-
-  it('has skip link with the provided `text`', async () => {
-    const $ = cheerio.load(
-      renderComponent('skip-to-content', {
-        url: '#example-anchor',
-        text: 'Skip to the content',
-      }),
-    );
-
-    expect($('.ons-skip-to-content').text().trim()).toBe('Skip to the content');
-  });
-
-  it('has skip link with the default text if no text provided`', async () => {
-    const $ = cheerio.load(
-      renderComponent('skip-to-content', {
-        url: '#example-anchor',
-      }),
-    );
-
-    expect($('.ons-skip-to-content').text().trim()).toBe('Skip to content');
-  });
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(
+            renderComponent('skip-to-content', {
+                url: '#example-anchor',
+                text: 'Skip to the content',
+            }),
+        );
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('has a hyperlink element', async () => {
+        const $ = cheerio.load(
+            renderComponent('skip-to-content', {
+                url: '#example-anchor',
+                text: 'Skip to the content',
+            }),
+        );
+
+        expect($('.ons-skip-to-content')[0].tagName).toBe('a');
+    });
+
+    it('has skip link with the provided `url`', async () => {
+        const $ = cheerio.load(
+            renderComponent('skip-to-content', {
+                url: '#example-anchor',
+                text: 'Skip to the content',
+            }),
+        );
+
+        expect($('.ons-skip-to-content').attr('href')).toBe('#example-anchor');
+    });
+
+    it('has skip link with the provided `text`', async () => {
+        const $ = cheerio.load(
+            renderComponent('skip-to-content', {
+                url: '#example-anchor',
+                text: 'Skip to the content',
+            }),
+        );
+
+        expect($('.ons-skip-to-content').text().trim()).toBe('Skip to the content');
+    });
+
+    it('has skip link with the default text if no text provided`', async () => {
+        const $ = cheerio.load(
+            renderComponent('skip-to-content', {
+                url: '#example-anchor',
+            }),
+        );
+
+        expect($('.ons-skip-to-content').text().trim()).toBe('Skip to content');
+    });
 });

package/components/skip-to-content/_skip.scss

@@ -1,33 +1,33 @@
 .ons-skip-to-content {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  display: block;
-  font-size: 1.1rem;
-  font-weight: $font-weight-bold;
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  white-space: nowrap;
-  width: 1px;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    display: block;
+    font-size: 1.1rem;
+    font-weight: $font-weight-bold;
+    height: 1px;
+    margin: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    white-space: nowrap;
+    width: 1px;
 
-  &:focus {
-    background-color: var(--ons-color-focus);
-    box-shadow: 0;
-    clip: auto;
-    clip-path: none;
-    color: var(--ons-color-text-link-focus);
-    height: auto;
-    margin: inherit;
-    max-height: 20em;
-    outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
-    outline-offset: -4px;
-    overflow: visible;
-    padding: 1rem;
-    position: static;
-    text-decoration: underline solid var(--ons-color-text-link-focus) 4px;
-    white-space: inherit;
-    width: auto;
-  }
+    &:focus {
+        background-color: var(--ons-color-focus);
+        box-shadow: 0;
+        clip: auto;
+        clip-path: none;
+        color: var(--ons-color-text-link-focus);
+        height: auto;
+        margin: inherit;
+        max-height: 20em;
+        outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+        outline-offset: -4px;
+        overflow: visible;
+        padding: 1rem;
+        position: static;
+        text-decoration: underline solid var(--ons-color-text-link-focus) 4px;
+        white-space: inherit;
+        width: auto;
+    }
 }

package/components/skip-to-content/example-skip-to-content.njk

@@ -1,6 +1,7 @@
 ---
 fullWidth: true
 ---
+
 {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
 {{
     onsSkipToContent({

package/components/skip-to-content/skip-to-content.dom.js

@@ -2,12 +2,12 @@ import domready from '../../js/domready';
 import skipToMain from './skip-to-content';
 
 async function initaliseSkipToLink() {
-  const links = [...document.querySelectorAll('.ons-skip-to-content')];
-  if (links.length) {
-    links.forEach((link) => {
-      skipToMain(link);
-    });
-  }
+    const links = [...document.querySelectorAll('.ons-skip-to-content')];
+    if (links.length) {
+        links.forEach((link) => {
+            skipToMain(link);
+        });
+    }
 }
 
 domready(initaliseSkipToLink);

package/components/skip-to-content/skip-to-content.js

@@ -1,9 +1,9 @@
 export default function skipToMain(link) {
-  const id = link.getAttribute('href').replace('#', '');
-  link.addEventListener('click', (event) => {
-    event.preventDefault();
-    document.getElementById(id).tabIndex = -1;
-    document.getElementById(id).style.outline = 'none';
-    document.getElementById(id).focus();
-  });
+    const id = link.getAttribute('href').replace('#', '');
+    link.addEventListener('click', (event) => {
+        event.preventDefault();
+        document.getElementById(id).tabIndex = -1;
+        document.getElementById(id).style.outline = 'none';
+        document.getElementById(id).focus();
+    });
 }

package/components/skip-to-content/skip-to-content.spec.js

@@ -12,33 +12,33 @@ const EXAMPLE_SKIP_TO_LINK_TEMPLATE = `
 `;
 
 describe('script: skip-to-content', () => {
-  it('sets `tabIndex` of target element to -1', async () => {
-    await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
+    it('sets `tabIndex` of target element to -1', async () => {
+        await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
 
-    await page.focus('.ons-skip-to-content');
-    await page.keyboard.press('Enter');
+        await page.focus('.ons-skip-to-content');
+        await page.keyboard.press('Enter');
 
-    const targetTabIndex = await page.$eval('#target-element', (el) => el.tabIndex);
-    expect(targetTabIndex).toBe(-1);
-  });
+        const targetTabIndex = await page.$eval('#target-element', (el) => el.tabIndex);
+        expect(targetTabIndex).toBe(-1);
+    });
 
-  it('removes outline from target element on navigate', async () => {
-    await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
+    it('removes outline from target element on navigate', async () => {
+        await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
 
-    await page.focus('.ons-skip-to-content');
-    await page.keyboard.press('Enter');
+        await page.focus('.ons-skip-to-content');
+        await page.keyboard.press('Enter');
 
-    const targetOutline = await page.$eval('#target-element', (el) => el.style.outline);
-    expect(targetOutline).toBe('none');
-  });
+        const targetOutline = await page.$eval('#target-element', (el) => el.style.outline);
+        expect(targetOutline).toBe('none');
+    });
 
-  it('focuses target element on navigate', async () => {
-    await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
+    it('focuses target element on navigate', async () => {
+        await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
 
-    await page.focus('.ons-skip-to-content');
-    await page.keyboard.press('Enter');
+        await page.focus('.ons-skip-to-content');
+        await page.keyboard.press('Enter');
 
-    const focusedElementId = await page.evaluate(() => document.activeElement.id);
-    expect(focusedElementId).toBe('target-element');
-  });
+        const focusedElementId = await page.evaluate(() => document.activeElement.id);
+        expect(focusedElementId).toBe('target-element');
+    });
 });

package/components/status/_macro.njk

@@ -9,5 +9,5 @@
         {% set sizeClass = ' ons-status--small' %}
     {% endif %}
 
-    <span class="ons-status{{typeClass}}{{sizeClass}}">{{ params.label }}</span>
+    <span class="ons-status{{ typeClass }}{{ sizeClass }}">{{ params.label }}</span>
 {% endmacro %}

package/components/status/_macro.spec.js

@@ -6,68 +6,68 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 describe('macro: status', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(
-      renderComponent('status', {
-        variant: 'success',
-        label: 'Example status message',
-        size: 'small',
-      }),
-    );
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(
+            renderComponent('status', {
+                variant: 'success',
+                label: 'Example status message',
+                size: 'small',
+            }),
+        );
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has the default variant "info" when `variant` is not provided', () => {
-    const $ = cheerio.load(
-      renderComponent('status', {
-        label: 'Example status message',
-      }),
-    );
+    it('has the default variant "info" when `variant` is not provided', () => {
+        const $ = cheerio.load(
+            renderComponent('status', {
+                label: 'Example status message',
+            }),
+        );
 
-    expect($('.ons-status').hasClass('ons-status--info')).toBe(true);
-  });
+        expect($('.ons-status').hasClass('ons-status--info')).toBe(true);
+    });
 
-  it('has the provided `variant`', () => {
-    const $ = cheerio.load(
-      renderComponent('status', {
-        variant: 'success',
-        label: 'Example status message',
-      }),
-    );
+    it('has the provided `variant`', () => {
+        const $ = cheerio.load(
+            renderComponent('status', {
+                variant: 'success',
+                label: 'Example status message',
+            }),
+        );
 
-    expect($('.ons-status').hasClass('ons-status--success')).toBe(true);
-  });
+        expect($('.ons-status').hasClass('ons-status--success')).toBe(true);
+    });
 
-  it('does not have the `ons-status--small` modifier by default', () => {
-    const $ = cheerio.load(
-      renderComponent('status', {
-        label: 'Example status message',
-      }),
-    );
+    it('does not have the `ons-status--small` modifier by default', () => {
+        const $ = cheerio.load(
+            renderComponent('status', {
+                label: 'Example status message',
+            }),
+        );
 
-    expect($('.ons-status').hasClass('ons-status--small')).not.toBe(true);
-  });
+        expect($('.ons-status').hasClass('ons-status--small')).not.toBe(true);
+    });
 
-  it('has the `ons-status--small` when provided', () => {
-    const $ = cheerio.load(
-      renderComponent('status', {
-        label: 'Example status message',
-        size: 'small',
-      }),
-    );
+    it('has the `ons-status--small` when provided', () => {
+        const $ = cheerio.load(
+            renderComponent('status', {
+                label: 'Example status message',
+                size: 'small',
+            }),
+        );
 
-    expect($('.ons-status').hasClass('ons-status--small')).toBe(true);
-  });
+        expect($('.ons-status').hasClass('ons-status--small')).toBe(true);
+    });
 
-  it('has the provided `label`', () => {
-    const $ = cheerio.load(
-      renderComponent('status', {
-        label: 'Example status message',
-      }),
-    );
+    it('has the provided `label`', () => {
+        const $ = cheerio.load(
+            renderComponent('status', {
+                label: 'Example status message',
+            }),
+        );
 
-    expect($('.ons-status').text().trim()).toBe('Example status message');
-  });
+        expect($('.ons-status').text().trim()).toBe('Example status message');
+    });
 });

package/components/status/_status.scss

@@ -1,43 +1,43 @@
 @mixin status-dot($status-color) {
-  background-color: $status-color;
-  border: 3px solid $status-color;
+    background-color: $status-color;
+    border: 3px solid $status-color;
 }
 
 @mixin status-size($status-size: 1rem, $status-mb: -0.15rem) {
-  height: $status-size;
-  margin-bottom: $status-mb;
-  width: $status-size;
+    height: $status-size;
+    margin-bottom: $status-mb;
+    width: $status-size;
 }
 
 .ons-status {
-  &::before {
-    @include status-size;
+    &::before {
+        @include status-size;
 
-    border-radius: 100%;
-    box-sizing: border-box;
-    content: '';
-    display: inline-block;
-    margin-right: 0.391rem;
-  }
+        border-radius: 100%;
+        box-sizing: border-box;
+        content: '';
+        display: inline-block;
+        margin-right: 0.391rem;
+    }
 
-  /* Small status indicators for information dense situations */
-  &.ons-status--small::before {
-    @include status-size(0.555555rem, $status-mb: 0.055556rem);
-  }
+    /* Small status indicators for information dense situations */
+    &.ons-status--small::before {
+        @include status-size(0.5556rem, $status-mb: 0.0556rem);
+    }
 
-  &.ons-status--success::before {
-    @include status-dot(var(--ons-color-success-vibrant));
-  }
-  &.ons-status--pending::before {
-    @include status-dot(var(--ons-color-pending-vibrant));
-  }
-  &.ons-status--error::before {
-    @include status-dot(var(--ons-color-errors-vibrant));
-  }
-  &.ons-status--dead::before {
-    @include status-dot(var(--ons-color-dead));
-  }
-  &.ons-status--info::before {
-    @include status-dot(var(--ons-color-info-vibrant));
-  }
+    &.ons-status--success::before {
+        @include status-dot(var(--ons-color-success-vibrant));
+    }
+    &.ons-status--pending::before {
+        @include status-dot(var(--ons-color-pending-vibrant));
+    }
+    &.ons-status--error::before {
+        @include status-dot(var(--ons-color-errors-vibrant));
+    }
+    &.ons-status--dead::before {
+        @include status-dot(var(--ons-color-dead));
+    }
+    &.ons-status--info::before {
+        @include status-dot(var(--ons-color-info-vibrant));
+    }
 }

package/components/summary/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsSummary(params) %}
     {% set className = "ons-summary" %}
-    {% set headingLevel = 2 %}
+    {% set headingLevel = "2" %}
 
     {% if params.variant == "hub" %}
         {% set variantHub = true %}
@@ -10,42 +10,53 @@
     {% endif %}
 
     {% if params.classes %}
-         {% set className = className + " " + params.classes %}
+        {% set className = className + " " + params.classes %}
     {% endif %}
 
     <div class="{{ className }}">
         {% for summary in params.summaries %}
             {% if summary.summaryTitle %}
-                <h2 class="ons-summary__title ons-u-mb-m{{ " ons-u-mt-m" if loop.index > 1 else "" }}">{{ summary.summaryTitle }}</h2>
-                {% set headingLevel = 3 %}
+                <h2 class="ons-summary__title ons-u-mb-m{{ ' ons-u-mt-m' if loop.index > 1 }}">{{ summary.summaryTitle }}</h2>
+                {% set headingLevel = "3" %}
             {% endif %}
             {% for group in summary.groups %}
-                <div {% if group.id %}id="{{ group.id }}" {% endif %} class="ons-summary__group{{ variantClasses }}">
+                <div {% if group.id %}id="{{ group.id }}"{{ ' ' }}{% endif %}class="ons-summary__group{{ variantClasses }}">
                     {% if group.groupTitle %}
-                        <h{{ headingLevel }} class="ons-summary__group-title">{{ group.groupTitle }}</h{{ headingLevel }}>
+                        {% set openingHeadingTag = "<h" + headingLevel %}
+                        {% set closingHeadingTag = "</h" + headingLevel + ">" %}
+                        {{ openingHeadingTag | safe }}
+                        class="ons-summary__group-title">{{ group.groupTitle }}{{ closingHeadingTag | safe }}
                     {% endif %}
                     {% if group.rows %}
                         <dl class="ons-summary__items">
                             {% for row in group.rows %}
                                 {% set itemClass = "" %}
-                                {% if row.error %} {% set itemClass = " ons-summary__item--error" %}{% endif %}
-                                {% if row.total %} {% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %}
-                                <div {% if row.id %}id="{{ row.id }}" {% endif %}class="ons-summary__item{{ itemClass }}">
+                                {% if row.error %}{% set itemClass = " ons-summary__item--error" %}{% endif %}
+                                {% if row.total %}{% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %}
+                                <div {% if row.id %}id="{{ row.id }}"{% endif %}class="ons-summary__item{{ itemClass }}">
                                     {% if row.errorMessage %}
                                         <div class="ons-summary__row-title--error ons-u-fs-r">{{ row.errorMessage }}</div>
                                     {% endif %}
                                     {% if row.rowItems | length > 1 and row.rowTitle %}
-                                        <div class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">{{ row.rowTitle }}</div>
+                                        <div class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">
+                                            {{- row.rowTitle -}}
+                                        </div>
                                     {% endif %}
 
                                     {% for rowItem in row.rowItems %}
-                                        <div class="ons-summary__row{{ " ons-summary__row--has-values" if rowItem.valueList else "" }}"{% if rowItem.id %} id="{{ rowItem.id }}"{% endif %}>
-                                            <dt class="ons-summary__item-title"
-                                                {% if rowItem.rowTitleAttributes %}{% for attribute, value in (rowItem.rowTitleAttributes.items() if rowItem.rowTitleAttributes is mapping and rowItem.rowTitleAttributes.items else rowItem.rowTitleAttributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
+                                        <div
+                                            class="ons-summary__row{{ ' ons-summary__row--has-values' if rowItem.valueList }}"
+                                            {% if rowItem.id %}id="{{ rowItem.id }}"{% endif %}
+                                        >
+                                            <dt
+                                                class="ons-summary__item-title"
+                                                {% if rowItem.rowTitleAttributes %}{% for attribute, value in (rowItem.rowTitleAttributes.items() if rowItem.rowTitleAttributes is mapping and rowItem.rowTitleAttributes.items else rowItem.rowTitleAttributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
                                             >
                                                 {% if rowItem.iconType %}
                                                     {% from "components/icon/_macro.njk" import onsIcon %}
-                                                    <span class="ons-summary__item-title-icon{% if rowItem.iconType == 'check' %} ons-summary__item-title-icon--check{% endif %}">
+                                                    <span
+                                                        class="ons-summary__item-title-icon{{ ' ons-summary__item-title-icon--check' if rowItem.iconType == 'check' }}"
+                                                    >
                                                         {{-
                                                             onsIcon({
                                                                 "iconType": rowItem.iconType
@@ -57,7 +68,9 @@
                                                     </span>
                                                 {% endif %}
 
-                                                <div class="ons-summary__item--text{{ ' ons-summary__item-title--text' if rowItem.iconType else "" }}">
+                                                <div
+                                                    class="ons-summary__item--text{{ ' ons-summary__item-title--text' if rowItem.iconType }}"
+                                                >
                                                     {{- rowItem.rowTitle | default(row.rowTitle) | safe -}}
                                                 </div>
 
@@ -68,8 +81,8 @@
                                             </dt>
                                             {% if rowItem.valueList %}
                                                 <dd
-                                                    class="ons-summary__values{% if not rowItem.actions %} ons-summary__values--2{% endif %}"
-                                                    {% if rowItem.attributes %}{% for attribute, value in (rowItem.attributes.items() if rowItem.attributes is mapping and rowItem.attributes.items else rowItem.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
+                                                    class="ons-summary__values{{ ' ons-summary__values--2' if not rowItem.actions }}"
+                                                    {% if rowItem.attributes %}{% for attribute, value in (rowItem.attributes.items() if rowItem.attributes is mapping and rowItem.attributes.items else rowItem.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
                                                 >
                                                     {% if rowItem.valueList | length == 1 %}
                                                         <span class="ons-summary__text">{{ rowItem.valueList[0].text | safe }}</span>
@@ -101,8 +114,13 @@
                                                         <a
                                                             href="{{ action.url }}"
                                                             class="ons-summary__button"
-                                                            {% if action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
-                                                        ><span class="ons-summary__button-text" aria-hidden="true">{{ action.text }}</span><span class="ons-u-vh">{{ action.visuallyHiddenText }}</span></a>
+                                                            {% if action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                                                        >
+                                                            <span class="ons-summary__button-text" aria-hidden="true">
+                                                                {{- action.text -}}
+                                                            </span>
+                                                            <span class="ons-u-vh">{{ action.visuallyHiddenText }}</span>
+                                                        </a>
                                                     {% endfor %}
                                                 </dd>
                                             {% endif %}
@@ -116,10 +134,22 @@
                     {% endif %}
 
                     {% if group.summaryLink %}
-                        <div class="ons-summary__link{% if group.placeholderText or group.rows %} ons-u-pt-s{% endif %}{% if group.placeholderText is not defined and group.rows | length > 1 and params.variant != 'card' %} ons-u-bt{% endif %}{% if not group.last %} ons-u-mb-xl{% endif %}">
-                            {% if params.variant == 'card' %}<div>{% endif %}
-                                <a {% if group.summaryLink.attributes %}{% for attribute, value in (group.summaryLink.attributes.items() if group.summaryLink.attributes is mapping and group.summaryLink.attributes.items else group.summaryLink.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %} href="{{ group.summaryLink.url }}">{{ group.summaryLink.text }}</a>
-                            {% if params.variant == 'card' %}</div>{% endif %}
+                        <div
+                            class="ons-summary__link{{ ' ons-u-pt-s' if group.placeholderText or group.rows }}{{ ' ons-u-bt' if group.placeholderText is not defined and group.rows | length > 1 and params.variant != 'card' }}{{ ' ons-u-mb-xl' if not group.last }}"
+                        >
+                            {% set link %}
+                                <a
+                                    {% if group.summaryLink.attributes %}{% for attribute, value in (group.summaryLink.attributes.items() if group.summaryLink.attributes is mapping and group.summaryLink.attributes.items else group.summaryLink.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                                    href="{{ group.summaryLink.url }}"
+                                >
+                                    {{ group.summaryLink.text }}
+                                </a>
+                            {% endset %}
+                            {% if params.variant == 'card' %}
+                                <div>{{ link | safe }}</div>
+                            {% else %}
+                                {{ link | safe }}
+                            {% endif %}
                         </div>
                     {% endif %}
                 </div>