Shadows

This funky feature is a visual effect which looks, unsurprisingly, like a shadow.


How we design them

  • We like our light sources in the top left, meaning shadow drops to the bottom right of an object
  • Shadows should only be solid, so no blur, spread or opacity
  • Try to only use black or white
  • Shadows are available in tiny or fine spacer value sizes. Use your own brain to pick the size of the shadow. Hint: pick a shadow size relative to the size of the element

How they look

To add a shadow to an element use the box-shadow($spacer, $colour) mixin, where: * $spacer is the size of the shadow to use. It defaults to tiny * $colour is the English name from the colour palette. It defaults to black

Alternatively, use one of the following available utility classes: * .gg-u-box-shadow * .gg-u-box-shadow-fine * .gg-u-box-shadow-white * .gg-u-box-shadow-fine-white

1. Add the default shadow using a utility class

View demo Open in new window
320 x 568
View code
<div class="gg-u-box-shadow">This element has the default shadow</div>

2. Add the default shadow using the shadow mixin

  .element-class {
    @include box-shadow;
  }

3. Add a fine black shadow using a utility class

View demo Open in new window
320 x 568
View code
<div class="gg-u-box-shadow-fine">This element has the fine shadow</div>

4. Add a fine black shadow using the shadow mixin

  .element-class {
    @include box-shadow(fine);
  }

5. Add a white shadow using a utility class

View demo Open in new window
320 x 568
View code
<div class="gg-u-box-shadow-white">This element has the white shadow in the default size</div>

6. Add a white shadow using the shadow mixin

Note: When you need to use white, you have to supply both the size and the colour to the mixin

  .element-class {
    @include box-shadow(tiny, white);
  }

7. Add a fine white shadow using a utility class

View demo Open in new window
320 x 568
View code
<div class="gg-u-box-shadow-fine-white">This element has a fine white shadow</div>

8. Add a fine white shadow using the shadow mixin

  .element-class {
    @include box-shadow(fine, white);
  }