Warning: include(1.x/nav-section.php): failed to open stream: No such file or directory in /ip/iucommsg/wwws/_php/nav-section.php on line 2

Warning: include(): Failed opening '1.x/nav-section.php' for inclusion (include_path='.:/ip/iucommsg/wwws:/ip/pagriet/lib:/ip/iucommsg/wwws/_includes:/ip/iucommsg/wwws/_shared-sections:/ip/iucommsg/wwws/_php') in /ip/iucommsg/wwws/_php/nav-section.php on line 2

Background Colors & Images

Highlight sections with color and images

You can use background colors and images to draw attention to sections.

We design sites using two primary background colors—crimson and light gray—and one secondary background color. You can browse our color palette to find an appropriate secondary background color for your site.

We also apply background images to sections, where it's appropriate.

Background colors

You can set a section's background color by using "bg-crimson" or "bg-gray." You should always add an additional class of "dark" when using a dark background color.

Show/hide markup
<section class="section bg-crimson bg-dark">
    <div class="row">
        <div class="layout">
            <!-- Content goes here -->
        </div>
    </div>
</section>

Secondary colors

The most effective way to apply a secondary color to a site is to add a color class to the body tag and use "bg-secondary" on individual sections.

Don't forget to add the "dark" class when necessary.

Show/hide markup
<body class="mahogany">
    <!-- Additional markup -->
    <section class="section bg-secondary dark">
        <div class="row">
            <div class="layout">
                <!-- Content goes here -->
            </div>
        </div>
    </section>
</body>