City of Tampa Style Guide

Content 3

Address 3.1

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Parks or facility or any locations type data. Use buttons or hyperlinks inside the card to link to detail pages if needed.

When to use: Some guidence on when to use.

When not to: Some guidence on when it is not the best choice.

Notes: Any futher info that is useful.

<insert-markup>content.address-</insert-markup>
Al Lopez Park
4810 N Himes Ave.
Tampa, FL 33614
Sunrise to sunset 
<div class="card mb-3">
    <div class="row no-gutters">
        <div class="col-md-4 p-1">
            <div class="d-flex h-100">
                <iframe class="w-100" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d8024.291852561649!2d-82.50616308784517!3d27.98869559785069!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88c2c3c740ba62bf%3A0x23b836049906240f!2sAl+Lopez+Park!5e0!3m2!1sen!2sus!4v1527688188641"
                    frameborder="0" style="border:0" allowfullscreen title="Google Map"></iframe>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <address>
                    <h5 class="card-title">Al Lopez Park</h5>
                    <div class="card-text">4810 N Himes Ave.<br>
                        Tampa, FL 33614</div>
                    <strong class="card-text">Sunrise to sunset</strong>
                </address>
            </div>
        </div>
    </div>
</div>
Source: src/scss/base/_components.scss, line 823

Buttons 3.2

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Buttons are visual controls for primary actions a users should engage with on the page. Use colors to draw attention to primary buttons and outlined buttons for secondary actions.

When to use: To identify the main controls you expect the users to need and make them buttons for a user to easily identify them.

When not to: Don't overuse buttons, they should be for primary actions, less important controls can be simple text hyperlinks.

Notes: 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

<insert-markup>content.buttons-</insert-markup>
Link that looks like a button
Link with .button class Link 
<a class="btn btn-primary" href="#" role="button">Link that looks like a button</a>
<button class="link" role="button" type="button">Button that looks like a link</button>
<div class="row padded">
    <div class="col">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-light">Light</button>
        <button type="button" class="btn btn-dark">Dark</button>
    </div>
</div>
<div class="row padded">
    <div class="col">
        <button type="button" class="btn btn-link">Link</button>
        <a class="button" href="#" role="button">Link with .button class</a>
        <a class="btn btn-primary" href="#" role="button">Link</a>
        <button class="btn btn-primary" type="submit">Button</button>
        <input class="btn btn-primary" type="button" value="Input">
        <input class="btn btn-primary" type="submit" value="Submit">
        <input class="btn btn-primary" type="reset" value="Reset">
    </div>
</div>
<div class="row padded">
    <div class="col bg-dark padded">
        <button type="button" class="btn btn-outline-primary">Primary</button>
        <button type="button" class="btn btn-outline-secondary">Secondary</button>
        <button type="button" class="btn btn-outline-success">Success</button>
        <button type="button" class="btn btn-outline-danger">Danger</button>
        <button type="button" class="btn btn-outline-warning">Warning</button>
        <button type="button" class="btn btn-outline-info">Info</button>
        <button type="button" class="btn btn-outline-light">Light</button>
    </div>
</div>
<div class="row padded">
    <div class="col">
        <button type="button" class="btn btn-primary" disabled>Primary button</button>
        <button type="button" class="btn btn-secondary" disabled>Button</button>
    </div>
</div>
<div class="row padded">
    <div class="col">
        <button type="button" class="btn btn-link">Go Back</button>
        <button type="button" class="btn btn-outline-primary">Reset</button>
        <button type="button" class="btn btn-primary">Continue</button>
    </div>
</div>
<div class="row padded">
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-secondary">Left</button>
        <button type="button" class="btn btn-secondary">Middle</button>
        <button type="button" class="btn btn-secondary">Right</button>
    </div>
</div>
Source: src/scss/base/_buttons.scss, line 1

Callout 3.3

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Callout are used to emphasize some small piece of content from the surround text. Its usually best to keep this to just emphasize text.

When to use: When you need a small portion of text to stand out, but not extremely stand out.

When not to: When you really need content to standout a card or alert is more visually powerful.

Notes:

<insert-markup>content.callout-</insert-markup>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<div class="callout">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
Source: src/scss/base/_typography.scss, line 223

Figures 3.4

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

An image with an optional caption.

Notes: Details at Bootstrap Figure Docs

<insert-markup>content.figures-</insert-markup>
Placeholder Image
A caption for the above image.
<figure class="figure">
  <img src="//placehold.jp/400x300.png" class="figure-img img-fluid rounded" alt="Placeholder Image">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
Source: src/scss/base/_page.scss, line 17

Images 3.5

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Images in Bootstrap are made responsive with .img-fluid so that it scales with the parent element.

When not to: For images with captions, use a <figure> instead.

Notes: Details at Bootstrap Docs

<insert-markup>content.images-</insert-markup>
Responsive image image thumbnail 
<img src="//placehold.jp/900x550.png" class="img-fluid" alt="Responsive image">
<img src="//placehold.jp/250x150.png" alt="image thumbnail" class="img-thumbnail">
Source: src/scss/base/_page.scss, line 1

Printing 3.6

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Change the display value of elements when printing with our print display utility classes. Includes support for the same display values as our responsive .d-* utilities.

When to use: When decorative items do no need printed

When not to: Careful to to hide important informaiton.

Notes: Bootstrap Print Docs.

<insert-markup>content.printing-</insert-markup>
Screen Only (Hide on print only)
Print Only (Hide on screen only)
Hide up to large on screen, but always show on print
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
Source: src/scss/base/_print.scss, line 270

Steps 3.7

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Use to style a set of steps or linear ordered process.

When to use: If you need to outline a fixed stepped process.

When not to:

Notes:

<insert-markup>content.steps-</insert-markup>
  1. Print out application
  2. Gather support documents and scan them into system.
  3. Be sure to follow these guides
    • Step one
    • Step Two
    • Step Three
  4. Submit the application
<ol class="list list--ordered">
    <li class="list__item">Print out application</li>
    <li class="list__item">Gather support documents and scan them into system.</li>
    <li class="list__item">Be sure to follow these guides<ul><li>Step one</li> <li>Step Two</li><li>Step Three</li></ul></li>
    <li class="list__item">Submit the application</li>
</ol>
Source: src/scss/base/_components.scss, line 359

Tables 3.8

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A table shows tabular data in columns and rows. Any <table>, then extend with custom styles or our various included modifier classes.

When to use: Tabular data. When you need tabular information, such as statistical data.

When not to: Non-tabular data. Depending on the type of content, consider using other presentation formats such as definition lists or hierarchical lists.

Notes: Details at Bootstrap Table Docs

<insert-markup>content.tables-</insert-markup>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover table-sm">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</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>
Source: src/scss/base/_tables.scss, line 1