City of Tampa Style Guide

Accordion Group 2.1

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A collapsible group of content. This is a good pattern if you need to present multiple single pieces of content. And you don't anticipate a user will need all the information at once.

When to use: If users will only need a few specific piece of content.

When not to: If users need to see most or all of the information. Use well-formatted text instead.

Notes: Content hidden in accordions hurts SEO and is not indexed by search crawlers.

Dev Notes: remove the `data-parent` attribute to remove the limit of only having one open at a time.

<insert-markup>components.accordion-</insert-markup>
Accordion Group
An accordion group only shows one item at a time.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="d-flex align-items-end pb-1">
    <div class="flex-grow-1">
        <div class="h2">Accordion Group</div>
        <div class="accordion-body">An accordion group only shows one item at a time. </div>
    </div>
    <div><button class="btn btn-outline-primary accordion-group__control" data-accordionid="#accordionGroupExample">Expand All</button></div>
</div>
<div class="accordion" id="accordionGroupExample">
  <div class="card">
      <div class="card-header bg-primary" id="headingOne">
          <h2 class="mb-0 h4">
              <button class="accordion__button text-white text-shadow" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
          </h2>
      </div>
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionGroupExample">
          <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
              craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
      </div>
  </div>
  <div class="card">
      <div class="card-header bg-primary" id="headingTwo">
          <h2 class="mb-0 h4">
              <button class="accordion__button text-white text-shadow" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
          </h2>
      </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionGroupExample">
          <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
              craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
      </div>
  </div>
  <div class="card">
      <div class="card-header bg-primary" id="headingThree">
          <h2 class="mb-0 h4">
              <button class="accordion__button text-white text-shadow" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
          </h2>
      </div>
      <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionGroupExample">
          <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
              craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
      </div>
  </div>
</div>
Source: src/scss/base/_components.scss, line 1

Accordion Single 2.2

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A simple accordion example with configurable icon indicator. Icon options by default are +/- other options are .hide-icon, .lock-icon, and .chevron-icon. This example is different from the accordion group because these are individual non-related accordion examples.

When to use: If users will not likely need the hidden content and the hidden content does not contain important information OR you purposely want to hide content behind a user interaction such as a click on a button.

When not to: If its important the hidden content is discoverable, find another means to display your information.

Notes: Content hidden in accordions hurts SEO, is not indexed by search engines and is hidden from assistive technologies by default.

Dev Notes: Styles are attached to the aria tags instead of classes to ensure accessibility standards are implemented.

<insert-markup>components.accordionsingle-</insert-markup>
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="accordion">
    <button id="headingOne" class="accordion__button" type="button" data-toggle="collapse" data-target="#collapseSingleOne" aria-expanded="false" aria-controls="collapseOne">
    Basic Accordion Defaults to +/-
    </button>
    <div id="collapseSingleOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
        craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
</div>
 <div class="accordion">
    <button id="headingTwo" class="accordion__button hide-icon" type="button" data-toggle="collapse" data-target="#collapseSingleTwo" aria-expanded="false" aria-controls="collapseTwo">
    .hide-icon Accordion
    </button>
    <div id="collapseSingleTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
        truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
    </div>
</div>
<div class="accordion">
    <button id="heading3" class="accordion__button chevron-icon" type="button" data-toggle="collapse" data-target="#collapseSingle3" aria-expanded="false" aria-controls="collapse3">
    .chevron-icon Accordion
    </button>
    <div id="collapseSingle3" class="collapse" aria-labelledby="heading3" data-parent="#accordionExample">
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad
    </div>
</div>
<div class="accordion">
    <button id="heading4" class="accordion__button lock-icon" type="button" data-toggle="collapse" data-target="#collapseSingle4" aria-expanded="false" aria-controls="collapse4">
    .lock-icon Accordion
    </button>
    <div id="collapseSingle4" class="collapse" aria-labelledby="heading4" data-parent="#accordionExample">
        craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
</div>
Source: src/scss/base/_components.scss, line 74

Alert 2.3

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Alerts are used to draw attention to short messages to the user and typically inform them of something. Alerts can be themed so they match their content the '.alert-info' is the standard alert color.

When to use: When you have a short message that needs to be emphasized to the user and the content matches the alert theme.

When not to: When you have a lot of text or other complex layout/graphics use a callout or other pattern for emphasis.

Notes: Visit bootstrap docs for more details on options and usage https://getbootstrap.com/docs/4.4/components/alerts/

<insert-markup>components.alert-</insert-markup>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
Source: src/scss/base/_alerts.scss, line 1

Card 2.4

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A generic card component that has a border and dropshadow and can contain other elements such as images titles. The .card-deck is used to make all the cards in the row equal in height.

When to use: When you really want to highlight something like a new initiative or program.

When not to: When you have alot of content simpler buttons take up less space are less cognitive load on visitors to process.

Notes: Cards take up alot of realestate so you won't be able to use more than a few.

<insert-markup>components.card-</insert-markup>
...
Featured

Mayor Announces Bridges to Business Vendor Certification

Some quick example text to build on the card title and make up the bulk of the card's content.

...

Card title

This is the button version. Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="card-deck">
    <div class="card">
        <img src="https://picsum.photos/430/200" class="card-img-top" alt="...">
        <div class="card-header">
            Featured
        </div>
        <div class="card-body">
            <h2 class="card-title">Mayor Announces Bridges to Business Vendor Certification</h2>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
        <div class="card-footer">
            <a href="#" class="card-link">Register Your Business</a>
        </div>
    </div>
    <div class="card">
        <img src="https://picsum.photos/431/200" class="card-img-top" alt="...">
        <div class="card-body">
            <h2 class="card-title">Card title</h2>
            <p class="card-text">This is the button version. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
        <div class="card-footer">
            <a href="#" class="btn btn-primary d-block">Go somewhere</a>
        </div>
    </div>
</div>
Source: src/scss/base/_card.scss, line 1

Cards - Clickable 2.5

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

This is a style of cards that all behave as buttons. Only a single URL is possible with these. They offer more text content than a buttons so they can help explain a link better than a button. Wrap them in a .card-grid to let them wrap and create multiple rows.

When to use: When a button can't explain it all, often used to list a departments services.

When not to: The card cant support multiple links. When a normal button is enough and you don't need to supply more context.

Notes: Don't put too many on the page, these take up a lot of realestate, buttons are more space efficient when you want to display a lot of links to a visitor.

<div class="card-deck-wrapper">
    <div class="card-deck">
        <div class="card card-link">
            <a class="card-block stretched-link text-decoration-none p-2" href="#">
                <h4 class="card-title">Help Program</h4>
                <p class="card-text">Visit our help program for a one stop shop experience.</p>
            </a>
        </div>
        <div class="card card-link">
        <img src="https://picsum.photos/430/200" class="card-img-top" alt="...">
            <a class="card-block stretched-link text-decoration-none p-2" href="#">
                <h4 class="card-title">Card w/Image</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            </a>
        </div>
        <div class="card card-link bg-primary">
            <a class="card-block stretched-link text-decoration-none p-2" href="#">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card uses one of our background classes (.bg-primary) to change its color.</p>
            </a>
        </div>
    </div>
</div>
<hr>
<div class="row card-grid row-cols-1 row-cols-md-2">
    <div class="col mb-4">
        <div class="card card-link p-2">
            <a class="card-block stretched-link text-decoration-none" href="#">
                <h4 class="card-title">Start Water</h4>
                <p class="card-text">Start Utility service.</p>
            </a>
        </div>
    </div>
    <div class="col mb-4">
        <div class="card card-link p-2">
            <a class="card-block stretched-link text-decoration-none" href="#">
                <h4 class="card-title">Trash Collection</h4>
                <p class="card-text">Included with city Utilities.</p>
            </a>
        </div>
    </div>
    <div class="col mb-4">
        <div class="card card-link p-2">
            <a class="card-block stretched-link text-decoration-none" href="#">
                <h4 class="card-title">Recycling</h4>
                <p class="card-text">Included with city Utilities.</p>
            </a>
        </div>
    </div>
</div>
Source: src/scss/base/_card.scss, line 109

Counter 2.6

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A data visualization for numbers.

When to use: A data visualization for a number with label.

When not to:

Notes:

<insert-markup>components.counter-</insert-markup>
35
Street Cleaning

feet of cleaned streets in Tampa.

<div class="text-center">
  <div class="text-primary h1 m-0 font-weight-bold">35</div>
  <strong class="h2">Street Cleaning</strong>
  <p>feet of cleaned streets in Tampa.</p>
</div>
Source: src/scss/base/_components.scss, line 420

FAQ 2.7

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

An accordion is a list of headers that hide or reveal additional content when selected.

When to use: If users will only need a few specific pieces of content within a page.

When not to: If users need to see most or all of the information on a page. Use well-formatted text instead.

Notes: Content hidden in accordions hurts SEO and is not indexed by search crawlers.

(ADA REQUIRED) the `faq-show-all` button can be used to expand all the answers so they can be searched using Ctrl+F. Update the `toggleShow` to indicate all the items you would like to make visible when the button is clicked.

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

Frequently Asked Questions

An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner.

While accordions sound ideal for presenting complex content, like with many other widgets and implementations, they are not a one-size-fits-all solution. There are major downsides to accordions.

  • Forcing people to click on headings one at a time to display full content can be cumbersome.
  • Accordions increase interaction cost.
  • Hiding content behind navigation diminishes people’s awareness of it.
  • Accessibility is an important consideration.
  • Printing problems
  • Myth #1: Users don’t scroll long pages
  • Myth #2: Customers don’t read information at the bottom of the page
  • Myth #3: People avoid pages with a lot of content

Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions. Better to show all page content at once when the use case supports it. In such cases, don’t worry too much about page length. Relevance trumps page length.

<section class="accordion-section accordion-section-faq clearfix mt-3" aria-label="Question Accordions">
    <div class="container">
        <h2>Frequently Asked Questions</h2>
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default mb-3">
                <div class="panel-heading" role="tab" id="heading0">
                    <h3 class="panel-title h5">
                        <a class="collapse" role="button" title="" data-toggle="collapse" data-parent="#accordion" href="#collapse0" aria-expanded="true" aria-controls="collapse0">What is an Accordion?</a>
                    </h3>
                </div>
                <div id="collapse0" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading0">
                    <div class="panel-body px-3 mb-4">
                        <p>An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner. </p>
                    </div>
                </div>
            </div>
            <div class="panel panel-default mb-3">
                <div class="panel-heading" role="tab" id="heading1">
                    <h3 class="panel-title h5">
                        <a class="collapse" role="button" title="" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">Major Usability Issues with Accordions</a>
                    </h3>
                </div>
                <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
                    <div class="panel-body px-3 mb-4">
                        <p>While accordions sound ideal for presenting complex content, like with many other widgets and implementations, they are not a one-size-fits-all solution. There are major downsides to accordions.</p>
                        <ul>
                            <li>Forcing people to click on headings one at a time to display full content can be cumbersome.</li>
                            <li>Accordions increase interaction cost.</li>
                            <li>Hiding content behind navigation diminishes people’s awareness of it.</li>
                            <li>Accessibility is an important consideration.</li>
                            <li>Printing problems</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="panel panel-default mb-3">
                <div class="panel-heading" role="tab" id="heading2">
                    <h3 class="panel-title h5">
                        <a class="collapse" role="button" title="" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="true" aria-controls="collapse2">Myths about Scrolling and Long Content Pages</a>
                    </h3>
                </div>
                <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
                    <div class="panel-body px-3 mb-4">
                        <ul>
                            <li>Myth #1: Users don’t scroll long pages</li>
                            <li>Myth #2: Customers don’t read information at the bottom of the page</li>
                            <li>Myth #3: People avoid pages with a lot of content</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="panel panel-default mb-3">
                <div class="panel-heading" role="tab" id="heading3">
                    <h3 class="panel-title h5">
                        <a class="collapse" role="button" title="" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="true" aria-controls="collapse3">Criteria for Applying Accordions</a>
                    </h3>
                </div>
                <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
                    <div class="panel-body px-3 mb-4">
                        <p>Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions. Better to show all page content at once when the use case supports it. In such cases, don’t worry too much about page length. Relevance trumps page length.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
Source: src/scss/base/_components.scss, line 224

Icon Buttons 2.8

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Icon buttons are enhanced buttons with an icon. They are designed mainly to be used on content pages to drive traffic to primary pathways.

When to use: Some guidence on when to use.

When not to: Some guidence on when it is not the best choice.

Notes: Requires FontAwesome

<insert-markup>components.iconbuttons-</insert-markup>
<!-- Full Width -->
<div class="row">
    <div class="col-md">
        <a href="#" class="cot-button">
            <span class="cot-button-icon">
                <i class="fa fa-edit" aria-hidden="true"></i>
            </span>
            <span class="cot-button-text">
                Full Width
            </span>
        </a>
    </div>
</div>
<!-- Two column -->
<div class="row">
    <div class="col-md-6">
            <a href="#" class="cot-button">
                <span class="cot-button-icon">
                    <i class="fa fa-comments" aria-hidden="true"></i>
                </span>
                <span class="cot-button-text">
                    Button
                </span>
            </a>
    </div>
    <div class="col-md-6">
            <a href="#" class="cot-button">
                <span class="cot-button-icon">
                    <i class="fa fa-comments" aria-hidden="true"></i>
                </span>
                <span class="cot-button-text">
                    Button with overflowing text way too much
                </span>
            </a>
    </div>
</div>
Source: src/scss/base/_buttons.scss, line 219

Jumbotron 2.9

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A Jumbotron is a full width hero banner with a flexible overlay area that can support common markup. Overlay positioning options are overlay-{middle/bottom}-{left/right} an example would be overlay-middle-right. A Jumbotron turns into a card on mobile. Adding w-100 to the overlay will create a larger overlay if needed.

When to use: When you need a primary hero banner.

When not to: The overly can only support a small amount of content.

Notes: The Jumbotron does not have to be linked, instead place buttons in the overlay region.

<insert-markup>components.jumbotron-</insert-markup>
<div class="jumbotron jumbotron-dark p-0">
  <a href="#" class="td-none">
    <img src="https://picsum.photos/1330/800" alt="ALT TEXT">
    <div class="jumbotron-overlay overlay-middle-right p-3">
      <p class="display-5 mb-0">Coronavirus 2019</p>
      <p>Find out what you should know.</p>
      <div class="text-left">
        <div class="btn btn-primary">Learn About COVID-19</div>
      </div>
    </div>
  </a>
</div>
Source: src/scss/base/_jumbotron.scss, line 1

Section Navigation 2.10

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The primary section navigation menu which is a list of links related to the current section.

When to use: Connect all pages with a hierarchical menu.

When not to: When you wan to link to files or external sites, consider in-page buttons.

Notes:

<insert-markup>components.sidenav-</insert-markup>
<nav class="nav side-nav flex-column">
    <a class="nav-link" href="#">Home</a>
    <a class="nav-link active" href="#">Active Link</a>
    <a class="nav-link" href="#">Contact Us</a>
    <div class="nav-item expanded active-trail">
        <a href="/node/31" class="nav-link expanded active">Columns Test</a>
        <ul class="menu">
            <li class="nav-item expanded active-trail">
                <a href="/node/21" class="nav-link expanded active">Quote, Slideshow, Steps</a>
                <ul class="menu">
                    <li class="nav-item active-trail">
                        <a href="/node/26" class="nav-link active is-active">Table, Video &amp; Views</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <a class="nav-link" href="#">How Do I</a>
</nav>
Source: src/scss/base/_nav.scss, line 52

Timeline 2.11

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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

Videos 2.12

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

iFramed videos are not responsive by default, a wrapper class is applied with a padding percentage that matches the video aspect ratio. Other can be used test

<insert-markup>components.videos-</insert-markup>
<div class="iframe-responsive">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/dj54VBTG2ko?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe>
</div>
Source: src/scss/base/_base.scss, line 347