City of Tampa Style Guide

Timeline 2.11

A chronological series of content with bodies that support text and images.

When to use: When you have linear timeline style of content.

When not to: When there is not a linear order to your content.

Notes: Content must be ordered manually to support dates like "Summer 2020".

<insert-markup>components.timeline-</insert-markup>

2012 - 2019

Dwelling

5,645 dwelling units, 468,235 SF commercial space, 473 hotel rooms and 1,188 student beds have been constructed in the downtown area.
2015

Dwelling

Center City Tampa will be a community of livable places, connected people, and collaborative progress that embraces and celebrates its river and waterfront.
2014
Hotel opens
- Le Meridian Hotel opens in the renovated Federal Courthouse building.
- The new Waterworks Park was completed and opened.
- The Zack Street Avenue of the Arts streetscape was completed.

<ul class="timeline">
  <li class="timeline-item">
    <div class="timeline-badge">
      <a><i class="fa fa-circle" id=""></i></a>
    </div>
    <h3 class="timeline-date">2012 - 2019</h3>
    <div class="timeline-panel">
      <div class="timeline-heading">
        <h5>Dwelling</h5>
      </div>
      <div class="timeline-body">
        <p>
          5,645 dwelling units, 468,235 SF commercial space, 473 hotel rooms and
          1,188 student beds have been constructed in the downtown area.
        </p>
      </div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-badge">
      <a><i class="fa fa-circle" id=""></i></a>
    </div>
    <h3 class="timeline-date">2015</h3>
    <div class="timeline-panel">
      <div class="timeline-heading">
        <h5>Dwelling</h5>
      </div>
      <div class="timeline-body">
        <p>
          Center City Tampa will be a community of livable places, connected
            people, and collaborative progress that embraces and celebrates its
            river and waterfront.
        </p>
      </div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-badge">
      <a><i class="fa fa-circle" id=""></i></a>
    </div>
    <h3 class="timeline-date">2014</h3>
    <div class="timeline-panel">
      <div class="timeline-heading">
        <h5>Hotel opens</h5>
      </div>
      <div class="timeline-body">
        <p>
          <ul>
            <li>
              Le Meridian Hotel opens in the renovated Federal Courthouse
              building.
            </li>
            <li>The new Waterworks Park was completed and opened.</li>
            <li>
              The Zack Street Avenue of the Arts streetscape was completed.
            </li>
          </ul>
        </p>
      </div>
    </div>
  </li>
</ul>

Source: src/scss/base/_components.scss, line 547