Timeline

Preview

Code

<div class="dd-timeline">
  <div class="dd-timeline__content">
    <div class="dd-timeline__items dd-g">
      <!-- start timeline item -->
      <div class="dd-timeline__item dd-u-1-1">
        <div class="dd-timeline__body dd-g">
          <div class="dd-timeline__image l-box dd-u-1-1">
            <img
              src="https://dummyimage.com/600x400/000/fff"
              alt="slider alt tag for image"
              class="dd-img"
            />
          </div>
          <div class="dd-timeline__copy l-box dd-u-1-1">
            <div class="dd-timeline__year">
              Timeline item year
            </div>
            <div class="dd-timeline__title">
              Timeline item title
            </div>
              <div class="dd-timeline__copy">
                Timeline item copy
              </div>
          </div>
        </div>
      </div>
      <!-- end timeline item -->
      <!-- start timeline item -->
      <div class="dd-timeline__item dd-u-1-1">
        <div class="dd-timeline__body dd-g">
          <div class="dd-timeline__image l-box dd-u-1-1">
            <img
              src="https://dummyimage.com/600x400/000/fff"
              alt="slider alt tag for image"
              class="dd-img"
            />
          </div>
          <div class="dd-timeline__copy l-box dd-u-1-1">
            <div class="dd-timeline__year">
              Timeline item year
            </div>
            <div class="dd-timeline__title">
              Timeline item title
            </div>
              <div class="dd-timeline__copy">
                Timeline item copy
              </div>
          </div>
        </div>
      </div>
      <!-- end timeline item -->
      <!-- start timeline item -->
      <div class="dd-timeline__item dd-u-1-1">
        <div class="dd-timeline__body dd-g">
          <div class="dd-timeline__image l-box dd-u-1-1">
            <img
              src="https://dummyimage.com/600x400/000/fff"
              alt="slider alt tag for image"
              class="dd-img"
            />
          </div>
          <div class="dd-timeline__copy l-box dd-u-1-1">
            <div class="dd-timeline__year">
              Timeline item year
            </div>
            <div class="dd-timeline__title">
              Timeline item title
            </div>
              <div class="dd-timeline__copy">
                Timeline item copy
              </div>
          </div>
        </div>
      </div>
      <!-- end timeline item -->
    </div>
  </div>
</div>