{#
/**
 * @file
 * Template for Card component.
 */
#}
{% set alt_text = alt_text|default(title) %}

<article {{ attributes.addClass('kern-card', link ? 'kern-card--interactive') }}{% if storybook %}style="max-width: 320px;"{% endif %}>
  {% if image %}
    <div class="kern-card__media">
      {{ image }}
    </div>
  {% endif %}
  <div class="kern-card__container">
    <header class="kern-card__header">
      <hgroup>
        {% if preline %}
          <p class="kern-preline">{{ preline }}</p>
        {% endif %}
        <h2 class="kern-title">
          {% if link %}<a href="{{ link }}" class="kern-link--stretched">{% endif %}
          {{ title }}
          {% if link %}</a>{% endif %}
        </h2>
        {% if subline %}
        <p class="kern-subline">{{ subline }}</p>
        {% endif %}
      </hgroup>
    </header>
    {% if body %}
      <section class="kern-card__body">
        <div class="kern-body">{{ body }}</div>
      </section>
    {% endif %}
    {% if footer %}
      <footer class="kern-card__footer">
        {{ footer }}
      </footer>
    {% endif %}
  </div>
</article>

