Timeline Card

The Timeline Card has two variants:
Image only, that usually describes a change in season.
Image and copy, these are used as points on the timeline.

Markup Details
                            {{ attach_library('goizueta_theme/timeline-card') }}


{%
  set attributes = attributes ? attributes.addClass('timeline-card') : ' class="timeline-card"'
%}

<article {{ attributes|raw }}>
  <div class="timeline-card__inner {{season_class}}">
  {% if type == 'breaker' %}
    <div class="timeline-card__breaker">
    {% include '@components/heading/heading.twig' with {
       "heading" : {
          "title_light": heading.title_light,
          "title_heavy": heading.title_heavy,
          "url": heading.url,
          "heading_level": "3",
          "classes": heading.classes
        }
      } only %}
    </div>
  {% else %}
    {% if image %}
      <div class="timeline-card__image--container">
        {{ image }}
      </div>
    {% endif %}
    <div class="timeline-card-content__container {{ program_class }} {% if image %}with-image{% else %}no-image{% endif %}">
      <div class="timeline-card__eyebrow">
        {% include '@components/heading/heading.twig' with {
          "heading" : {
            "title_light": heading.title_light,
            "title_heavy": heading.title_heavy,
            "url": heading.url,
            "heading_level": "4",
            "classes": heading.classes
          }
        } only %}
      </div>
      <div class="timeline-card-content__inner">
        <h5 class="timeline-card-content__title">{{ title }}</h5>
        <div class="timeline-card-content__text-container">
          {{ body }}
        </div>
        <a class="timeline-card-content__link" href="{{ link.url }}"> {{ link.text }}</a>
      </div>
    </div>
    {% endif %}
  </div>
</article>