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 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.
Keep in mind that
btn-apply is a block, so it'll take up an entire column. I've used 2
col-sm-6's here to demonstrate
<div class="btn-apply"> <a href="#">Apply for foo now!</a> </div>