Focus panel

Focus. NOUN. A centre of interest or activity


How we use them

  • Use to draw attention to a certain task
  • Always use with a coloured background
  • They shrink to fit the content
  • Have a maximum width of 512px on small screens
  • Have a maximum width of 752px on medium and large screens

How they look

1. Light blue background

View demo Open in new window
320 x 568
View code
<section class="gg-o-focus-panel gg-o-focus-panel--light-blue">
  <div class="gg-o-focus-panel__container">
    <p class="gg-u-text-megaphone">Look at me</p>
  </div>
</section>

2. Light pink background

View demo Open in new window
320 x 568
View code
<section class="gg-o-focus-panel gg-o-focus-panel--light-pink">
  <div class="gg-o-focus-panel__container">
    <p class="gg-u-text-megaphone">Look at me</p>
  </div>
</section>

3. Black background

View demo Open in new window
320 x 568
View code
<section class="gg-o-focus-panel gg-o-focus-panel--black">
  <div class="gg-o-focus-panel__container">
    <p class="gg-u-text-megaphone">Look at me</p>
  </div>
</section>

4. Hero

When it’s the first element on a page the nav bar will nudge the background below the fold of the page. Adding the gg-o-focus-panel--hero class makes the background 100% the height of the viewport minus the height of the nav.

View demo Open in new window
320 x 568
View code
<section class="gg-o-focus-panel gg-o-focus-panel--hero gg-o-focus-panel--light-blue">
  <div class="gg-o-focus-panel__container">
    <p class="gg-u-text-megaphone">Look at me</p>
  </div>
</section>