{% set variant = variant|default('normal') %}
{% set variantClasses = {
    normal: 'card-normal',
    interactive: 'card-interactive',
    metric: 'card-metric',
    error: 'card-error',
    compact: 'card-compact'
} %}
{% set classes = ['card', variantClasses[variant]|default('card-normal'), cardClass|default(class|default(''))]|filter(value => value)|join(' ') %}
{% set tag = href|default(null) ? 'a' : element|default('article') %}

<{{ tag }} class="{{ classes }}"{% if href|default(null) %} href="{{ href }}"{% endif %}{% if id is defined %} id="{{ id }}"{% endif %}>
    {% if title is defined or header is defined %}
        <div class="card-header">
            {% if header is defined %}
                {{ header|raw }}
            {% else %}
                <h3 class="type-card-title">{{ title }}</h3>
                {% if subtitle is defined %}<p class="mt-1 type-helper">{{ subtitle }}</p>{% endif %}
            {% endif %}
        </div>
    {% endif %}
    <div class="card-body">{{ content|default('')|raw }}</div>
    {% if footer is defined %}<div class="card-footer">{{ footer|raw }}</div>{% endif %}
</{{ tag }}>