City of Tampa Style Guide

Accordion Group 2.1

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

A collapsible group of content. This is a good pattern if you need to present multiple single pieces of content. And you don't anticipate a user will need all the information at once.

When to use: If users will only need a few specific piece of content.

When not to: If users need to see most or all of the information. Use well-formatted text instead.

Notes: Content hidden in accordions hurts SEO and is not indexed by search crawlers.

Dev Notes: remove the `data-parent` attribute to remove the limit of only having one open at a time.

<insert-markup>components.accordion-</insert-markup>
Accordion Group
An accordion group only shows one item at a time.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Source: src/scss/base/_components.scss, line 1

Accordion Single 2.2

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

A simple accordion example with configurable icon indicator. Icon options by default are +/- other options are .hide-icon, .lock-icon, and .chevron-icon. This example is different from the accordion group because these are individual non-related accordion examples.

When to use: If users will not likely need the hidden content and the hidden content does not contain important information OR you purposely want to hide content behind a user interaction such as a click on a button.

When not to: If its important the hidden content is discoverable, find another means to display your information.

Notes: Content hidden in accordions hurts SEO, is not indexed by search engines and is hidden from assistive technologies by default.

Dev Notes: Styles are attached to the aria tags instead of classes to ensure accessibility standards are implemented.

<insert-markup>components.accordionsingle-</insert-markup>
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Source: src/scss/base/_components.scss, line 74

Alert 2.3

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

Alerts are used to draw attention to short messages to the user and typically inform them of something. Alerts can be themed so they match their content the '.alert-info' is the standard alert color.

When to use: When you have a short message that needs to be emphasized to the user and the content matches the alert theme.

When not to: When you have a lot of text or other complex layout/graphics use a callout or other pattern for emphasis.

Notes: Visit bootstrap docs for more details on options and usage https://getbootstrap.com/docs/4.4/components/alerts/

<insert-markup>components.alert-</insert-markup>
Source: src/scss/base/_alerts.scss, line 1

Card 2.4

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

A generic card component that has a border and dropshadow and can contain other elements such as images titles. The .card-deck is used to make all the cards in the row equal in height.

When to use: When you really want to highlight something like a new initiative or program.

When not to: When you have alot of content simpler buttons take up less space are less cognitive load on visitors to process.

Notes: Cards take up alot of realestate so you won't be able to use more than a few.

<insert-markup>components.card-</insert-markup>
...
Featured

Mayor Announces Bridges to Business Vendor Certification

Some quick example text to build on the card title and make up the bulk of the card's content.

...

Card title

This is the button version. Some quick example text to build on the card title and make up the bulk of the card's content.

Source: src/scss/base/_card.scss, line 1

Cards - Clickable 2.5

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

This is a style of cards that all behave as buttons. Only a single URL is possible with these. They offer more text content than a buttons so they can help explain a link better than a button. Wrap them in a .card-grid to let them wrap and create multiple rows.

When to use: When a button can't explain it all, often used to list a departments services.

When not to: The card cant support multiple links. When a normal button is enough and you don't need to supply more context.

Notes: Don't put too many on the page, these take up a lot of realestate, buttons are more space efficient when you want to display a lot of links to a visitor.

Source: src/scss/base/_card.scss, line 123

Counter 2.6

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

A data visualization for numbers.

When to use: A data visualization for a number with label.

When not to:

Notes:

<insert-markup>components.counter-</insert-markup>
35
Street Cleaning

feet of cleaned streets in Tampa.

Source: src/scss/base/_components.scss, line 422

FAQ 2.7

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

An accordion is a list of headers that hide or reveal additional content when selected.

When to use: If users will only need a few specific pieces of content within a page.

When not to: If users need to see most or all of the information on a page. Use well-formatted text instead.

Notes: Content hidden in accordions hurts SEO and is not indexed by search crawlers.

(ADA REQUIRED) the `faq-show-all` button can be used to expand all the answers so they can be searched using Ctrl+F. Update the `toggleShow` to indicate all the items you would like to make visible when the button is clicked.

<insert-markup>components.faq-</insert-markup>

Frequently Asked Questions

An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner.

While accordions sound ideal for presenting complex content, like with many other widgets and implementations, they are not a one-size-fits-all solution. There are major downsides to accordions.

  • Forcing people to click on headings one at a time to display full content can be cumbersome.
  • Accordions increase interaction cost.
  • Hiding content behind navigation diminishes people’s awareness of it.
  • Accessibility is an important consideration.
  • Printing problems
  • Myth #1: Users don’t scroll long pages
  • Myth #2: Customers don’t read information at the bottom of the page
  • Myth #3: People avoid pages with a lot of content

Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions. Better to show all page content at once when the use case supports it. In such cases, don’t worry too much about page length. Relevance trumps page length.

Source: src/scss/base/_components.scss, line 226

Icon Buttons 2.8

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

Icon buttons are enhanced buttons with an icon. They are designed mainly to be used on content pages to drive traffic to primary pathways.

When to use: Some guidence on when to use.

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

Notes: Requires FontAwesome

<insert-markup>components.iconbuttons-</insert-markup>
Source: src/scss/base/_buttons.scss, line 217

Jumbotron 2.9

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

A Jumbotron is a full width hero banner with a flexible overlay area that can support common markup. Overlay positioning options are overlay-{middle/bottom}-{left/right} an example would be overlay-middle-right. A Jumbotron turns into a card on mobile. Adding w-100 to the overlay will create a larger overlay if needed.

When to use: When you need a primary hero banner.

When not to: The overly can only support a small amount of content.

Notes: The Jumbotron does not have to be linked, instead place buttons in the overlay region.

<insert-markup>components.jumbotron-</insert-markup>
Source: src/scss/base/_jumbotron.scss, line 1

Section Navigation 2.10

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

The primary section navigation menu which is a list of links related to the current section.

When to use: Connect all pages with a hierarchical menu.

When not to: When you wan to link to files or external sites, consider in-page buttons.

Notes:

<insert-markup>components.sidenav-</insert-markup>
Source: src/scss/base/_nav.scss, line 47

Timeline 2.11

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

A chronological series of content with bodies that support text and images.

When to use: When you have linear timeline style of content.

When not to: When there is not a linear order to your content.

Notes: Content must be ordered manually to support dates like "Summer 2020".

<insert-markup>components.timeline-</insert-markup>
  • 2012 - 2019

    Dwelling

    5,645 dwelling units, 468,235 SF commercial space, 473 hotel rooms and 1,188 student beds have been constructed in the downtown area.

  • 2015

    Dwelling

    Center City Tampa will be a community of livable places, connected people, and collaborative progress that embraces and celebrates its river and waterfront.

  • 2014

    Hotel opens

    • Le Meridian Hotel opens in the renovated Federal Courthouse building.
    • The new Waterworks Park was completed and opened.
    • The Zack Street Avenue of the Arts streetscape was completed.

Source: src/scss/base/_components.scss, line 549

Videos 2.12

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

iFramed videos are not responsive by default, a wrapper class is applied with a padding percentage that matches the video aspect ratio. Other can be used test

<insert-markup>components.videos-</insert-markup>
Source: src/scss/base/_base.scss, line 319