Fork me on Github

Below you will find the banners used by code.gov

Normal Banner

<div class="banner">
  <div class="banner-content">
    <div class="banner-title">Browse Projects</div>
  </div>
</div>

Banner with Subtitle

<div class="banner">
  <div class="banner-content">
    <div class="banner-title">Help Wanted</div>
    <div class="banner-subtitle">Discover how you can get involved and make America's Code better</div>
  </div>
</div>

Large Banner

<div class="banner large">
  <div class="banner-content">
    <div class="banner-title">SHARING AMERICA'S CODE</div>
    <div class="banner-subtitle">Unlock the tremendous potential of the Federal Government’s software.</div>
  </div>
</div>

Banner with Subsections

<div class="banner large">
  <div class="banner-content">
    <div class="banner-title">SHARING AMERICA'S CODE</div>
    <div class="banner-subtitle">Unlock the tremendous potential of the Federal Government’s software.</div>
    <div class="banner-subsection">
      <div class="banner-subsection-title">Help Wanted!</div>
      <div class="banner-subsection-subtitle">Discover how you can get involved and make America's code better</div>
    </div>
  </div>
</div>

Web Component Banner

If you want to use the banner web component, you can do the following

<Simple-Banner image="../assets/img/red.png" title="Browse Projects" />