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

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

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

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

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>