Page section

These are used to divide up the page

How we design them

• Page sections provide the scaffolding for the main website layout by providing a container to horizontally centre content and vertical spacing
• Sibling page sections will have their top padding removed to help establish a vertical rhythm
• Background colours can be applied by wrapping the .gg-o-page-section in a theme. Top padding will be restored as the vertical rhythm has been interrupted

How they look

1. Page sections, page sections everywhere

The gg-o-page-section class will be mainly be used on <section> elements but can be used on any block-level element.

    <section class="gg-o-page-section">
  <p>Hi, I'm a page section. I have top and bottom padding.</p>
</section>
<section class="gg-o-page-section">
  <p>I am a sibling section. I have no top padding.</p>
</section>
<div class="gg-t-light-blue">
  <section class="gg-o-page-section">
    <p>This one is blue</p>
  </section>
  <section class="gg-o-page-section">
    <p>This is a blue sibling</p>
  </section>
</div>
<article class="gg-o-page-section">
  <p>I'm on an article</p>
</article>

  

2. Page sections without any padding

Use this mixin when you need to horizontally fit something into the page, but need custom top and bottom padding.

.class {
  @include full-width-container();
}

3. Page sections without any bottom padding

    <section class="gg-o-page-section gg-o-page-section--no-bottom">Hi, I'm a page section with no bottom... padding</section>
<section class="gg-o-page-section">I am just here to show that there is nothing between me and the section above</section>