Accordion Group 2.1
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.
src/scss/base/_components.scss, line 1
Accordion Single 2.2
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.
src/scss/base/_components.scss, line 74
Alert 2.3
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/
src/scss/base/_alerts.scss, line 1
Card 2.4
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.
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.
src/scss/base/_card.scss, line 1
Cards - Clickable 2.5
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.
src/scss/base/_card.scss, line 109
Counter 2.6
A data visualization for numbers.
When to use: A data visualization for a number with label.
When not to:
Notes:
feet of cleaned streets in Tampa.
src/scss/base/_components.scss, line 420
FAQ 2.7
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.
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.
src/scss/base/_components.scss, line 224
Jumbotron 2.9
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.
src/scss/base/_jumbotron.scss, line 1
Timeline 2.11
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".
-
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.
src/scss/base/_components.scss, line 547
Videos 2.12
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
src/scss/base/_base.scss, line 347