Long-form sections

The long-form section pattern shows the background options that can be used within a long-form story. Different backgrounds help to separate out the different sections of the story.

Rules for long-form sections

Must only be used within the main content of a long-form page.
Must alternate sections so that same background isn't adjacent to itself.

Dark text on white background (default)

Example

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet

Code

<!-- Begin pattern: long-form sections //-->
<section class="long-form " >
    <div class="container">
        <div class="row">
            <div class="long-form__wrapper">
                <div class="long-form__content">
                    <h2>Lorem ipsum dolor</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <a href="#">Lorem ipsum dolor sit amet</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: long-form sections //-->

Dark text on light grey background

Add the class long-form--bg-light-grey. This cannot be used for the section before the long-form credits section.

Example

Lorem ipsum dolor

Lorem ipsum dolor sit amet

Code

<!-- Begin pattern: long-form sections //-->
<section class="long-form long-form--bg-light-grey" >
    <div class="container">
        <div class="row">
            <div class="long-form__wrapper">
                <div class="long-form__content">
                    <h2>Lorem ipsum dolor</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <a href="#">Lorem ipsum dolor sit amet</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: long-form sections //-->

Dark text on light image background

Add the class long-form--bg-lighten.

Example

Lorem ipsum dolor

Lorem ipsum dolor sit amet

Code

<!-- Begin pattern: long-form sections //-->
<section class="long-form long-form--bg-lighten" style="background-image: url(../../assets/docs/images/long-form-content/bg-spark.jpg);">
    <div class="container">
        <div class="row">
            <div class="long-form__wrapper">
                <div class="long-form__content">
                    <h2>Lorem ipsum dolor</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <a href="#">Lorem ipsum dolor sit amet</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: long-form sections //-->

White text on dark image background

Add the classes long-form--inverse long-form--bg-darken. This must be used for the long-form intro section.

Example

Lorem ipsum dolor

Lorem ipsum dolor sit amet

Code

<!-- Begin pattern: long-form sections //-->
<section class="long-form long-form--inverse long-form--bg-darken" style="background-image: url(../../assets/docs/images/long-form-content/bg-spark.jpg);">
    <div class="container">
        <div class="row">
            <div class="long-form__wrapper">
                <div class="long-form__content">
                    <h2>Lorem ipsum dolor</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <a href="#">Lorem ipsum dolor sit amet</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: long-form sections //-->