Patterns

Background patterns are single classes that can be added to other components to create a patterned background effect.

cssproperty value screensize
background-image pattern-plus n/a

Usage

One common use case for these is on heroes.

Hero with plus pattern background

HTML
<section class="hero background-color-primary color-primary-invert background-image-pattern-plus">
    <div class="hero-content">
        <h2 class="font-size-h2">Hero with plus pattern background</h2>
    </div>
</section>

Pitfalls

Note that with a Content Security Policy enabled, you will need to specify img-src data: in order for these Atomics to be effectual.