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.

This is the title
Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
This is the link text
- 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>