City of Tampa Pattern Library

Code and Input

Used to highlight code or user input keys.

For example, <section> should be wrapped as inline. To switch directories, type cd followed by the name of the directory and hit Enter.
To edit settings, press ctrl + ,
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
To switch directories, type <kbd>cd</kbd> followed by the name of the directory and hit <kbd>Enter</kbd>.<br>
To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd>

Custom Icons

Custom City icons created by icomoon. When using icons add a title attribute to i tags and if text does not accompany your icon add a .sr-only span with human readable text (see link example below).

<i class="icon-info"></i>
<i class="icon-accessible" aria-hidden="true" title="Accessible icon"></i>
<i class="icon-alert-tampa-logo" aria-hidden="true" title="City of Tampa icon"></i>
<i class="icon-arrow-left" aria-hidden="true" title="Left Arrow icon"></i>
<i class="icon-arrow-right" aria-hidden="true" title="Right Arrow icon"></i>
<i class="icon-calendar" aria-hidden="true" title="Calendar icon"></i>
<i class="icon-city-seal" aria-hidden="true" title="City Seal icon"></i>
<i class="icon-compass" aria-hidden="true" title="Compass icon"></i>
<i class="icon-logo" aria-hidden="true" title="Logo icon"></i>
<i class="icon-map" aria-hidden="true" title="Map icon"></i>
<i class="icon-marker" aria-hidden="true" title="Marker icon"></i>
<i class="icon-payment-add" aria-hidden="true" title="Payment icon"></i>
<i class="icon-permit" aria-hidden="true" title="Permit icon"></i>
<i class="icon-speech-bubble" aria-hidden="true" title="Speech Bubble icon"></i>
<i class="icon-way-sign" aria-hidden="true" title="Way Sign icon"></i>

Fonts

The current availalble font families are 'Open Sans',Arial,sans-serif;

Font Family Sets

'Open Sans',Arial,sans-serif 'league_gothicregular',arial,Helvetica,sans-serif;

Fonts In Families Weights
league_gothicregular normal
league_gothicitalic normal
league_gothicCnRg normal
leaguegothiccondenseditalic normal
Open Sans 400
Open Sans 600
Open Sans 700
Open Sans 300
Open Sans 400italic
Monospace Font-Family class .monospace
font-serif Font-Family class .font-serif
font-sans-serif Font-Family class .font-sans-serif

Headings

Heading tags. Use heading-title to apply page heading styles.

Heading Title Secondary text

h1 heading Secondary text

h2 heading Secondary text

h3 heading Secondary text

h4 heading Secondary text

h5 heading Secondary text
h6 heading Secondary text

h1 heading Secondary text

h2 heading Secondary text

<h1 class="heading-title">Heading Title <small>Secondary text</small></h1>
<h1>h1 heading <small>Secondary text</small></h1>
<h2>h2 heading <small>Secondary text</small></h2>
<h3>h3 heading <small>Secondary text</small></h3>
<h4>h4 heading <small>Secondary text</small></h4>
<h5>h5 heading <small>Secondary text</small></h5>
<h6>h6 heading <small>Secondary text</small></h6>
<div class="page-content">
  <h1>h1 heading <small>Secondary text</small></h1>
  <h2>h2 heading <small>Secondary text</small></h2>
</div>

Icons

All the available Bootstrap Glyphicons are available for use. The most popular and common are listed below. Note a base glyphicon is need along with the actual icon such as glyphicon-search, the aria-hidden is used for accessability issues so screen readers to not read these visual icons.

<button type="button" class="btn btn-standard" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
<span class="glyphicon glyphicon-file" aria-hidden="true"></span>
<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
<span class="glyphicon glyphicon-print" aria-hidden="true"></span>
<span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
<span class="glyphicon glyphicon-book" aria-hidden="true"></span>
<span class="glyphicon glyphicon-list" aria-hidden="true"></span>
<span class="glyphicon glyphicon-marker" aria-hidden="true"></span>
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
<span class="glyphicon glyphicon-tag" aria-hidden="true"></span>
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>

Lists

Various styles for lists. list-inline can be good for links, or button link lists like a menu. Override the icon with any fontawesome icon by its content code see comments in code.

  • Default One
  • Default Two
  • list-unstyled One
  • list-unstyled Two
  • list-inline One
  • list-inline Two
Icon Enhanced Requires FontAwesome.
  • list-checked One
  • list-checked Two
  • list-unchecked One
  • list-unchecked Two
  • list-ban One
  • list-ban Two
<div class="row">
<div class="col-sm-4">
  <ul>
    <li>Default One</li>
    <li>Default Two</li>
  </ul>
</div>
<div class="col-sm-4">
  <ul class="list-unstyled">
    <li>list-unstyled One</li>
    <li>list-unstyled Two</li>
  </ul>
</div>
<div class="col-sm-4">
  <ul class="list-inline">
    <li>list-inline One</li>
    <li>list-inline Two</li>
  </ul>
</div>
</div>
Icon Enhanced <strong>Requires FontAwesome</strong>.
<div class="row">
<div class="col-sm-4">
  <ul class="list-checked">
    <li>list-checked One</li>
    <li>list-checked Two</li>
  </ul>
</div>
<div class="col-sm-4">
  <ul class="list-unchecked">
    <li>list-unchecked One</li>
    <li>list-unchecked Two</li>
  </ul>
</div>
<div class="col-sm-4">
  <ul class="list-ban">
    <li>list-ban One</li>
    <li>list-ban Two</li>
  </ul>
</div>
<style>
  //Override an icon from one of the above icon enhanced lists
  //replace list-class with actual list class you want to target
  .list-class li:before {content: "\f044";}
</style>
</div>

Marked(Highlight) Text

Inline text highlighting and calls to attention.

You can use the mark tag to highlight text. This line of text is meant to be treated as fine print. rendered as bold text An abbreviation of the word attribute is attr
You can use the mark tag to <mark>highlight</mark> text.
<small>This line of text is meant to be treated as fine print.</small>
<strong>rendered as bold text</strong>
An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>

Paragraph - Lead

Make a paragraph stand out by adding .lead.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quibusdam eligendi assumenda laudantium odit ad facere natus dolores dignissimos rerum, aspernatur odio aliquid quasi itaque neque quo praesentium cum error.

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quibusdam eligendi assumenda laudantium odit ad facere natus dolores dignissimos rerum, aspernatur odio aliquid quasi itaque neque quo praesentium cum error.</p>

Terms and Definitions

Definitions lists, for relating terms to definitions. <dt> is for the term while <dd> is for the definition.

T&I
Techonology and Innovation
TPD
Tampa Police Department
<dl class="dl-horizontal">
  <dt>T&I</dt>
  <dd>Techonology and Innovation</dd>
  <dt>TPD</dt>
  <dd>Tampa Police Department</dd>
</dl>

Text Alignment

Easily realign text to components with text alignment classes.

Left aligned text.

Left aligned text only for desktops.

Center aligned text.

Right aligned text.

Right aligned text only for desktops.

Justified text.

No wrap text.

<p class="text-left">Left aligned text.</p>
<p class="text-left-desktop">Left aligned text only for desktops.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-right-desktop">Right aligned text only for desktops.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Text Color

Text color and background color helper classes. To be used to style text blocks and backgrounds according to the current style guide. Headlines and links used within a background-* class will be styled accordingly to match the background.

text-primary color example with Link

text-secondary color example with Link

text-muted color example

text-black color example

text-white color example

text-warning color example

text-danger color example

text-info color example

text-success color example

Borders border-primary border-secondary border-white

Headings styled automatically

Text within a background color set is automatically white. Link color
.text-primary of course can still overwrite
Both used together to make the text white and background the primary color. Link color

.text-white will color text white

.text-secondary of course can still overwrite

<p class="text-primary"> text-primary color example with <a>Link</a></p>
<p class="text-secondary"> text-secondary color example with <a>Link</a></p>
<p class="text-muted"> text-muted color example</p>
<p class="text-black"> text-black color example</p>
<p class="text-white background-primary"> text-white color example</p>
<p class="text-warning"> text-warning color example</p>
<p class="text-danger"> text-danger color example</p>
<p class="text-info"> text-info color example</p>
<p class="text-success"> text-success color example</p>
<p>Borders <span class="border-primary">border-primary</span> <span class="border-secondary">border-secondary</span> <span class="border-white">border-white</span> </p>
<div class="background-secondary">
  <h2>Headings styled automatically</h2>
  Text within a background color set is automatically white. <a>Link color</a>
  <div class="text-primary">.text-primary of course can still overwrite</div>
</div>
<div class="background-primary">
    Both used together to make the text white and background the primary color. <a>Link color</a>
    <p class="text-white">.text-white will color text white</p>
    <p class="text-secondary">.text-secondary of course can still overwrite</p>
</div>

Text Size

Using the FontAwesome size styles you can increase the defualt size of your text specified in em's. requires fontawesome

Standard .fa-lg .fa-2x .fa-3x .fa-4x .fa-5x
<span class=""> Standard </span>
<span class="fa-lg"> .fa-lg </span>
<span class="fa-2x"> .fa-2x </span>
<span class="fa-3x"> .fa-3x </span>
<span class="fa-4x"> .fa-4x </span>
<span class="fa-5x"> .fa-5x </span>

Truncate

Truncate text after one line, overflow is hidden, works on headlines. Using CSS to truncate means it will always fill in the viewable space vs. truncating a string on the backend. OPTIONAL: Custom widths can be used with inline styles.

Untruncated - This is a really long sentence, and can break the layout of the page so it can be helpful to truncate it as long as there is some way for the user to see it in full form such as on a details page.

Truncated - This is a really long sentence, and can break the layout of the page so it can be helpful to truncate it as long as there is some way for the user to see it in full form such as on a details page.

50% Truncated - This is a really long sentence, and can break the layout of the page so it can be helpful to truncate it as long as there is some way for the user to see it in full form such as on a details page.

<p>Untruncated - This is a really long sentence, and can break the layout of the page so it can be helpful to truncate it as long as there is some way for the user to see it in full form such as on a details page.</p>
<p class="truncate">Truncated - This is a really long sentence, and can break the layout of the page so it can be helpful to truncate it as long as there is some way for the user to see it in full form such as on a details page.</p>
<p class="truncate" style="width:50%">50% Truncated - This is a really long sentence, and can break the layout of the page so it can be helpful to truncate it as long as there is some way for the user to see it in full form such as on a details page.</p>