Tampa Skyline

Kitchen Sink

Jumbotron, Image & Counter

A pretty visual

Sometimes just an image is all you need to convey a point

156235 lbs
Counter
A counter helps animated an impressive statistic.
A kitchen sink
EVERYTHING BUT THE KITCHEN SINK

A common expression that means "almost everything that one can think of" or "just about everything"

Callout and Quotes

Origin: The phrase originated around the early 1900s and became popular during World War II, where it was said that everything but the kitchen sink was thrown at the enemy.

This story has everything but the kitchen sink in it.

Haruhi
azquotes.com

Vue Widgets

An interactive widget that pulls esri info based on address.

h1. Bootstrap heading

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h2. Bootstrap heading

Fancy display heading With faded secondary text

h4. Bootstrap heading

You can use the mark tag to highlight text.

h5. Bootstrap heading

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

h6. Bootstrap heading

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

This line rendered as bold text.

This line rendered as italicized text.

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

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Cards

Mountains
Mayors Office

Mayor Initiative

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

Railroad

Plain Text Link

This card does not have a sub-headline. And the link is plain text instead of the default button.

Training

Card Usage Guidelines

When to use: 

  • When you want a few very prominent pieces of content to highlight important topics
  • Creating a visual button grid for services/divisions/sections

When not to: 

  • When you have a lot, cards take up a lot of real-estate too many and its difficult for a user to evaluate them all. The more content you have the simpler its must display. Consider button or links instead. 

Cards - 3 Column Non-Grid

Col1

Card Title

Card Image
Column 2

Card 2

Large card with lots of text and height with smaller cards on each side.

Col1

Card Title

Photo Gallery

Slide Show

Proper Alt Text

Slide Title

This is the slide body to give context or details about the photo with rich formatting options like bold text.

Slideshow alt text

Steps & Accordion

Our Process
  1. Print out the application

  2. Gather documents and scan them into a final .pdf document

  3. Submit your documents to our online system

First Accordion Group

This is the first accordion group. This first paragraph is to give users an intro be fore the accordions start.

EXPAND ALL

This is the first option, you can set it to be expanded by default if you want.

This is the second option, I choose to have it not auto expanded. 

Video & Map

What is Web Accessibility in 60 seconds!

Checkerboard & Timeline

A Brief History in Web Design
  • 1995

    Tables

    The birth of browsers that could display images was the first step into web design as we know it. 

  • 1998

    CSS

    Around the same time as Flash, a better approach to structuring design from a technical standpoint was born – Cascading Style Sheets (CSS). 

  • 2007

    Mobile uprising

    Browsing the web on mobile phones was a whole challenge in itself. Besides all the different layouts for devices, it introduced content-parity problems – should the design be the same on the tiny screen or should it be stripped down?

BENEFITS

The City provides its employees with a generous variety of policy benefits in addition to group insurance and retirement benefits. Below is a partial listing of some of the other benefits the City provides to its employees.

JOIN US

The City provides its employees with a generous variety of policy benefits in addition to group insurance and retirement benefits. Below is a partial listing of some of the other benefits the City provides to its employees.

Static Chart & OpenGov Chart

Static Chart

A chart you maintain in Drupal by editing the page

Interactive Table

Interactive Table of Content
title image_reference recipe_category preparation_time cooking_time total_time difficulty number_of_servings
Deep mediterranean quiche 1 3 40 30 70 medium 8
Vegan chocolate and nut brownies 2 4 20 20 40 medium 12
Super easy vegetarian pasta bake 3 3 5 20 25 easy 4
Watercress soup 4 5 10 20 30 easy 4
Victoria sponge cake 5 2 20 20 40 easy 10
Gluten free pizza 6 3 15 15 30 4
Thai green curry 7 3 10 15 25 4
Crema catalana 8 2 10 20 30 8
Fiery chili sauce 9 1 10 50 60 easy 60

Updated: 12/18/2024