City of Tampa Style Guide

Checkerboard 6.2

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

So Amazing - Here is why

First Reason
Second Reason
Do you really need a third?
Well here is a fourth

<section class="checker-board-wrapper bg-primary">
    <div class="checker-board">
        <div class="col">
            <div class="bg-image-cover" style="background-image: url(https://picsum.photos/600/450);"></div>
        </div>
        <div class="col">
            <div class="p-3">
                <h3>Benefits</h3>
                <p>
                    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.
                </p>
            </div>
        </div>
    </div>
    <div class="checker-board ">
        <div class="col">
            <div class="bg-image-cover" style="background-image: url(https://picsum.photos/600/450);"></div>
        </div>
        <div class="col">
            <div class="p-3">
                <h3>Join Us</h3>
                <p>
                    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.
                </p>
                <a href="#" class="btn btn-secondary">Sign Up Today</a>
            </div>
        </div>
    </div>
    <div class="checker-board">
        <div class="col">
            <div class="bg-image-cover" style="background-image: url(https://picsum.photos/600/450);"></div>
        </div>
        <div class="col">
            <div class="p-3">
                <h3>So Amazing - Here is why</h3>
                <ul>
                    <li>First Reason</li>
                    <li>Second Reason</li>
                    <li>Do you really need a third?</li>
                    <li>Well here is a fourth</li>
                </ul>
            </div>
        </div>
    </div>
</section>

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