Texture

How the surface quality of our backgrounds look.

How we design it

• Texture can be used with background colours.

How it looks

To change to a different texture, include the getTexture mixin and define the texture you require, or use a utility class.

1. Add a gritty background texture

<div class="gg-u-texture-gritty gg-t-light-blue">
  <section class="gg-o-page-section">
    <p class="gg-u-text-speak-up">Gritty background texture</p>
  </section>
</div>

  .el {
    @include getTexture(gritty);
  }

2. Add a softer background texture

<div class="gg-u-texture-softer gg-t-light-blue">
  <section class="gg-o-page-section">
    <p class="gg-u-text-speak-up">Softer background texture</p>
  </section>
</div>

  .el {
    @include getTexture(softer);
  }