Responsive Vertical Timeline

By Rafi

responsive content

How do I use This?

A responsive timeline that can house images in each timeline item. Works with SVG's or images. Change the $timeline-item-card variable to true to add a background to each timeline content item.

HTML

<div class="timeline">

  <div class="timeline-item">
    <div class="timeline-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill-rule="evenodd" clip-rule="evenodd"><path d="M9 21h-9v-2h9v2zm6.695-2.88l-3.314-3.13-1.381 1.47 4.699 4.54 8.301-8.441-1.384-1.439-6.921 7zm-6.695-1.144h-9v-2h9v2zm8-3.976h-17v-2h17v2zm7-4h-24v-2h24v2zm0-4h-24v-2h24v2z"/></svg>
    </div>
    <div class="timeline-content">
      <p class="timeline-content-date">2008</h2>
      <p>The ZURB Style Guide is created to help us speed up our work. It’s a handy collection of HTML, CSS and Javascript that we use on every client project. The ideas of ZURB Style Guide evolve over the years and form the basis for a new framework, Foundation.</p>
    </div>
  </div>

  <div class="timeline-item">
    <div class="timeline-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/></svg>
    </div>
    <div class="timeline-content right">
      <p class="timeline-content-date">2010</h2>
      <p>ZURB style guide was solidified and named Foundation. It is being used internally on all client projects and ZURB sites and apps.</p>
    </div>
  </div>

  <div class="timeline-item">
    <div class="timeline-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill-rule="evenodd" clip-rule="evenodd"><path d="M17 24h-10l-2-14h14l-2 14zm-.592-10h-8.816l.571 4h7.674l.571-4zm1.631-8c0 .922 1.092 1.618 1.961 1.618v1.382h-16v-1.382c.87 0 2-.697 2-1.618h12.039zm-7.73-.691c2.819-2.143-.594-2.353.077-3.868-2.361 2.113.85 2.169-.077 3.868zm2.486-.001c4.236-3.238-.877-3.067.105-5.308-3.382 2.895 1.259 2.959-.105 5.308z"/></svg>
    </div>
    <div class="timeline-content">
      <p class="timeline-content-date">2011</h2>
      <p>
        <a href="https://get.foundation/sites/docs/v/2.2.1/" target="_blank">Foundation 2.0</a> is released to the public as an open source project! Foundation is the first responsive front-end framework and helps lead the charge for RWD across the web.
      </p>
    </div>
  </div>

  <div class="timeline-item">
    <div class="timeline-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill-rule="evenodd" clip-rule="evenodd"><path d="M24 11.5c0 3.613-2.951 6.5-6.475 6.5-2.154 0-4.101-1.214-5.338-3h-2.882l-1.046-1.013-1.302 1.019-1.362-1.075-1.407 1.081-4.188-3.448 3.346-3.564h8.841c1.145-1.683 3.104-3 5.339-3 3.497 0 6.474 2.866 6.474 6.5zm-10.691 1.5c.98 1.671 2.277 3 4.217 3 2.412 0 4.474-1.986 4.474-4.5 0-2.498-2.044-4.5-4.479-4.5-2.055 0-3.292 1.433-4.212 3h-9.097l-1.293 1.376 1.312 1.081 1.38-1.061 1.351 1.066 1.437-1.123 1.715 1.661h3.195zm5.691-3.125c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5z"/></svg>
    </div>
    <div class="timeline-content right">
      <p class="timeline-content-date">2012</h2>
      <p>
        <a href="https://get.foundation/sites/docs/v/3.2.5/" target="_blank">Foundation 3.0</a> is released! This version comes with Sass and is the first framework to use mixins and Sass partials.
      </p>
    </div>
  </div>

  <div class="timeline-item">
    <div class="timeline-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill-rule="evenodd" clip-rule="evenodd"><path d="M7.467 0c1.102.018 5.555 2.549 6.386 8.558.905-.889 1.409-3.664 1.147-4.843 3.952 2.969 6 6.781 6 11.034 0 5.094-3.43 9.251-8.963 9.251-5.728 0-9.037-3.753-9.037-8.276 0-6.26 5.052-7.62 4.467-15.724zm3.262 19.743c-.749.848-.368 1.945.763 2.045 1.035.093 1.759-.812 2.032-1.792.273-.978.09-2.02-.369-2.893-.998 1.515-1.52 1.64-2.426 2.64zm4.42 1.608c2.49-1.146 3.852-3.683 3.852-6.58 0-2.358-.94-4.977-2.5-7.04-.743 2.867-2.924 3.978-4.501 4.269.05-3.219-.318-6.153-2.602-8.438-.296 4.732-4.321 7.63-4.398 12.114-.029 1.511.514 3.203 1.73 4.415.491.489 1.054.871 1.664 1.16-.121-.608-.062-1.254.195-1.848.911-2.106 3.333-2.321 4.202-5.754.952.749 3.275 3.503 2.778 6.358-.082.469-.224.923-.42 1.344z"/></svg>
    </div>
    <div class="timeline-content">
      <p class="timeline-content-date">2013 - <span class="timeline-content-month">february</span></p>
      <p>This year saw not one, but three releases to Foundation! <a href="https://get.foundation/sites/docs/v/4.3.2/index.html" target="_blank">Version 4</a> went <a href="https://zurb.com/word/mobile-first" target="_blank">mobile first</a>, added many new components, and came with a visual update. Our responsive image plugin called <a href="https://get.foundation/sites/docs/v/4.3.2/components/interchange.html" target="_blank">Interchange</a> was added to Foundation to make sites built with it load even faster.</p>
    </div>
  </div>

  <div class="timeline-item">
    <div class="timeline-icon">
      <img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2017/96/iconmonstr-candy-26.png" class="" height="21" width="21" alt="">
    </div>
    <div class="timeline-content right">
      <p class="timeline-content-date">2013 - <span class="timeline-content-month">november</span></p>
      <p>Foundation 5 is all about speed. It made learning, using and developing with the framework faster than ever! More new components like <a href="https://get.foundation/docs/components/equalizer.html" target="_blank">Equalizer</a>, <a href="https://get.foundation/docs/components/offcanvas.html" target="_blank">Off-canvas</a>, and Icon-bar make a more complete package. Our responsive content plugin, <a href="https://get.foundation/sites/docs/v/4.3.2/components/interchange.html" target="_blank">Interchange</a> can now swap in HTML content and images based on screen size.</p>
    </div>
  </div>

  <div class="timeline-item">
    <div class="timeline-icon">
      <img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2017/96/iconmonstr-fast-food-10.png" class="" height="21" width="21" alt="">
    </div>
    <div class="timeline-content">
      <p class="timeline-content-date">2013 - <span class="timeline-content-month">november</span></p>
      <p><a href="https://get.foundation/emails.html" target="_blank">Foundation for Emails (formerly Ink)</a>, our responsive email framework is launched at the end of the year and helps designers easily create beautiful, responsive emails.</p>
    </div>
  </div>

  <div class="timeline-item">
    <div class="timeline-icon">
      <img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2017/96/iconmonstr-fast-food-12.png" class="" height="21" width="21" alt="">
    </div>
    <div class="timeline-content right">
      <p class="timeline-content-date">2014 - <span class="timeline-content-month">november</span></p>
      <p>We launched <a href="https://zurb.com/article/1362/foundation-for-apps-is-here" target="_blank">Foundation for Apps</a>, the first front-end framework created for developing fully responsive web apps.</p>
    </div>
  </div>

  <div class="timeline-item">
    <div class="timeline-icon">
      <img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2017/96/iconmonstr-fast-food-5.png" class="" height="21" width="21" alt="">
    </div>
    <div class="timeline-content">
      <p class="timeline-content-date">2015</h2>
      <p><a href="https://zurb.com/article/1416/foundation-6-is-here" target="_blank">Foundation for Sites 6 is released</a>. Faster, lighter, more versatile, more flexible and more powerful than ever before to get your projects from Prototype to Production.</p>
    </div>
  </div>

  <div class="timeline-item">
    <div class="timeline-icon">
      <img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2017/96/iconmonstr-check-mark-18.png" class="" height="21" width="21" alt="">
    </div>
    <div class="timeline-content right">
      <p class="timeline-content-date">2016</h2>
      <p><a href="https://zurb.com/article/1432/foundation-for-emails-2-is-here" target="_blank">Foundation for Emails 2</a> is launched, revolutionizing email development through a workflow that uses the latest web technologies.</p>
    </div>
  </div>

</div>

$timeline-color: $white;
$timeline-transition: all 0.25s ease-in;
$timeline-item-card-bg: $white;
$timeline-item-font-color: $white;
$timeline-item-card: false;
$timeline-item-card-radius: $global-radius;

%clearfix {
  &::after,
  &::before {
    clear: both;
    content: '';
    display: block;
    width: 100%;
  }
}

// Timeline
.timeline {
  margin: 30px auto;
  padding: 0 10px;
  position: relative;
  transition: $timeline-transition;
  width: 100%;

  &::before {
    background: $timeline-color;
    content: '';
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    width: 3px;
  }

  &::after {
    clear: both;
    content: '';
    display: table;
    width: 100%;
  }

  a {
    color: $timeline-item-font-color;
    font-weight: bold;
    transition: $timeline-transition;

    &:hover {
      box-shadow: 0 1px 0px 0px $timeline-item-font-color;
      transition: $timeline-transition;
    }
  }

  .timeline-item {
    margin-bottom: 50px;
    position: relative;
    @extend %clearfix;

    .timeline-icon {
      background: $timeline-color;
      border-radius: 50%;
      height: 50px;
      left: 50%;
      margin-left: -23px;
      overflow: hidden;
      position: absolute;
      top: 0;
      width: 50px;

      img,
      svg {
        left: 14px;
        position: relative;
        top: 11px;
      }

      svg {
        top: 14px;
      }
    }

    .timeline-content {
      padding: 20px;
      text-align: right;
      transition: $timeline-transition;
      width: 45%;

      @if $timeline-item-card == true {
        background: $timeline-item-card-bg;
        border-radius: $timeline-item-card-radius;

        p {
          color: $black;
        }
      } @else {
        background: transparent;

        p {
          color: $timeline-item-font-color;
        }
      }

      p {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 0;
      }

      .timeline-content-date {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 0;
      }

      .timeline-content-month {
        font-size: rem-calc(14);
        text-transform: uppercase;
        font-weight: 400;
      }

      &.right {
        float: right;
        text-align: left;
      }
    }
  }
}

@include breakpoint(small only) {
  .timeline {
    margin: 30px;
    padding: 0;
    width: 90%;

    &::before {
      left: 0;
    }

    .timeline-item {
      .timeline-content {
        float: right;
        text-align: left;
        width: 90%;

        &::before,
        &.right::before {
          border-left: 0;
          border-right: 7px solid $timeline-color;
          left: 10%;
          margin-left: -6px;
        }
      }

      .timeline-icon {
        left: 0;
      }
    }
  }
}

.timeline .timeline-item::after, .timeline .timeline-item::before {
  clear: both;
  content: '';
  display: block;
  width: 100%;
}

.timeline {
  margin: 30px auto;
  padding: 0 10px;
  position: relative;
  transition: all 0.25s ease-in;
  width: 100%;
}

.timeline::before {
  background: #fefefe;
  content: '';
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  width: 3px;
}

.timeline::after {
  clear: both;
  content: '';
  display: table;
  width: 100%;
}

.timeline a {
  color: #fefefe;
  font-weight: bold;
  transition: all 0.25s ease-in;
}

.timeline a:hover {
  box-shadow: 0 1px 0px 0px #fefefe;
  transition: all 0.25s ease-in;
}

.timeline .timeline-item {
  margin-bottom: 50px;
  position: relative;
}

.timeline .timeline-item .timeline-icon {
  background: #fefefe;
  border-radius: 50%;
  height: 50px;
  left: 50%;
  margin-left: -23px;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 50px;
}

.timeline .timeline-item .timeline-icon img,
.timeline .timeline-item .timeline-icon svg {
  left: 14px;
  position: relative;
  top: 11px;
}

.timeline .timeline-item .timeline-icon svg {
  top: 14px;
}

.timeline .timeline-item .timeline-content {
  padding: 20px;
  text-align: right;
  transition: all 0.25s ease-in;
  width: 45%;
  background: transparent;
}

.timeline .timeline-item .timeline-content p {
  color: #fefefe;
}

.timeline .timeline-item .timeline-content p {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 0;
}

.timeline .timeline-item .timeline-content .timeline-content-date {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0;
}

.timeline .timeline-item .timeline-content .timeline-content-month {
  font-size: 0.875rem;
  text-transform: uppercase;
  font-weight: 400;
}

.timeline .timeline-item .timeline-content.right {
  float: right;
  text-align: left;
}

@media screen and (max-width: 39.9375em) {
  .timeline {
    margin: 30px;
    padding: 0;
    width: 90%;
  }
  .timeline::before {
    left: 0;
  }
  .timeline .timeline-item .timeline-content {
    float: right;
    text-align: left;
    width: 90%;
  }
  .timeline .timeline-item .timeline-content::before, .timeline .timeline-item .timeline-content.right::before {
    border-left: 0;
    border-right: 7px solid #fefefe;
    left: 10%;
    margin-left: -6px;
  }
  .timeline .timeline-item .timeline-icon {
    left: 0;
  }
}

Responsive Vertical Timeline

By Rafi

Polls

Featured Articles with Side Links

Blockquote Styles

Responsive Vertical Timeline

By Rafi

Similar Building Blocks

Polls

Featured Articles with Side Links

Blockquote Styles