Borders

The bits that go around stuff, rather than the lines between countries.

• How we design them
• How to use them

How we design them

• The borders should never have gaps (i.e. don’t use dots and dashes)
• Borders must be 2px wide
• Try to only use black borders

How to use them

1. Add a border using a utility class

    <div class="gg-u-border">
  <br />
  <p>Look there's a border around me</p>
  <br />
</div>

  

2. Add a border using a border mixin

  .el {
    @include border;
  }

3. Add a custom border colour

Simply pass in a value from the colour palette

  .el {
    @include border(light-blue);
  }