City of Tampa Pattern Library

Anchor Links

Simply create links to point to element ID's to create anchor links. CSS will automatically highlight headings that match the ID in the URL. Javascript will automatically add an offset fo the sites static header.

View FAQ 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum reiciendis expedita fuga dolorem iure, nobis corrupti omnis natus quo commodi perferendis quia enim asperiores qui harum sequi. Quis, optio, repellendus.

FAQ Number One

<a href="#faq-1">View FAQ 1</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum reiciendis expedita fuga dolorem iure, nobis corrupti omnis natus quo commodi perferendis quia enim asperiores qui harum sequi. Quis, optio, repellendus.</p>
<h1 id="faq-1">FAQ Number One</h1>

Breadcrumbs

Breadcrumbs are used as a navigation aid to assure the users of where they are in the site. Can be applied to <ul> or <ol> style lists

<ol class="breadcrumb">
  <li class="first"><a href="/">Home</a></li>
  <li><span title="" class="nolink">Parent</span></li>
  <li class="last">Current page</li>
</ol>

Button Blocks

Button blocks are used at the start or end of content and is used to provide primary paths or next steps. .content-button must be wrapped in a .row-button-block

<div class="row row-button-block">
  <a href="#" class="content-button">Single Button</a>
</a>
<div class="row row-button-block">
  <div class="col-md-4">
      <a href="#" class="content-button">Buttons contained in columns</a>
  </div>
  <div class="col-md-4">
      <a href="#" class="content-button">Buttons contained in columns</a>
  </div>
  <div class="col-md-4">
      <a href="#" class="content-button">Buttons contained in columns</a>
  </div>
</div>
<div class="row row-button-block">
  <div class="col-md-3">
      <a href="#" class="content-button">Edit</a>
  </div>
  <div class="col-md-3">
      <a href="#" class="content-button">Save</a>
  </div>
  <div class="col-md-3">
      <a href="#" class="content-button">Copy</a>
  </div>
  <div class="col-md-3">
      <a href="#" class="content-button">Delete</a>
  </div>
</div>

Pagination

Pagination for paginated results. Note: prev and next are currently unstyled

<ul class="pagination">
    <li class="prev"><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li class="active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="next"><a href="#">Next</a></li>
  </ul>

Pane Button Menu

At fullscreen these are buttons but on mobile its a vertical button list.

<div class="pane-menu-menu-dept-mayor">
    <ul class="menu nav" role="menu">
        <li class="first" role="menuitem"><a href="#">Mayor's Home Page</a></li>
        <li role="menuitem"><a href="#">NEWS</a></li>
        <li class="active-trail active active" role="menuitem"><a href="#" class="active-trail active">Multimedia &amp; Presentations</a></li>
        <li role="menuitem"><a href="#">PROCLAMATIONS</a></li>
        <li role="menuitem"><a href="#">Plans &amp; Initiatives</a></li>
        <li class="last" role="menuitem"><a href="#">CONTACT</a></li>
    </ul>
</div>

Pane Menu

The pane menu is used as a side navigation item. It is full width but should be placed in a container to limit its width. On tampagov.net a class col-sm-4 is used to limit its width.

<nav class="pane-menu">
    <h2 class="pane-title">Pane Title</h2>
    <ul class="menu nav">
            <li class="first"><a href="#">Link</a></li>
            <li><a href="#" class="active">Link</a></li>
            <li> <a href="#">Submenu</a>
                    <ul class="submenu">
                            <li><a href="#">Sub-Link</a></li>
                            <li><a href="#" class="active">Sub-Link</a></li>
                            <li><a href="#">Sub-Link</a></li>
                    </ul>
            </li>
            <li class="separator"><hr></li>
            <li class="collapsed"><a href="#">Link collapsed</a></li>
            <li class="nolink">no-link</li>
    </ul>
</nav>

Tabs - Buttons

Styled Navigaiton tabs used on the calendar page and styled to match buttons. Class active can be optionally applied to the active tab. <span class="element-invisible"> is used for screen readers Can be applied to an <ul> or <ol>

<div class="page-calendar" role="tabpanel">
  <div class="pre-content">
    <ul class="tabs--primary nav nav-tabs" role="tablist">
      <li class="active" role="tab"><a href="#" class="active">Active Tab<span class="element-invisible">(active tab)</span></a></li>
      <li role="tab"><a href="#">Option A</a></li>
      <li role="tab"><a href="#">Option B</a></li>
    </ul>
  </div>
</div>

Tabs - Plain

Navigaiton tabs. Unstyled tabs. Can be applied to an <ul> or <ol>

<ul class="tabs--primary nav nav-tabs" role="tablist">
  <li class="active" role="tab"><a href="#" class="active">Active Tab<span class="element-invisible">(active tab)</span></a></li>
  <li role="tab"><a href="#">Option A</a></li>
  <li role="tab"><a href="#">Option B</a></li>
</ul>