Timelines

<div class="c-timeline">
  <div class="c-timeline__items">
    <a
      href="#"
      class="c-timeline__item c-timeline__item--first"
      style
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
    <a
      href="#"
      class="c-timeline__item c-timeline__item--active"
      style
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
    <a
      href="#"
      class="c-timeline__item c-timeline__item--current"
      style
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
    <a
      href="#"
      class="c-timeline__item c-timeline__item--last"
      style
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
  </div>
</div>

<div class="c-timeline">
  <div class="c-timeline__items">
    <div
      class="c-timeline__item c-timeline__item--empty"
      style="--timeline-item-width: 100"
    ></div>
    <a
      href="#"
      class="c-timeline__item c-timeline__item--active c-timeline__item--current"
      style
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
    <div
      class="c-timeline__item c-timeline__item--empty"
      style="--timeline-item-width: 100"
    ></div>
  </div>
</div>

<div class="c-timeline">
  <div class="c-timeline__items">
    <a
      href="#"
      class="c-timeline__item"
      style
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
    <div
      class="c-timeline__item c-timeline__item--empty"
      style
    ></div>
    <a
      href="#"
      class="c-timeline__item c-timeline__item--active"
      style
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
    <div
      class="c-timeline__item c-timeline__item--empty"
      style
    ></div>
    <a
      href="#"
      class="c-timeline__item c-timeline__item--current"
      style
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
  </div>
</div>

<div class="c-timeline">
  <div class="c-timeline__items">
    <a
      href="#"
      class="c-timeline__item"
      style="--timeline-item-width: 1"
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
    <a
      href="#"
      class="c-timeline__item c-timeline__item--active c-timeline__item--current"
      style="--timeline-item-width: 2"
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
    <a
      href="#"
      class="c-timeline__item"
      style="--timeline-item-width: 3"
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
    <a
      href="#"
      class="c-timeline__item"
      style="--timeline-item-width: 1"
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
  </div>
</div>

<div class="c-timeline">
  <div class="c-timeline__dropdown c-dropdown">
    <div class="c-dropdown__trigger">
      <button
        type="button"
        class="c-timeline__item c-timeline__item--dropdown c-timeline__item--active"
      >
        <i
          class="c-timeline__icon c-icon c-icon--extra-small"
        >
          <!-- SVG element -->
        </i>
      </button>
    </div>
    <div class="c-dropdown__content">
      <div class="c-menu">
        <div class="c-menu__item">
          <a
            href="#"
            class="c-menu__link"
          >
            <div
              class="o-stack o-stack--horizontal o-stack--8"
            >
              <span>20/01/2020</span>
              <span>&rarr;</span>
              <span>20/02/2020</span>
            </div>
          </a>
        </div>
        <div class="c-menu__item">
          <a
            href="#"
            class="c-menu__link c-menu__link--active"
          >
            <div
              class="o-stack o-stack--horizontal o-stack--8"
            >
              <span>20/01/2020</span>
              <span>&rarr;</span>
              <span>20/02/2020</span>
            </div>
          </a>
        </div>
        <div class="c-menu__item">
          <a
            href="#"
            class="c-menu__link"
          >
            <div
              class="o-stack o-stack--horizontal o-stack--8"
            >
              <span>20/01/2020</span>
              <span>&rarr;</span>
              <span>20/02/2020</span>
            </div>
          </a>
        </div>
        <div class="c-menu__item">
          <a
            href="#"
            class="c-menu__link"
          >
            <div
              class="o-stack o-stack--horizontal o-stack--8"
            >
              <span>20/01/2020</span>
              <span>&rarr;</span>
              <span>20/02/2020</span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="c-timeline__items">
    <a
      href="#"
      class="c-timeline__item c-timeline__item--current"
      style
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
    <a
      href="#"
      class="c-timeline__item"
      style
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
    <a
      href="#"
      class="c-timeline__item"
      style
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
    <a
      href="#"
      class="c-timeline__item"
      style
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
    <a
      href="#"
      class="c-timeline__item c-timeline__item--last"
      style
    >
      <div class="c-timeline__dates">
        <div class="c-timeline__startdate">20/01/2020</div>
        <div class="c-timeline__enddate">20/02/2020</div>
      </div>
    </a>
  </div>
</div>