City of Tampa Style Guide

Header 5.2

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

The website Header template

When to use: Some guidence on when to use.

When not to: Some guidence on when it is not the best choice.

Notes: Any futher info that is useful.

<insert-markup>global.header-</insert-markup>

Example Markup

<h1>Example Markup</h1>
Source: src/scss/base/_header.scss, line 31

Hero 5.3

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

The page Hero is typically a background photo area at the top of the page. You can add a .hero-bk-none to .hero-bk to disable a pages image.

When to use: Connect all pages with a hierarchical menu.

When not to: When you wan to link to files or external sites, consider in-page buttons.

Notes:

<insert-markup>global.hero-</insert-markup>
<div class="hero-bk bg-dark">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Construction Services</a></li>
            <li class="breadcrumb-item"><a href="#">Commercial</a></li>
            <li class="breadcrumb-item active" aria-current="page">Permits and Forms</li>
        </ol>
    </nav>
    <div class="spacer"></div>
    <div class="hero-photo-credit">
        <a class="btn btn-link badge" href="#hero-credit" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseExample">
            <i class="fas fa-camera"></i> Photo Credit
            <div id="hero-credit" class="credit collapse">Unsplash.com</div>
        </a>
    </div>
    <div class="fade-1"></div>
    <div class="fade-2"></div>
</div>
Source: src/scss/base/_page.scss, line 136