Component: Timeline – Horizontal & Vertical Versions

<style>

  .unlcms-timeline {
    --timeline-line-size: 4px;
    --timeline-arrow-size: .56em;
    --timeline-point-size: 1em;
    --timeline-vertical-spacing: 1.33em;
  }

  /* Arrows and timeline points */
  .unlcms-timeline li:nth-child(odd)::before,
  .unlcms-timeline li:nth-child(even)::before,
  .unlcms-timeline li:nth-child(odd)::after,
  .unlcms-timeline li:nth-child(even)::after {
    content: '';
    position: absolute;
  }

  /* Timeline points */
  .unlcms-timeline li::before {
    background-color: var(--dark-gray);
    border: 1px solid var(--dark-gray);
    border-radius: 50%;
    height: var(--timeline-point-size);
    width: var(--timeline-point-size);
  }

  /* Arrows */
  .unlcms-timeline li:nth-child(odd)::after,
  .unlcms-timeline li:nth-child(even)::after {
    border-style: solid;
    height: 0;
    width: 0;
  }

  /* VERTICAL */
  .unlcms-timeline-vertical::before {
    background-image: linear-gradient(transparent, var(--dark-gray) 7.49em, var(--dark-gray) calc(100% - 7.49em), transparent);
    bottom: 0;
    content: '';
    position: absolute;
    top: 0;
    width: var(--timeline-line-size);
  }

  /* Arrows and timeline points */
  .unlcms-timeline-vertical li:nth-child(odd)::before,
  .unlcms-timeline-vertical li:nth-child(even)::before,
  .unlcms-timeline-vertical li:nth-child(odd)::after,
  .unlcms-timeline-vertical li:nth-child(even)::after {
    top: 50%;
    transform: translateY(-50%);
  }

  .unlcms-timeline-vertical {
    container-type: inline-size;
  }

  @container (max-width: 42.09em) {

    .unlcms-timeline-vertical::before {
      left: 0;
    }

    /* Timeline list items */
    .unlcms-timeline-vertical li {
      left: var(--timeline-vertical-spacing);
      width: calc(100% - var(--timeline-vertical-spacing));
    }

    .unlcms-timeline-vertical li:last-child {
      margin-bottom: 0;
    }

    /* Timeline points */
    .unlcms-timeline-vertical li::before {
      left: calc(calc(var(--timeline-vertical-spacing) * -1) - calc(var(--timeline-point-size) / 2) + calc(var(--timeline-line-size) / 2));
    }

    /* Arrows */
    .unlcms-timeline-vertical li::after {
      border-color: transparent var(--bg-card) transparent transparent;
      border-width: var(--timeline-arrow-size) var(--timeline-arrow-size) var(--timeline-arrow-size) 0;
      left: calc(calc(var(--timeline-arrow-size) * -1) + 1px);
    }

  }

  @container (min-width: 42.09em) {

    .unlcms-timeline-vertical::before {
      left: 50%;
      transform: translateX(-50%);
    }

    .unlcms-timeline-vertical li {
      margin-bottom: 0;
      width: calc(50% - var(--timeline-vertical-spacing));
    }

    /* Timeline list items */
    .unlcms-timeline-vertical li:nth-child(even) {
      left: calc(50% + var(--timeline-vertical-spacing));
    }

    .unlcms-timeline-vertical li:not(:first-child) {
      margin-top: -2.37em;
    }

    /* Timeline points */
    .unlcms-timeline-vertical li:nth-child(odd)::before {
      left: calc(100% + var(--timeline-vertical-spacing) - calc(var(--timeline-point-size) / 2));
    }

    .unlcms-timeline-vertical li:nth-child(even)::before {
      left: calc(calc(var(--timeline-vertical-spacing) * -1) - calc(var(--timeline-point-size) / 2));
    }

    /* Arrows */
    .unlcms-timeline-vertical li:nth-child(odd)::after {
      border-color: transparent transparent transparent var(--bg-card);
      border-width: var(--timeline-arrow-size) 0 var(--timeline-arrow-size) var(--timeline-arrow-size);
      right: calc(calc(var(--timeline-arrow-size) * -1) + 1px);
    }

    .unlcms-timeline-vertical li:nth-child(even)::after {
      border-color: transparent var(--bg-card) transparent transparent;
      border-width: var(--timeline-arrow-size) var(--timeline-arrow-size) var(--timeline-arrow-size) 0;
      left: calc(calc(var(--timeline-arrow-size) * -1) + 1px);
    }

  }

  /* HORIZONTAL */
  .unlcms-timeline-horizontal {
    background: linear-gradient(90deg, transparent, var(--dark-gray) 7.49em, var(--dark-gray) calc(100% - 7.49em), transparent) 0 calc(calc(var(--timeline-point-size) / 2) - calc(var(--timeline-line-size) / 2)) / 100% var(--timeline-line-size);
    scroll-snap-type: x mandatory;
  }

  .unlcms-timeline-horizontal li {
    scroll-snap-align: start;
  }

  .unlcms-timeline-horizontal li:first-of-type {
    padding-left: 5.62vw;
  }

  .unlcms-timeline-horizontal li:last-of-type {
    padding-right: 5.62vw;
  }

  /* Arrows and timeline points */
  .unlcms-timeline-horizontal li::before,
  .unlcms-timeline-horizontal li::after {
    left: 50%;
    transform: translateX(-50%);
  }

  /* Timeline points */
  .unlcms-timeline-horizontal li::before {
    top: 0;
  }

  /* Arrows */
  .unlcms-timeline-horizontal li::after {
    border-color: transparent transparent var(--bg-card) transparent;
    border-width: 0 var(--timeline-arrow-size) var(--timeline-arrow-size) var(--timeline-arrow-size);
    top: calc(1.78em - var(--timeline-arrow-size) + 1px);
  }

  /* Cards */
  .unlcms-timeline-horizontal .dcf-card {
    min-width: 23.68em;
  }

</style>

<div class="dcf-bleed dcf-wrapper dcf-pt-9 dcf-pb-9 unl-bg-light-gray">
  <h2>Horizontal Timeline</h2>
  <ol class="dcf-bleed dcf-list-bare dcf-d-flex dcf-flex-no-wrap dcf-gap-4 dcf-mt-6 dcf-mb-0 dcf-pb-1 dcf-bg-no-repeat dcf-overflow-x-scroll unlcms-timeline unlcms-timeline-horizontal" tabindex="0">
    <li class="dcf-pt-6 dcf-relative">
      <div class="dcf-card">
        <div class="dcf-card-block">
          <h3>1869</h3>
          <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
      </div>
    </li>
    <li class="dcf-pt-6 dcf-relative">
      <div class="dcf-card">
        <div class="dcf-card-block">
          <h3>1994</h3>
          <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
      </div>
    </li>
    <li class="dcf-pt-6 dcf-relative">
      <div class="dcf-card">
        <div class="dcf-card-block">
          <h3>2023</h3>
          <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
      </div>
    </li>
    <li class="dcf-pt-6 dcf-relative">
      <div class="dcf-card">
        <div class="dcf-card-block">
          <h3>2023</h3>
          <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
      </div>
    </li>
    <li class="dcf-pt-6 dcf-relative">
      <div class="dcf-card">
        <div class="dcf-card-block">
          <h3>2023</h3>
          <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
      </div>
    </li>
  </ol>
</div>

<div class="dcf-bleed dcf-wrapper dcf-pt-9 dcf-pb-9 unl-bg-light-gray">
  <h2>Vertical Timeline</h2>
  <ol class="dcf-list-bare dcf-relative dcf-mb-0 dcf-pt-6 dcf-pb-6 unlcms-timeline unlcms-timeline-vertical">
    <li class="dcf-relative">
      <div class="dcf-card">
        <div class="dcf-card-block">
          <h3>1869</h3>
          <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
      </div>
    </li>
    <li class="dcf-relative">
      <div class="dcf-card">
        <div class="dcf-card-block">
          <h3>1994</h3>
          <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
      </div>
    </li>
    <li class="dcf-relative">
      <div class="dcf-card">
        <div class="dcf-card-block">
          <h3>2023</h3>
          <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
      </div>
    </li>
  </ol>
</div>
unlcms / project-herbie

Component: Timeline – Horizontal & Vertical Versions #373
