CSS

Govstrap is basically Bootstrap with small enhancements to make it look GOV.UK themed. Below we'll go through some CSS that helps us with that.

Hero Banner

Hero banners work best just under the main navigation, where you can put the first bit of information a user will see. Generally you'll only have one hero banner per site, but that doesn't mean you're limited to it.

You'll want to add the hero-banner class to your surrounding container-fluid so it spans the entire screen, just like our landing page.

<section class="container-fluid hero-banner">
  <div class="content">
    <div class="row">
      <div class="col-sm-12">
        <h1>Welcome to Example site!</h1>
        <p>Add some text here to grab your audiences attention. It is a
        HERO banner afterall!</p>
      </div>
    </div>           
  </div>
</section>

Promo Banner Top

Promo banners are bright yellow, and will really draw the attention of people browsing your website. They should span the entire screen, just like hero banners.

<section class="container-fluid promo-banner">
  <div class="content">
    <div class="row">
      <div class="col-sm-12">
        <strong>Use the strong tag for the top text. This should be related 
        and lead up to the text below it</strong>
        <p>This totally got my attention</p>
      </div>
    </div>
  </div>
</section>

General Banners Top

Normal banners (.banner) are light blue and can be used anywhere. Like other banners, they should use the full length of the page

<section class="container-fluid banner">
  <div class="content">
    <div class="row">
      <div class="col-sm-12">
        <strong>Strong tags work the same as the promo banners</strong>
        <p>Some nice text here. Whatever you want really.</p>
      </div>
    </div>
  </div>
</section>

Apply Button Top

Sometimes you'll want a big button for important processes, like applying for something. The .btn-apply is useful here.

<div class="btn-apply">
  <a href="#">Apply for foo now!</a>
</div>