{%- macro onsCard(params) -%}
    {% set headingLevel = params.title.headingLevel | default(2) | string %}
    {% set openingHeadingTag = "<h" + headingLevel %}
    {% set closingHeadingTag = "</h" + headingLevel + ">" %}
    {% set placeholderSrcset = (params.image.placeholderUrl if params.image.placeholderUrl else "") + "/img/small/placeholder-card.png 1x, " + (params.image.placeholderUrl if params.image.placeholderUrl else "") + "/img/large/placeholder-card.png 2x" %}

    <div class="ons-card{% if params.variant == 'feature' %}{{ ' ' }}ons-card--feature ons-u-flex-grow{% endif %}">
        {% set imageBlock %}
            {%- if params.image -%}
                {% if params.image.smallSrc %}
                    <img
                        class="ons-card__image ons-u-mb-s"
                        height="200"
                        width="303"
                        {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}
                        src="{{ params.image.smallSrc }}"
                        alt="{{ params.image.alt }}"
                        loading="lazy"
                    />
                {% elif params.image == true or params.image.placeholderUrl %}
                    <img
                        class="ons-card__image ons-u-mb-s "
                        height="100"
                        width="303"
                        srcset="{{ placeholderSrcset }}"
                        src="{{- params.image.placeholderUrl if params.image.placeholderUrl -}}/img/small/placeholder-card.png"
                        alt=""
                        loading="lazy"
                    />
                {% endif %}
            {%- endif -%}
        {% endset %}

        {% set titleBlock %}
            {{ openingHeadingTag | safe }}
            class="ons-card__title {{ params.title.classes | default('ons-u-fs-m') }}" id="{{ params.title.id }}"> {{ params.title.text }}
            {{ closingHeadingTag | safe }}
        {% endset %}

        {% if params.title.url %}
            <a href="{{ params.title.url }}" class="ons-card__link{% if params.title.subtitle %}{{ ' ' }}ons-u-mb-xs{% endif %}">
                {{ imageBlock | safe }}
                {{ titleBlock | safe }}
            </a>
        {% else %}
            {{ imageBlock | safe }}
            {{ titleBlock | safe }}
        {% endif %}

        {% if params.title.subtitle %}
            <p class="ons-card__subtitle ons-u-fs-s">{{ params.title.subtitle }}</p>
        {% endif %}

        {% if params.body.figure %}
            <p class="ons-card__figure ons-u-fs-3xl ons-u-fw-b ons-u-mb-no">{{ params.body.figure }}</p>
        {% endif %}

        <p id="{{ params.body.id }}" class="ons-card__body">{{ params.body.text }}</p>

        {%- if params.body.itemsList -%}
            {% from "components/list/_macro.njk" import onsList %}
            {{
                onsList({
                    "variants": 'dashed',
                    "itemsList": params.body.itemsList
                })
            }}
        {% endif %}
    </div>
{%- endmacro -%}