City of Tampa Pattern Library

Alerts

Alert messages with optional dissmissable buttons.

<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message. <a href="#">Link</a>
</div>
<div class="alert alert-info" role="alert">
    <strong><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Heads up!</strong> This alert needs your attention, but it's not super important. <a href="#">Link</a>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
    Warning!</strong> Better check yourself, you're not looking too good. <a href="#">Link</a>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>Oh snap!</strong> Change a few things up and try submitting again. <a href="#">Link</a>
</div>

Buttons

Buttons modeled off bootstrap. The minimum needed for a button is .btn and .btn-default in order for a button to display correctly.

When to use a button or link?

Does the Control Take Me to Another Page? Use a Link/Anchor

Does the Control Change Something on the Current Page? Use a Button

Links an button swaps

Link that looks like a button

Type Variation

Style Variations

Size Variations

<h4>Links an button swaps</h4>
<a class="btn btn-default" href="#" role="button">Link that looks like a button</a>
<button class="link" role="button" type="button">Button that looks like a link</button>
<h4>Type Variation</h4>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input:button">
<input class="btn btn-default" type="submit" value="Input:Submit">
<button type="button" class="btn btn-default">btn-default</button>
<h4>Style Variations</h4>
<button type="button" class="btn btn-default">btn-default</button>
<button type="button" class="btn btn-standard">btn-standard</button>
<button type="button" class="btn btn-primary">btn-primary</button>
<button type="button" class="btn btn-success">btn-success</button>
<button type="button" class="btn btn-info">btn-info</button>
<button type="button" class="btn btn-warning">btn-warning</button>
<button type="button" class="btn btn-danger">btn-danger</button>
<h4>Size Variations</h4>
<button type="button" class="btn btn-default btn-lg">btn-lg</button>
<button type="button" class="btn btn-default">Original Size</button>
<button type="button" class="btn btn-default btn-sm">btn-sm</button>
<button type="button" class="btn btn-default btn-xs">btn-xs</button>

Card

A generic card component that has a border and dropshadow and can contain other elements such as images titles

Card image

John Doe

Some example text.

See Profile
Card image

John Doe

Some example text.

See Profile
Card image
Optional Header

John Doe

Some example text.

<div class="row">
  <div class="col-sm-4">
    <div class="cot-card">
      <img class="card-img-top" src="http://placehold.jp/400x250.png" alt="Card image">
      <div class="card-body">
        <h4 class="card-title">John Doe</h4>
        <p class="card-text">Some example text.</p>
        <a href="#" class="btn btn-primary">See Profile</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="cot-card">
      <img class="card-img-top" src="http://placehold.jp/400x250.png" alt="Card image">
      <div class="card-body">
        <h4 class="card-title">John Doe</h4>
        <p class="card-text">Some example text.</p>
        <a href="#" class="btn btn-primary">See Profile</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="cot-card">
      <img class="card-img-top" src="http://placehold.jp/400x250.png" alt="Card image">
      <div class="card-header">Optional Header</div>
      <div class="card-body">
        <h4 class="card-title">John Doe</h4>
        <p class="card-text">Some example text.</p>
      </div>
      <div class="card-footer">Optional Footer</div>
    </div>
  </div>
</div>

Colors

We have a few background colors that can be used in various contexts. These are not for use as the entire page background but instead for specific components and modules on the page. ** Look under Typography -> Text-color for CSS classes for these colors **

#4bafdb
Primary #1e9bd3
Secondary #86c81f
#818181
Danger #B61735
Warning #ffff00

Icon Buttons

To create buttons that are half a page width, put them inside a two column layout.

<!-- Full Width -->
<div class="row">
    <div class="col-sm-12">
        <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-sm-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-sm-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
                </span>
            </a>
    </div>
</div>

Panel

Panels, like a well only they can have .panel-heading and/or .panel-footer. Color with familiar .panel-primary .panel-success .panel-info .panel-danger .panel-warning classes

HELLO, this is a Panel heading
Panel content should be placed here.
A panel at the very least needs a body
<div class="panel panel-primary">
  <div class="panel-heading">HELLO, this is a Panel heading</div>
  <div class="panel-body">
    Panel content should be placed here.
  </div>
</div>
<div class="panel panel-danger">
  <div class="panel-body">
    A panel at the very least needs a body
  </div>
</div>

Table Highlights

The following demos various highlighting than can be applied to table rows.

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Column heading</th>
            <th>Column heading</th>
            <th>Column heading</th>
        </tr>
    </thead>
    <tbody>
        <tr class="active">
            <th scope="row">1</th>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
        <tr class="success">
            <th scope="row">3</th>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
        <tr class="info">
            <th scope="row">5</th>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
        <tr>
            <th scope="row">6</th>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
        <tr class="warning">
            <th scope="row">7</th>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
        <tr>
            <th scope="row">8</th>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
        <tr class="danger">
            <th scope="row">9</th>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
    </tbody>
</table>

Tables

Optional classes to extend the basic table styles are table-striped is an optional class. table-hover is also another optional class. table-condensed is also another class that will tighten everything up.

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped table-hover">
    <caption>Optional table caption.</caption>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

Well

Callout important info in a well to set it apart from the surrounding content.

Look, i'm a well
Look, i'm a well-lg
Look, i'm a well-sm
<div class="well">Look, i'm a well</div>
<div class="well well-lg">Look, i'm a well-lg</div>
<div class="well well-sm">Look, i'm a well-sm</div>