Background patterns

Background patterns can be used for decoration.

These background patterns are used to break the page visually into digestible chucks.

The following sections are possible:

  • Primary standout section (t.b.d.)
  • Secondary standout section
  • Tertiary standout section

Developers note: You can use the predefined element for standout sections. It's also possible to use a SASS pre-defined class for a section with a predefined use-case or when you use the SEMI styleguide SCSS you can use a background pattern simply by importing the predefined mixins.

Hexagon background pattern (secondary section)

The hexagon background pattern is used decoratively.

Example (full width):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla velit ut mi tempor vulputate. Suspendisse laoreet pretium ipsum at dapibus. Phasellus cursus turpis non lacus condimentum elementum. Proin dictum suscipit sem et interdum. Maecenas non pretium nibh, vitae elementum tellus. Integer vel mauris aliquam, finibus nisl vel, volutpat tellus.

HTML code snippet

<section class="section-standout--secondary">
    <div class="container">
        <div class="wrapper">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla velit ut mi tempor vulputate. Suspendisse laoreet pretium ipsum at dapibus. Phasellus cursus turpis non lacus condimentum elementum. Proin dictum suscipit sem et interdum. Maecenas non pretium nibh, vitae elementum tellus. Integer vel mauris aliquam, finibus nisl vel, volutpat tellus. </p>
        </div>
    </div>
</section>

Contrasting background pattern (tertiary section)

Example of the contrasting background pattern.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla velit ut mi tempor vulputate. Suspendisse laoreet pretium ipsum at dapibus. Phasellus cursus turpis non lacus condimentum elementum. Proin dictum suscipit sem et interdum. Maecenas non pretium nibh, vitae elementum tellus. Integer vel mauris aliquam, finibus nisl vel, volutpat tellus.

HTML code snippet

<section class="section-standout--tertiary">
    <div class="container">
        <div class="wrapper">
            <!-- often used with a layout component to give consistent spacing -->
            <div class="layout layout--single">
                <p class="color-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla velit ut mi tempor vulputate. Suspendisse laoreet pretium ipsum at dapibus. Phasellus cursus turpis non lacus condimentum elementum. Proin dictum suscipit sem et interdum. Maecenas non pretium nibh, vitae elementum tellus. Integer vel mauris aliquam, finibus nisl vel, volutpat tellus. </p>
            </div>
        </div>
    </div>
</section>