Shadows

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

• Add the default shadow using a utility class
• Add the default shadow using the shadow mixin
• Add a fine black shadow using a utility class
• Add a fine black shadow using the shadow mixin
• Add a white shadow using a utility class
• Add a white shadow using the shadow mixin
• Add a fine white shadow using a utility class
• Add a fine white shadow using the shadow mixin

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

    <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

    <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

    <div class="gg-t-black" style="height:450px;width:300px;padding:10px;">
  <div class="gg-u-box-shadow-white ">This element has the white shadow in the default size</div>
</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

    <div class="gg-t-black" style="height:450px;width:300px;padding:10px;">
  <div class="gg-u-box-shadow-fine-white" >This element has a fine white shadow</div>
</div>

  

8. Add a fine white shadow using the shadow mixin

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