City of Tampa Style Guide

Breakout of Containers 6.1

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

You can break out of the bootstrap container using the breakout-container class

When to use: Add it to a section to make a full width background color

When not to: When you have other columns this will overlay above them..

Notes: Use with caution!

<insert-markup>layout.breakout-</insert-markup>

This content has a max width

I'm breaking the container.

This content has a max width

Source: src/scss/base/_layouts.scss, line 57

Checkerboard 6.2

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

This checkerboard pattern alternates between images and content areas. This is primarily used on marketing/landing pages, its visually appealing but increases cognitive load on the visitor. Add the .swap class to .checker-board-wrapper to have it swap the pattern of how it alternates.

When to use: When the main purpose of the content is to sell something or re-enforce an idea in a visually attractive way.

When not to: If pages main objective is for a user to accomplish a goal then this adds "noise" and may impede that pages objective.

Notes: Best when used with 2-5 row increments. Be sure pictures meaningfully support the text content and aren't just pretty visuals.

<insert-markup>layout.checkerboard-</insert-markup>

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.

Sign Up Today

So Amazing - Here is why

  • First Reason
  • Second Reason
  • Do you really need a third?
  • Well here is a fourth
Source: src/scss/base/_components.scss, line 440

Grid 6.3

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

Bootstrap 4 Grid system where rows wrap columns that behaves like flexbox unless otherwise specified. Use .spacer inside a .d-flex to easily space items.

When to use: When you want layouts and want

When not to: For simple lists, semantic list are best.

Notes: Details at Bootstrap Docs, ALWAYS test on MOBILE

<insert-markup>layout.grid-</insert-markup>
One of three columns
One of three columns
One of three columns
col-md-8
col-md-4
Left
Right
Source: src/scss/base/_layouts.scss, line 1
<insert-markup>layout.padding-</insert-markup>
Padded item
Padded item with Horizontal modifier
Custom column padding
Custom column padding
Source: src/scss/base/_base.scss, line 295