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