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.

Add a gritty background texture

View demo

320 x 568

View code

    <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);
  }

Add a softer background texture

View demo

320 x 568

View code

    <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);
  }