City of Tampa Pattern Library

Emergency Alerts

Used by the global emergency alerts and the cot_alerts module ajax'ed alerts to the website which display immediately and are injected into specific pages.

The Tampa Water Department has issued a Precautionary Boil Water Notification for all residents and businesses in the vicinity with these geographic boundaries: starting with an eastern boundary of I-275 proceeding west to N Dale Mabry Hwy, and starting with a southern boundary of W Dr. MLK proceeding north to W Busch Blvd. Customers in this area are cautioned to boil water for drinking and food preparation until further notice.
This is the lower severity global alert. Link strong
This is the higher severity global alert. Link strong
<div class="alert alert-warning alert-cot-warning alert-dismissible">    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button><div class="content"><i class="fa fa-exclamation-triangle fa-3x" aria-hidden="true"></i><div class="message">The Tampa Water Department has issued a Precautionary Boil Water Notification for all residents and businesses in the vicinity with these geographic boundaries: starting with an eastern boundary of I-275 proceeding west to N Dale Mabry Hwy, and starting with a southern boundary of W Dr. MLK proceeding north to W Busch Blvd. Customers in this area are cautioned to boil water for drinking and food preparation until further notice.</div></div></div>

<div class="alert alert-cot alert-dismissible">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <div class="content">
        <i class="fa fa-exclamation-triangle fa-3x" aria-hidden="true"></i>
        <div class="message">
            This is the lower severity global alert. <a href="#">Link</a> <strong>strong</strong>
        </div>
    </div>
</div>
<div class="alert alert-cot alert-cot-emergency alert-dismissible">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <div class="content">
        <i class="fa fa-exclamation-triangle fa-3x" aria-hidden="true"></i>
        <div class="message">
            This is the higher severity global alert. <a href="#">Link</a> <strong>strong</strong>
        </div>
    </div>
</div>

Footer - Primary

This is the primary footer which contains the social icons along with the email signup box.

<footer class="primary-footer">
    <div class="inner">
        <div class="container clearfix">
            <div class="row">
              <div class="col-sm-7">
                <div class="newsletter">
          <form action="//tampagov.us12.list-manage.com/subscribe/post?u=9bdfe0f7b0aceb3620b8eb6ee&amp;id=13014f9a30" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate compact-form" target="_blank" novalidate="">
              <div class="mc-field-group form-type-textfield form-item-name form-item form-group compact-form-wrapper">
                  <input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="enter email..." required="">
              </div>
              <!-- 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>
              <div class="clear">
                  <input type="submit" value=">" name="subscribe" id="mc-embedded-subscribe" class="submit">
              </div>
          </form>
                </div>
              </div>
              <div class="col-sm-5">
                <ul class="list-inline text-white">
                        <li><a href="http://www.tampagov.net/emergency-management/alert-tampa"><i class="icon-alert-tampa-logo" aria-hidden="true"></i></a> </li>
                        <li><a href="http://twitter.com/cityoftampa" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a> </li>
                        <li><a href="http://www.facebook.com/TampaGov" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a> </li>
                        <li><a href="https://www.instagram.com/bobbuckhornfl/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a> </li>
                        <li><a href="http://www.youtube.com/user/CityofTampa" target="_blank"><i class="fa fa-youtube" aria-hidden="true"></i></a> </li>
                        <li><a href="https://www.snapchat.com/add/cityoftampa" target="_blank"><i class="fa fa-snapchat-ghost" aria-hidden="true"></i></a></li>
                </ul>
              </div>
            </div>
        </div>
    </div>
</footer>

Footer - Secondary

This is the secondary footer that provide alternative navigation. *Requires FontAwesome library

<footer class="secondary-footer">
    <div class="inner">
        <div class="container clearfix">
            <div class="row">
                <div class="col-sm-4 col-xs-6 odd">
                  <ul class="menu nav">
                      <li class="first leaf"><a href="/about-us">About</a></li>
                      <li class="leaf"><a href="/police/programs/alert-tampa">Alert Tampa</a></li>
                      <li class="leaf"><a href="/public-affairs/info/directors-and-key-contacts">City Directory</a></li>
                      <li class="leaf"><a href="/departments">City Departments</a></li>
                      <li class="last leaf"><a href="/calendar">Events Calendar</a></li>
                  </ul>
                </div>
                <div class="col-sm-4 col-xs-6 even">
                  <ul class="menu nav">
                      <li class="first leaf"><a href="http://www.tampagov.net/jobs">Jobs</a></li>
                      <li class="leaf"><a href="/info/maps-and-directions">Maps &amp; Directions</a></li>
                      <li class="leaf"><a href="/info/mobile-application">Mobile App</a></li>
                      <li class="leaf"><a href="/metrics">Performance Dashboard</a></li>
                      <li class="last leaf"><a href="http://www.tampagov.net/services">Services</a></li>
                  </ul>
                </div>
                <div class="col-sm-4 col-xs-12 odd">
                  <p>TAMPA MUNICIPAL OFFICE BUILDING
                      <br>306 East Jackson Street
                      <br>Tampa, Florida 33602</p>
                  <p>813.274.8211</p>
                  <p><a href="/contact-us">CONTACT</a></p>
                </div>
            </div>
        </div>
    </div>
</footer>

Top Navigation

The top navigation bar used on the website, modified from bootstraps default navbar. Social icons are optional along with search box. Remove the inline style Postion:relative !important from .navbar before use (this is only needed here to prevent the navbar from affixing to the top of this page).

<div id="top-page" class="clearfix">
        <header id="navbar" class="navbar navbar navbar-default navi_fixed" style="position:relative !important;">

                <div class="logo-wrapper">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                        </button>
                        <a class="logo navbar-btn pull-left" href="/" title="Home">
                                <img src="images/logo.png" alt="Home">
                        </a>
                </div>

                <div id="social-nav" class="social-nav-wrapper clearfix">
                        <div class="social-nav">
                                <div class="region region-social-nav">
                                        <section id="block-search-form" class="block block-search clearfix">
                                                <form id="search-block-form" class="form-search content-search" action="/search/site/" method="post" accept-charset="UTF-8" role="search">
                                                        <h2 class="element-invisible">Search form</h2>
                                                        <div class="input-group">
                                                                <input title="Enter the terms you wish to search for." placeholder="Search" class="form-control form-text" type="text" name="search_block_form" value="" size="15" maxlength="128">
                                                                <span class="input-group-btn"><button type="submit" class="btn btn-primary"><i class="icon glyphicon glyphicon-search" aria-hidden="true"></i></button></span>
                                                        </div>
                                                        <button class="element-invisible btn btn-primary form-submit" name="op" value="Search" type="submit">Search</button>
                                                </form>
                                        </section>
                                        <section id="block-menu-menu-social-media-navbar" class="block block-menu">

                    <div class="social-nav-icons">

                      <a href="/emergency-management/alert-tampa" data-toggle="tooltip" data-placement="bottom" title="Emergency Notifications">
                        <i class="icon-alert-tampa-logo" aria-hidden="true"></i>
                        <span class="sr-only">alerttampa</span>
                      </a>


                      <a href="https://twitter.com/cityoftampa" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Visit us on Twitter">
                        <i class="fa fa-twitter" aria-hidden="true"></i>
                        <span class="sr-only">twitter</span>
                      </a>


                      <a href="https://www.facebook.com/TampaGov" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Visit us on Facebook">
                        <i class="fa fa-facebook" aria-hidden="true"></i>
                        <span class="sr-only">facebook</span>
                      </a>


                      <a href="https://www.instagram.com/tampagov" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Visit us on Instagram">
                        <i class="fa fa-instagram" aria-hidden="true"></i>
                        <span class="sr-only">instagram</span>
                      </a>

                        <a href="https://nextdoor.com/city/feed/17696929/?i=mdkhfhyrzcdkytlrfllc" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Visit us on Nextdoor">
                          <i class="fa fa-home" aria-hidden="true"></i>
                          <span class="sr-only">NextDoor</span>
                        </a>


                      <a href="https://www.youtube.com/user/CityofTampa" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Visit us on YouTube">
                        <i class="fa fa-youtube" aria-hidden="true"></i>
                        <span class="sr-only">youtube</span>
                      </a>


                      <a href="https://www.snapchat.com/add/cityoftampa" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Visit us on Snapchat">
                        <i class="fa fa-snapchat-ghost" aria-hidden="true"></i>
                        <span class="sr-only">snapchat</span>
                      </a>


                      <a href="https://www.flickr.com/photos/cityoftampa/albums" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Visit us on Flickr">
                        <i class="fa fa-flickr" aria-hidden="true"></i>
                        <span class="sr-only">Flickr</span>
                      </a>


                    </div>

                                        </section>
                                </div>
                        </div>
                </div>

                <div class="navbar-collapse collapse menu-region">
                        <nav role="navigation">
                                <ul class="menu nav navbar-nav">
                                        <li class="first expanded"><a href="/departments">Departments</a></li>
                                        <li class="leaf"><a href="/residents">Residents</a></li>
                                        <li class="leaf"><a href="/businesses">Businesses</a></li>
                                        <li class="leaf"><a href="/visitors">Visitors</a></li>
                                        <li class="expanded"><a href="http://www.tampagov.net/services">Services</a></li>
                                        <li class="leaf"><a href="/government">Government</a></li>
                                        <li class="last leaf jobs"><a href="http://www.tampagov.net/jobs">Jobs</a></li>
                                </ul>
                                <section id="block-search-form--2" class="block block-search clearfix">
                                        <form class="form-search content-search" action="/city-clerk" method="post" id="search-block-form--2" accept-charset="UTF-8" role="search">
                                                <h2 class="element-invisible">Search form</h2>
                                                <div class="input-group">
                                                        <input title="Enter the terms you wish to search for." placeholder="Search" class="form-control form-text" type="text" name="search_block_form" value="" size="15" maxlength="128"><span class="input-group-btn"><button type="submit" class="btn btn-primary"><i class="icon glyphicon glyphicon-search" aria-hidden="true"></i></button></span>
                                                </div>
                                                <button class="element-invisible btn btn-primary form-submit" id="edit-submit--2" name="op" value="Search" type="submit">Search</button>
                                                <input type="hidden" name="form_id" value="search_block_form">
                                        </form>
                                </section>
                        </nav>
                </div>
        </header>
</div>