City of Tampa Style Guide

Color 8.1

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

Change text alignment, transform, style, weight, and color with Bootstraps text utilities and color utilities.

When working with colors be sure to test color contrast combinations.

Notes: Details at Bootstrap Docs

<insert-markup>typography.color-</insert-markup>
.text-primary
.text-secondary must be on dark backgrounds
.text-success
.text-danger
.text-shadow
.text-warning
.text-info
.text-light
.text-muted
.text-white
Source: src/scss/base/_typography.scss, line 173

Custom Icons 8.2

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

Custom and commonly used icons that use the icon font strategy, if you need more icons load up the pro kit <script src="https://kit.fontawesome.com/ca4203438a.js" crossorigin="anonymous"></script> which is javascript based and gives you full access to the 7k icon library. Example usage in CSS .field__item::before { font-family: "fontello"; content: '\e804'; }

When to use: Some guidance on when to use this component.

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

Notes: This is a limited set of icons included with the base theme, for all icons use FontAwesome Pro Kit.

<insert-markup>typography.customicons-</insert-markup>
icon-down-open \e800
icon-left-open \e801
icon-right-open \e802
icon-up-open \e803
icon-calendar-1 \e804
icon-print \e805
icon-export \e806
icon-plus \e807
icon-minus \e808
icon-lock \e809
icon-lock-open \e80a
icon-check \e80b
icon-ok-circled \e80c
icon-phone \e80d
icon-clock \e80e
icon-block \e80f
icon-thumbs-up \e810
icon-thumbs-down \e811
icon-video \e812
icon-help-circled \e813
icon-alert_tampa_logo \e900
icon-accessible \e901
icon-alert-tampa-logo \e902
icon-arrow-left \e903
icon-arrow-right \e904
icon-calendar \e905
icon-city-seal \e906
icon-compass \e907
icon-info \e908
icon-logo \e90b
icon-map \e90c
icon-marker \e90d
icon-payment-add \e90e
icon-permit \e90f
icon-speech-bubble \e910
icon-way-sign \e911
icon-check-empty \f096
icon-twitter \f099
icon-menu \f0c9
icon-doc-text \f0f6
icon-at \f1fa
icon-universal-access \f29a
icon-facebook-squared \f308
Source: src/scss/fontello/fontello-src.scss, line 1

Headings 8.3

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

Headings used in page body.

When to use: Use to break up content into meaningful chunks. Use levels to drill down into topics.

<insert-markup>typography.headings-</insert-markup>

Heading One

Heading Two

Heading Three

Heading Four

Heading Five styled like an H1
Heading Six
Source: src/scss/base/_typography.scss, line 9

Quote 8.4

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

Blockquotes distinguishing quoted text from the rest of the content. The <cite> tag should be used for referencing creative work rather than the person who said or wrote the quote.

When to use: Content is quoted from another source

When not to: When you want to visually emphasize your own content a card or alert may be better choices

Notes: Bootstrap Docs.

<insert-markup>typography.quote-</insert-markup>

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

Someone famous in Source Title
Source: src/scss/base/_typography.scss, line 199

Display (Size) 8.5

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

The Display classes are for overly large text sizes, typically used in hero, jumbotrons or banners. These Display classes are much larger than the sites Headings.

When to use: When you need to visually adjust text size, but not semantically adjust its importance as with headings.

<insert-markup>typography.size-</insert-markup>
Normal sized text
Text Small
Text Large
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Source: src/scss/base/_typography.scss, line 276
<insert-markup>typography.textalign-</insert-markup>

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Right aligned text on viewports sized SM (small) or wider.

Right aligned text on viewports sized MD (medium) or wider.

Right aligned text on viewports sized LG (large) or wider.

Right aligned text on viewports sized XL (extra-large) or wider.

Source: src/scss/base/_typography.scss, line 342

Text Decoration 8.7

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

When text should not have any decorations.

When to use: When text is inside linked components like Jumbotrons or cards.

<insert-markup>typography.textdecoration-</insert-markup>
Source: src/scss/base/_typography.scss, line 320

Transform 8.8

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

Change text alignment, transform, style, weight, and color with Bootstraps text utilities and color utilities.

Notes: Details at Bootstrap Docs

<insert-markup>typography.transform-</insert-markup>
Lowercased text.
Uppercased text.
CapiTaliZed text.
Source: src/scss/base/_typography.scss, line 156

Truncate 8.9

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

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.

<insert-markup>typography.truncate-</insert-markup>

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.

Source: src/scss/base/_base.scss, line 325

Utilities 8.10

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

Change text alignment, transform, style, weight, and color with Bootstraps text utilities and color utilities.

Notes: Details at Bootstrap Docs

<insert-markup>typography.utilities-</insert-markup>

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Source: src/scss/base/_typography.scss, line 116

Weight 8.11

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

Change text alignment, transform, style, weight, and color with Bootstraps text utilities and color utilities.

Notes: Details at Bootstrap Docs

<insert-markup>typography.weight-</insert-markup>

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Source: src/scss/base/_typography.scss, line 137