Executive Banner

The banner is flexible that adapts to the browser or device that is rendering the website, including desktops, smartphones, and tablets.

Note: This banner is provided in the 2013 template package as a design enhancement. Your Agency’s governance decides whether this is required on your web site.

Wide

banner graphic

CSS Sample:

<div class="profile-banner">
    <div class="inner" style="background:url(/images/banner/banner-guy.png) no-repeat right bottom">
        <div class="banner-subtitle">Government Entity Title</div>
        <div class="banner-title">Official Name</div>
        <div class="banner-link"><a href="/">Associated Link</a></div>
    </div>
</div>

Side-by-Side

profile banner example

CSS Sample:

<div class="group">
    <div class="half">
        <div class="profile-banner">
            <div class="inner" style="background:url(/images/banner/banner-guy.png) no-repeat right bottom">
                <div class="banner-subtitle">Government Entity</div>
                <div class="banner-title">Official Name</div>
                <div class="banner-link"><a href="/">Link</a></div>
            </div>
        </div>
    </div>
    <div class="half">
        <div class="profile-banner">
            <div class="inner" style="background:url(/images/banner/banner-gal.png) no-repeat right bottom">
                <div class="banner-subtitle">Government Entity</div>
                <div class="banner-title">Name</div>
                <div class="banner-link"><a href="/">Link</a></div>
            </div>
        </div>
    </div>
</div>