Executive Banner (Responsive Design)

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

Container Banner Sample 1

CSS Sample:

<div class="container_style_banner">
<div class="container_banner_image">
<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

Container Banner Sample 2

CSS Sample:

<div style="width:100%; overflow-x: hidden;">
<div class="container_style_banner" style="width:160px;float:left;">
<div class="container_banner_image">
<div class="banner_subtitle2">Government Agency</div>
<div class="banner_title">Official Name</div>
<div class="banner_link"><a href="/">Link</a></div>
</div>
</div>

<div class="container_style_banner" style="width:160px;">
<div class="container_banner_image2">
<div class="banner_subtitle2">Government Department</div>
<div class="banner_title">Official Name</div>
<div class="banner_link"><a href="/">Link</a></div>
</div>
</div>
</div>

0 Comments

Submit a Comment