Borders

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


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

View demo Open in new window
320 x 568
View code
<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);
  }