Kitchen Sink
This page is a demo of the rich content types that tampa.gov has available for website editors. The information on this page is meant to showcase our page blocks and patterns used to create website content.
Jumbotron, Image & Counter ¶
Sometimes just an image is all you need to convey a point
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.
Vue Widgets ¶
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
Icon Buttons ¶
Icon Links ¶
Cards ¶
Mayor Initiative
Some quick example text to build on the card title and make up the bulk of the card's content.
Plain Text Link
This card does not have a sub-headline. And the link is plain text instead of the default button.
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 ¶
Card Title
Card 2
Large card with lots of text and height with smaller cards on each side.
Card Title
Photo Gallery ¶
Slide Show ¶
Steps & Accordion ¶
Print out the application
Gather documents and scan them into a final .pdf document
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 ¶
Checkerboard & Timeline ¶
-
1995Tables
The birth of browsers that could display images was the first step into web design as we know it.
-
1998CSS
Around the same time as Flash, a better approach to structuring design from a technical standpoint was born – Cascading Style Sheets (CSS).
-
2007Mobile 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 ¶
A chart you maintain in Drupal by editing the page
Interactive Table ¶
| 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 |