Separators

Use these to split content, but only sometimes

How we design them

• Use sparingly as we prefer to separate content with blocks of colour

How they look

1. Using a utility class

Add a gg-u-hr class to a hr element;

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p>
<hr class="gg-u-hr">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  

2. Using the mixin

Use this when you only need a visual separator for decoration

  .class {
    &:before {
      content: "";
      @include separator();
    }
  }