City of Tampa Pattern Library

Accordian

An expandable accordian of definiton lists

<dl class="bus-accordion">
    <dt class="cat-title"><a href="">General Information</a></dt>
    <dd style="display: none;">
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
        <p><strong>Other Options</strong></p>
        <ul>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
            <li><a href="#">Item 6</a></li>
        </ul>
    </dd>
</dl>

CSS Animations

A handpicked selection of the animate.css library is included in TampaGov. See animate.css for details

  • add the class animated fadeIn
  • add the class animated fadeInLeft
  • add the class animated fadeInRight
  • add the class animated fadeInUp

The following modifiers are available infinite, delay-1s to delay-5s, fast, faster, slow, slower.

fadeIn
fadeIn infinite slow
fadeInUp infinite delay-2s
fadeInRight infinite delay-5s slower
<div class="flex flex-row">
  <div class="animated fadeIn background-primary" style="width:200px;height:200px;display:inline-block">fadeIn</div>
  <div class="animated fadeIn infinite slow background-secondary" style="width:200px;height:200px;display:inline-block">fadeIn infinite slow</div>
  <div class="animated fadeInUp infinite delay-2s background-primary" style="width:200px;height:200px;display:inline-block">fadeInUp infinite delay-2s</div>
  <div class="animated fadeInRight infinite delay-5s slower background-secondary" style="width:200px;height:200px;display:inline-block">fadeInRight infinite delay-5s slower</div>
</div>

FAQ Accordion Toggle

A FAQ style pattern where answers are hidden until the questions/titles are clicked. Uses HTML5 Definitons.

On the faq-toggle update the data-toggleTarget attribute to match answer what you want to toggle the visibility of. It can be a '.class' or '#id'

(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.

SEO NOTE: Google crawlers take into account 'hidden' content, so keep in mind when these types of patterns are used, the content hidden or masked will not be indexed and hard and hurts search ranking.

Expand All Answers

FAQ Collection

The HTML definiton element represents a description list.
Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs)

Read More Variant

This is an inital paragraph that has a following hidden paragraph that can be shown using the same .faq-toggle functionality. It just needs a class added to the target of "masked" so that its hidden on page load. The Read more link will also use the `data-hideSelfAfter` attribute to indicate it should hide once clicked.

This is the read more paragraph which is hidden by default since it has a masked class applied to it. Since the button self hides after click this is a one way toggle, and can't be toggled off.

<div class="btn btn-xs btn-default pull-right faq-show-all" data-toggleShow=".answer">Expand All Answers</div>
  <h1>FAQ Collection </h1>
  <dl class="faq">
    <dt><button role="button" type="button" class="link faq-toggle" data-toggleTarget="#answer1">What is a dl tag? </button></dt>
    <dd id="answer1" class="well answer">The HTML definiton element represents a description list.</dd>

    <dt><button role="button" type="button" class="link faq-toggle" data-toggleTarget="#answer2">When do I use these?</button></dt>
    <dd id="answer2" class="well answer">Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs)</dd>

  </dl>

  <h1>Read More Variant</h1>
  <p>This is an inital paragraph that has a following hidden paragraph that can be shown using the same .faq-toggle functionality. It just needs a class added to the target of "masked" so that its hidden on page load. The Read more link will also use the `data-hideSelfAfter` attribute to indicate it should hide once clicked. <button role="button" type="button" class="link faq-toggle hide-icon" data-toggleTarget="#moreinfo" data-hideSelfAfter="true">Read more...</button></p>

  <p id="moreinfo" class="masked">This is the read more paragraph which is hidden by default since it has a masked class applied to it. Since the button self hides after click this is a one way toggle, and can't be toggled off.</p>

Lazy-Load YouTube Videos

A typical YouTube iframe loads alot of extra CSS/JS into the page resulting in increased load times. This lazy-loading technique skips the iframe method and simply displays a video thubmnail (pulled from youtube) and a play button, when its click it converts to a typical iframe so all the iframe weight is only brought in if the user wants to play the video.

Simply update the data-embed id to match the YouTube videos id, easily found in the URL when watching the video on youtube such as https: //www.youtube.com/watch?v=b7CO6kITSS8

<div class="youtube" data-embed="b7CO6kITSS8" alt="Video Title Here">
    <div class="play-button"></div>
</div>

Newsletter block

Newsletter signup block. Note: most elements are white, so it needs to be placed on a colored background.

<!-- Inline styles here just for the example -->
<div style="background: #4bafdb; display:block; padding:20px; min-height:115px;">
<form action="//tampagov.us12.list-manage.com/subscribe/post?u=9bdfe0f7b0aceb3620b8eb6ee&amp;id=13014f9a30" method="post"
   name="mc-embedded-subscribe-form" class="newsletter-signup" target="_blank" novalidate>

   <label for="EMAIL" class="sr-only">Newsletter Signup</label>
    <div class="flex flex-row">

        <input type="text" title="Email" value="" name="EMAIL" class="flex-grow" id="mce-EMAIL" placeholder="enter email..." required>

        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
      <div style="position: absolute; left: -5000px;" aria-hidden="true">
        <input type="text" name="b_9bdfe0f7b0aceb3620b8eb6ee_13014f9a30" tabindex="-1" value="">
      </div>

      <button class="email-submit" type="submit">Subscribe<small>To Newsletter</small>
      </button>

    </div>
</form>
</div>

Overlay

Activate a full screen overlay. Overlays are good for mobile menus or content that does not fit well into modals for mobile devices. Be sure to include a button to close the overlay in the overlay itself.

data-toggleTarget must be updated to target the overlay you want to toggle. Its recommened to be an ID. overlay classes are hidden with a height of 0 by default. This button will toggle that height.

The below overlay has an id overlay-example which will be activated.

btn-close is a class to postion the close button in the top right

IMPORTANT This is an advanced pattern, use with caution and review for proper text colors etc. As the background is not white like default pages.

Show Overlay
Close

This is overlay content. It is in the .overlay-content wrapper purely for some padding reasons.

An overlay can contain any markup you want.

<a href="#" class="btn btn-default toggle-overlay" data-toggleTarget="#overlay-example">Show Overlay</a>
<div id="overlay-example" class="overlay">
    <div class="overlay-content">
        <a href="#" class="btn btn-default pull-right btn-close toggle-overlay" data-toggleTarget="#overlay-example">Close</a>
        <div class="row clearfix">
            <h1>This is overlay content. It is in the .overlay-content wrapper purely for some padding reasons.</h1>
            <p>An overlay can contain any markup you want.</p>
        </div>
    </div>
</div>

Print Controls

The below classes help in controling what content is printed or only
visible on screens.

Print Utilities Screen Print
.visible-print-block hidden Visible
.visible-print-inline hidden Visible
.visible-print-inline-block hidden Visible
.hidden-print Visible hidden

Responsive Videos

A video wrapper used on YouTube iframes that wil make the videos scale for responsive displays. The padding bottom is used so it maintains a video aspect ratio, so only iframes at that ratio will work.

Note: YouTube embeds have automatic wrappers applied, to prevent this add a class no-format to prevent these automatic responsive wrappers.

<div class="video-responsive">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/dj54VBTG2ko?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe>
</div>