City of Tampa Style Guide

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
Source: src/scss/base/_components.scss, line 825

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
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.

Source: src/scss/base/_typography.scss, line 223
<insert-markup>content.figures-</insert-markup>
Placeholder Image
A caption for the above image.
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
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
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
Source: src/scss/base/_components.scss, line 361

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
Source: src/scss/base/_tables.scss, line 1