Timeline Container

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. We are using the MIT license version of WOW.js.
https://github.com/graingert/WOW/
We are also using the animate css library from:
https://daneden.github.io/animate.css/
The settings for the wow library are defined in this components js file. Current settings are boxClass: 'timeline-comtainer__card', offset: 100
The docs for these are here: https://wowjs.uk/docs.html

Program Title

100 years Of Impact

Prima luce, cum quibus mons aliud consensu ab eo. Plura mihi bona sunt, inclinet, amari petere vellent. Phasellus laoreet lorem vel dolor tempus vehicula. Unam incolunt Belgae, aliam Aquitani, tertiam. Ut enim ad minim veniam, quis nostrud exercitation. Ab illo tempore, ab est sed immemorabili. Non equidem invideo, miror magis posuere velit aliquet. Paullum deliquit, ponderibus modulisque suis ratio utitur. Quam temere in vitiis, legem sancimus haerentia. Excepteur sint obcaecat cupiditat non proident culpa. Contra legem facit qui id facit quod lex prohibet.
Program Title
8 Semesters
4 Semesters
2 Semesters
Markup Details
                            {{ attach_library('goizueta_theme/timeline-container') }}

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

<section {{ attributes|raw }}>
  <div class="timeline-container__header">
    <div class="timeline-container__program-title">
      {{ program_title }}
    </div>
    {% include '@components/heading/heading.twig' with {
      "heading" : {
        "title_light": heading.title_light,
        "title_heavy": heading.title_heavy,
        "url": heading.url,
        "heading_level": "2",
        "classes": heading.classes
      }
    } only %}
  </div>
  <div class="timeline-container__text">
    {{ program_text }}
  </div>
  <button class="timeline-container__reveal" aria-label="reveal the timeline">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.6 28.4">
      <style>.circleFill{fill:#185785}</style>
      <path class="circleFill" d="M7.7 11.3c-.2.2-.2.6 0 .9.2.2.6.2.9 0l4.5-4.5v14.8c0 .3.3.6.6.6s.6-.3.6-.6V7.7l4.5 4.5c.2.2.6.2.9 0 .2-.2.2-.6 0-.9l-5.5-5.5c-.2-.2-.6-.2-.9 0l-5.6 5.5z"/><path class="circleFill" d="M13.7 27C6.7 27 1 21.3 1 14.3c0-7 5.7-12.8 12.8-12.8 7 0 12.7 5.7 12.7 12.8 0 7-5.8 12.7-12.8 12.7zm0-24.5C7.2 2.5 2 7.8 2 14.3 2 20.8 7.2 26 13.7 26s11.7-5.3 11.7-11.8c.1-6.4-5.2-11.7-11.7-11.7z"/><path class="circleFill" d="M-136.3-241c-.2-.2-.6-.2-.9 0-.2.2-.2.6 0 .9l4.5 4.5h-14.8c-.3 0-.6.3-.6.6s.3.6.6.6h14.8l-4.5 4.5c-.2.2-.2.6 0 .9.2.2.6.2.9 0l5.5-5.5c.2-.2.2-.6 0-.9l-5.5-5.6z"/>
    </svg>
  </button>
  <div class="timeline-container__program-title js-open-time">
    {{ program_title }}
  </div>
  <div class="timeline-container__revealer js-open-time">
    <div class="timeline-container__animation-control" aria-label="Content animates in, to view content without motion uncheck box.">
      <div class="checkbox row">
        <input id="toggle_off" class="timeline-container__toggle" checked type="checkbox" name="animation_value" value="toggle_off">
        <label for="toggle_off">Display content with animation</label>
      </div>
    </div>
    <div class="timeline-container__tabs-section">
      {% if timelines|length > 1 %}
        {% for item in timelines %}
          {% if item.title %}
            <div class="timeline-container__duration-cont">
              <button class="timeline-container__duration{% if loop.first %} js-active{% endif %}" data-duration="{{item.title}}">
                {{ item.title }}
              </button>
              <div class="timeline-container__duration-text">
                {{ item.sub_text }}
              </div>
            </div>
          {% endif %}
        {% endfor %}
      {% endif %}
    </div>
    {% for item in timelines %}
      <ul class="timeline-container__cards {{item.title}} {% if loop.index >1%} js-timeline-hide{% endif %}" data-duration="{{item.title}}">
        {% for card in item.timeline_items %}
          <li class="timeline-container__card fadeInLeftBig">
            {% include '@components/timeline-card/timeline-card.twig' with card only %}
          </li>
        {% endfor %}
      </ul>
    {% endfor %}
  </div>
</section>