<{{ htmlElement | default:'div' }} class="tna-card {{ classes }}{% if horizontal %} tna-card--horizontal{% endif %}{% if style == 'boxed' %} tna-card--contrast{% endif %}{% if style == 'accent' %} tna-card--accent{% endif %}" data-module="tna-card"{% for attribute, value in attributes.items %} {{ attribute }}="{{ value }}"{% endfor %}>
  <div class="tna-card__inner">
    {% if supertitle %}
      <hgroup class="tna-hgroup-{{ headingSize | default:'s' }} tna-card__heading">
        <h{{ headingLevel }} class="tna-hgroup__title">
          <span class="tna-hgroup__supertitle">{{ supertitle }}</span>
        {% if href %}
          <a href="{{ href }}" class="tna-card__heading-link">{{ title }}</a>
        {% else %}
          {{ title }}
        {% endif %}
        </h{{ headingLevel }}>
      </hgroup>
    {% else %}
      <h{{ headingLevel }} class="tna-heading-{{ headingSize | default:'s' }} tna-card__heading">
      {% if href %}
        <a href="{{ href }}" class="tna-card__heading-link">{{ title }}</a>
      {% else %}
        {{ title }}
      {% endif %}
      </h{{ headingLevel }}>
    {% endif %}
    {% if imageSrc %}
      {% if href %}
      <a href="{{ href }}" class="tna-card__image-container" tabindex="-1">
      {% else %}
      <div class="tna-card__image-container">
      {% endif %}
        <picture class="tna-card__image">
          {% if imageSources %}
          {% for source in imageSources %}
          <source srcset="{{ source.src }}" type="{{ source.type }}" width="{% if source.width %}{{ source.width }}{% else %}{{ imageWidth }}{% endif %}" height="{% if source.height %}{{ source.height }}{% else %}{{ imageHeight }}{% endif %}">
          {% endfor %}
          <source srcset="{{ imageSrc }}" type="image/jpeg" width="{{ imageWidth }}" height="{{ imageHeight }}">
          {% endif %}
          <img src="{{ imageSrc }}" alt="{{ imageAlt }}" width="{{ imageWidth }}" height="{{ imageHeight }}">
        </picture>
        {% if label %}
        <div class="tna-chip tna-card__image-label">
          {{ label }}
        </div>
        {% endif %}
      {% if href %}
      </a>
      {% else %}
      </div>
      {% endif %}
    {% endif %}
    <div class="tna-card__body">
    {% if meta %}
    <ul class="tna-card__meta">
      {% for item in meta %}
      <li class="tna-card__meta-item">
        {% if item.icon %}
        <i class="fa-solid fa-{{ item.icon }}"></i>
        {% endif %}
        {{ item.text }}
      </li>
      {% endfor %}
    </ul>
    {% endif %}
    {% if text %}
      <p>{{ text }}</p>
    {% else %}
      {{ body | safe }}
    {% endif %}
    </div>
  {% if actions %}
    <div class="tna-card__actions">
    {% for item in actions %}
      <a href="{{ item.href }}" class="tna-card__action" role="button" {% if item.title %}title="{{ item.title }}"{% endif %}>
        {% if item.brandIcon %}
        <i class="fa-brands fa-{{ item.brandIcon }}"></i>
        {% elif item.icon %}
        <i class="fa-solid fa-{{ item.icon }}"></i>
        {% endif %}
        {{ item.text }}
      </a>
    {% endfor %}
    </div>
  {% endif %}
  </div>
</{{ htmlElement | default:'div' }}>
