Long-form asides

Standard HTML5 <aside> elements are enhanced with a set of classes to position them next to content. This approach removes the need for a dedicated sidebar. The <aside> element is often used to wrap <figure> elements, but can equally wrap any related content.

Rules for long-form asides

These are to be only used on long-form pages.

Align

Places the <aside> full width inside of the content column. Use .align-centre, .align-left and .align-right.

Example

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.

Code

<!-- Begin pattern: long-form-asides //-->
<section class="long-form">
    <div class="container">
        <div class="row">
            <div class="long-form__wrapper">
                <div class="long-form__content">
                    <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.</p><aside class='align-centre'><figure class='example'><code>.align-centre</code></figure></aside><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.</p><aside class='align-left'><figure class='example'><code>.align-left</code></figure></aside><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.</p><aside class='align-right'><figure class='example'><code>.align-right</code></figure></aside><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.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: long-form-asides //-->

Extend

Extend the <aside> to the left or right from edge of the page into the content column. Use .extend-left and .extend-right.

Example

Code

<!-- Begin pattern: long-form-asides //-->
<section class="long-form">
    <div class="container">
        <div class="row">
            <div class="long-form__wrapper">
                <div class="long-form__content">
                    <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.</p><aside class='extend-left' style='width: 300px;'><figure class='example'><code>.extend-left</code></figure></aside><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.</p><aside class='extend-right' style='width: 300px;'><figure class='example'><code>.extend-right</code></figure></aside><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.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: long-form-asides //-->

Float

Floats the <aside> to the left or right within the content container with .float-left and .float-right.

Example

Code

<!-- Begin pattern: long-form-asides //-->
<section class="long-form">
    <div class="container">
        <div class="row">
            <div class="long-form__wrapper">
                <div class="long-form__content">
                    <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.</p><aside class='float-left'><figure class='example'><code>.float-left</code></figure></aside><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.</p><aside class='float-right'><figure class='example'><code>.float-right</code></figure></aside><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.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: long-form-asides //-->

Parallel

Places the <aside> in the left or right area directly parallel to the content that it relates to. Use .parallel-left and .parallel-right.

Example

Code

<!-- Begin pattern: long-form-asides //-->
<section class="long-form">
    <div class="container">
        <div class="row">
            <div class="long-form__wrapper">
                <div class="long-form__content">
                    <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.</p><aside class='parallel-left'><figure class='example'><code>.parallel-left</code></figure></aside><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.</p><aside class='parallel-right'><figure class='example'><code>.parallel-right</code></figure><figure><figcaption>Robert Crawford<br><em>Poet and academic</em><br><a href='#' target='_blank' onclick='trackOutboundLink('#')'>Full profile</a></figcaption></figure></aside><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.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: long-form-asides //-->