Content Page

full screen new window example HTML markup
Usage

The content page structure is used when large amounts of copy is displayed on the page. The below page structure is built without any additional styling.
The following page structure uses the following Framework components:
Navigation bar Breadcrumb Hero Font icons Side Navigation Information Box Important Information Box Footer Accordion
Desktop

On desktop a 7 column structure should be used. Other content can expand beyond the 7 columns if required such as tables, graphs, etc.
If content is required on the Right hand side then it should use a 4 column grid structure with a single column gap in between.
Tablet

For tablet the content remains the same as the desktop in a 7 - 1 - 4 grid formation, each column will now be significantly thinner.
Mobile

All content changes into a 12 column grid with the desktops 7 column first, following by the 4 column stacked underneath each other.
Page heading

Subtitle

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas velit quas sed impedit tempore, excepturi quod laboriosam suscipit mollitia deleniti dolorem alias ipsum voluptatem tenetur doloremque accusamus incidunt eius minus?
Heading 2 (H2) with an underline

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora libero magni, adipisci impedit quis magnam sunt voluptate dicta corporis. Aut at esse quis sit dolorem fugiat nostrum quidem nihil eos. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea voluptatem maxime fugiat! Recusandae necessitatibus illum neque reprehenderit autem nemo, ducimus assumenda, sint optio obcaecati dolorem nihil laborum laudantium, temporibus ea?
Body copy Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae fugit ad iusto voluptatem laborum. Enim consequuntur maxime autem cum perspiciatis minima, dolores aperiam ex deserunt excepturi tempora corrupti vel eveniet!
Body copy Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae fugit ad iusto voluptatem laborum. Enim consequuntur maxime autem cum perspiciatis minima, dolores aperiam ex deserunt excepturi tempora corrupti vel eveniet!
Body copy Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae fugit ad iusto voluptatem laborum. Enim consequuntur maxime autem cum perspiciatis minima, dolores aperiam ex deserunt excepturi tempora corrupti vel eveniet!
Body copy Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae fugit ad iusto voluptatem laborum. Enim consequuntur maxime autem cum perspiciatis minima, dolores aperiam ex deserunt excepturi tempora corrupti vel eveniet!
Website H3 22px

Subtext Copy style for all of that information lorum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua lorum ipsum dolor sit amet, consectetur adipiscing.
Button CTA
Important information

Markup: boilerplates\content-page-structure.hbs
Copy
<!-- Header component -->
<header id="site-header" class="slb-header" aria-label="Site Header">
    <nav id="navigation" class="slb-navbar" aria-label="Main Navigation">
        <button class="slb-navbar__toggle collapsed" aria-expanded="false" aria-haspopup="true" aria-controls="slb-navbar-collapse" aria-label="Toggle navigation" data-toggle="collapse" data-target="#slb-navbar-collapse">
            <div class="slb-navbar__toggle-icon">
                <span class="slb-navbar__toggle-icon-bar"></span>
                <span class="slb-navbar__toggle-icon-bar"></span>
                <span class="slb-navbar__toggle-icon-bar"></span>
                <span class="slb-navbar__toggle-icon-bar"></span>
            </div>
        </button>
        <a class="slb-navbar__brand" href="#" aria-label="Standard Life Home">
            <svg class="slb-navbar__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 211.166 46.75" aria-label="Standard Life Home"><path fill="#0A2F73" d="M.357 27.99c0-4.782 2.612-6.817 8.65-6.817 2.068 0 4.58.374 6.173.78-.034.814 0 4.48 0 4.48-1.73-.374-4.172-.647-6.004-.714-1.526-.035-2.476.065-2.985.642-.37.373-.405.812-.405 1.29.068 1.017.78 1.354 2.103 2.136 1.153.678 4.104 2.204 5.495 3.153 2.612 1.765 3.12 3.563 3.12 6.038 0 4.886-2.916 7.123-8.717 7.293-2.646.068-5.19-.337-7.123-.915v-4.272c1.594.237 3.494.476 5.394.61 2.238.102 3.154.033 4.002-.477.576-.373.915-1.22.78-2.068-.17-.813-.51-1.256-1.765-2.068a92.4 92.4 0 0 0-4.138-2.51c-3.63-2.07-4.58-3.46-4.58-6.58zm25.03-4.68v4.444h3.696v3.527h-3.697v9.363c0 .646-.034 1.153.136 1.392.17.237.238.34.712.407.61.034 2.103.034 3.053-.067v3.494c-1.018.27-2.713.405-3.8.372-3.56 0-5.19-1.22-5.19-4.816V31.28h-2.61v-3.526h2.61v-3.562l5.09-.88zm15.53 11.635V33.86c0-.95-.236-1.493-.745-1.866-.577-.407-1.594-.44-2.748-.407-1.56.034-3.596.237-4.783.373v-3.663c1.766-.51 4.41-.814 6.243-.78 4.206.033 7.157 1.798 7.157 6.343v12.145h-4.987V44.92c-1.187.95-2.544 1.322-4.308 1.322-3.596 0-5.36-2.408-5.36-5.394v-.646c.103-4.036 2.68-5.29 7.972-5.29l1.56.033zm0 6.82v-3.9c-1.73-.104-3.02.032-3.662.372-.577.305-.95.78-.95 1.967v.238c.034 1.287.916 1.933 2.272 1.898 1.087-.033 1.73-.306 2.34-.576zM54.79 27.788v1.356c1.525-1.053 2.916-1.63 5.053-1.63 4.104 0 5.63 2.884 5.63 5.972v12.517h-5.12V34.707c0-1.12-.035-1.898-.442-2.374-.54-.61-1.083-.746-2.135-.646-.95.068-2.103.543-2.815.916V46h-5.123V27.79h4.952zm29.776 18.215H79.58v-1.086c-1.187.916-2.375 1.323-4.24 1.323-4.14 0-6.547-2.307-6.547-7.463v-2.61c.034-3.73.95-5.53 2.442-6.955 1.22-1.12 3.053-1.694 5.292-1.73.984 0 2.272.138 2.917.272v-6.072h5.122v24.32zm-5.088-14.45c-.68-.136-2.103-.34-3.053-.136-2 .44-2.544 1.832-2.544 4.952v1.254c.036 2.44.24 3.223.95 3.97.51.54 1.223.745 2.173.745s1.797-.205 2.442-.61l.034-10.178zm17.668 3.392V33.86c0-.95-.237-1.493-.746-1.866-.577-.407-1.594-.44-2.748-.407-1.56.034-3.596.237-4.783.373v-3.663c1.762-.51 4.41-.814 6.24-.78 4.205.033 7.156 1.798 7.156 6.343v12.145H97.28V44.92c-1.187.95-2.543 1.322-4.307 1.322-3.596 0-5.36-2.408-5.36-5.394v-.646c.103-4.036 2.68-5.29 7.972-5.29l1.56.033zm0 6.82v-3.9c-1.73-.104-3.02.032-3.663.372-.577.305-.95.78-.95 1.967v.238c.034 1.287.916 1.933 2.272 1.898 1.086-.033 1.73-.306 2.34-.576zm13.938-14.01v1.322c1.153-1.052 3.188-1.765 5.325-1.527v4.173c-2.14-.136-4.106.407-5.227 1.086V46h-5.122V27.75h5.023zm22.894 18.248h-4.985v-1.086c-1.188.916-2.375 1.323-4.24 1.323-4.14 0-6.547-2.307-6.547-7.463v-2.61c.034-3.73.948-5.53 2.442-6.955 1.222-1.12 3.053-1.694 5.29-1.73.984 0 2.272.138 2.917.272v-6.072h5.123v24.32zm-5.088-14.45c-.68-.136-2.104-.34-3.053-.136-2.002.44-2.545 1.832-2.545 4.952v1.254c.034 2.44.238 3.223.95 3.97.51.54 1.22.745 2.17.745s1.798-.205 2.442-.61l.036-10.178zm17.97 9.937V21.514h5.324V40.88c0 .272.034.374.137.476.138.137.34.17.613.205h7.868v4.31c-2.476.373-7.26.44-9.7.17-1.255-.103-2.374-.407-3.12-1.12s-1.12-1.562-1.12-3.43zm22.078-15.636h-5.12v-4.172h5.12v4.172zm0 20.15h-5.12v-18.25h5.12v18.25zm10.277-19.572v1.322h4.07v3.562h-4.07v14.688h-5.122V31.316h-2.814v-3.562h2.812v-1.086c0-4.51 2.035-5.63 5.53-5.63 1.288 0 2.916.203 3.696.373v3.46c-1.697-.102-3.427-.17-3.835.238-.304.273-.27.68-.27 1.325zm19.535 3.73c1.425 1.898 1.696 3.357 1.696 7.19 0 .237 0 .78-.034 1.053h-10.888c.066 1.967.848 3.392 3.356 3.663 2.138.236 5.056-.34 6.92-.78v3.765c-2.034.78-4.308 1.188-7.056 1.188-5.02 0-8.208-2.542-8.208-8.716v-1.56c.032-5.94 3.595-8.48 8.208-8.48 2.886 0 4.955 1.253 6.006 2.68zm-3.053 4.952c-.034-2.646-1.29-3.765-3.087-3.765-1.73 0-3.053 1.082-3.086 3.763h6.173z"></path><path fill="#fb0" d="M193.25 14l5.5 10L211 0z" ></path></svg>
        </a>
        <div id="slb-navbar-collapse" class="slb-navbar__collapse collapse ml-auto">
            <ul id="slb-navbar-nav" class="slb-navbar__nav">
                <li class="slb-navbar__nav-item">
                    <a class="slb-navbar__dropdown-button collapsed" href="#" role="button" aria-haspopup="true" aria-expanded="false" data-toggle="collapse" data-target="#nav-dropdown-1">
                        Retirement
                        <svg viewBox="0 0 448 512" class="slb-navbar__dropdown-button-icon"><path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" /></svg>
                    </a>
                    <div id="nav-dropdown-1" class="slb-navbar__dropdown collapse" data-parent="#slb-navbar-nav">
                        <div class="slb-navbar__dropdown-section">
                            <a class="slb-navbar__dropdown-link" href="#">Get started with retirement ></a>
                            <a class="slb-navbar__dropdown-link" href="#">Fixed income</a>
                            <a class="slb-navbar__dropdown-link" href="#">Flexible income</a>
                            <a class="slb-navbar__dropdown-link" href="#">Leave it to grow</a>
                            <a class="slb-navbar__dropdown-link" href="#">Take cash</a>
                            <a class="slb-navbar__dropdown-link slb-navbar__dropdown-link--promo" href="#"><svg class="slb-navbar__promo-icon" viewBox="0 0 448 512"><path d="M0 464V48C0 21.49 21.49 0 48 0h352c26.51 0 48 21.49 48 48v416c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48zm384-284V76c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v104c0 6.627 5.373 12 12 12h296c6.627 0 12-5.373 12-12zM128 308v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm256 128V268c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-256 0v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm128-128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm0 128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z" /></svg>Explore your options</a>
                        </div>
                        <div class="slb-navbar__dropdown-section">
                            <a class="slb-navbar__dropdown-link" href="#">Retirement products ></a>
                            <a class="slb-navbar__dropdown-link" href="#">Easy drawdown</a>
                            <a class="slb-navbar__dropdown-link" href="#">DIY drawdown</a>
                            <a class="slb-navbar__dropdown-link" href="#">Annuity</a>
                            <a class="slb-navbar__dropdown-link" href="#">Equity release</a>
                            <a class="slb-navbar__dropdown-link slb-navbar__dropdown-link--promo" href="#"><svg class="slb-navbar__promo-icon" viewBox="0 0 448 512"><path d="M0 464V48C0 21.49 21.49 0 48 0h352c26.51 0 48 21.49 48 48v416c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48zm384-284V76c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v104c0 6.627 5.373 12 12 12h296c6.627 0 12-5.373 12-12zM128 308v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm256 128V268c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-256 0v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm128-128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm0 128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z" /></svg>Get your report</a>
                        </div>
                    </div>
                </li>
                <li class="slb-navbar__nav-item">
                    <a class="slb-navbar__dropdown-button collapsed" href="#" role="button" aria-haspopup="true" aria-expanded="false" data-toggle="collapse" data-target="#nav-dropdown-2">
                        Pensions
                        <svg viewBox="0 0 448 512" class="slb-navbar__dropdown-button-icon"><path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" /></svg>
                    </a>
                    <div id="nav-dropdown-2" class="slb-navbar__dropdown collapse" data-parent="#slb-navbar-nav">
                        <div class="slb-navbar__dropdown-section">
                            <a class="slb-navbar__dropdown-link" href="#">Pension products ></a>
                            <a class="slb-navbar__dropdown-link" href="#">Easy pension</a>
                            <a class="slb-navbar__dropdown-link" href="#">DIY pension</a>
                            <a class="slb-navbar__dropdown-link" href="#">SIPP</a>
                            <a class="slb-navbar__dropdown-link slb-navbar__dropdown-link--promo" href="#"><svg class="slb-navbar__promo-icon" viewBox="0 0 448 512"><path d="M0 464V48C0 21.49 21.49 0 48 0h352c26.51 0 48 21.49 48 48v416c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48zm384-284V76c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v104c0 6.627 5.373 12 12 12h296c6.627 0 12-5.373 12-12zM128 308v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm256 128V268c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-256 0v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm128-128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm0 128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z" /></svg>Pension calculator</a>
                        </div>
                    </div>
                </li>
                <li class="slb-navbar__nav-item">
                    <a class="slb-navbar__nav-link" href="#">
                        ISAs
                    </a>
                </li>
                <li class="slb-navbar__nav-item">
                    <a class="slb-navbar__nav-link" href="#">
                        Investments
                    </a>
                </li>
                <li class="slb-navbar__nav-item slb-navbar__nav-item--light">
                    <span class="sr-only">Search</span>
                    <a class="slb-navbar__nav-link slb-navbar__nav-link--icon-only" href="#" aria-label="Standard Life Search">
                        <svg class="slb-navbar__nav-icon" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" /></svg>
                    </a>
                </li>
                <li class="slb-navbar__nav-item slb-navbar__nav-item--pale">
                    <a class="slb-navbar__nav-link" href="#" target="_self">
                        Register
                    </a>
                </li>
            </ul>
        </div>
        <div class="slb-navbar__nav-item slb-navbar__nav-item--sticky slb-navbar__nav-item--dark">
            <a class="slb-navbar__nav-link" href="#" target="_self">
                Login
                <svg class="slb-navbar__nav-icon slb-navbar__nav-icon--inline slb-navbar__nav-icon--lg-only" viewBox="0 0 512 512"><path d="M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z" /></svg>
            </a>
        </div>
    </nav>
</header>
<!-- Breadcrumb component -->
<nav class="slb-breadcrumb" aria-label="Breadcrumb">
    <div class="slb-breadcrumb__content">
        <ol class="slb-breadcrumb__list">
            <li class="slb-breadcrumb__list-item"><a class="slb-breadcrumb__link" href="#">Home</a></li>
            <li class="slb-breadcrumb__list-item" aria-current="page">Content Page Structure</li>
        </ol>
    </div>
</nav>
<!-- Hero component -->
<div class="slb-hero slb-hero--bg-primary">
    <div class="slb-hero__container">
        <div class="slb-hero__content py-5 mt-2">
            <h1 class="slb-hero__text">Page heading</h1>
            <h2 class="slb-hero__text slb-subtitle">Subtitle</h2>
        </div>
    </div>
</div>
<!-- Grid container -->
<div class="container">
    <div class="row justify-content-between">
        <div class="col-12 col-md-7 pt-4">
            <!-- Content -->
            <div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas velit quas sed impedit tempore, excepturi quod laboriosam suscipit mollitia deleniti dolorem alias ipsum voluptatem tenetur doloremque accusamus incidunt eius minus?</p>
                <h2 class="slb-underlined slb-underlined--full-width mb-4">Heading 2 (H2) with an underline</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora libero magni, adipisci impedit quis magnam sunt voluptate dicta corporis. Aut at esse quis sit dolorem fugiat nostrum quidem nihil eos. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea voluptatem maxime fugiat! Recusandae necessitatibus illum neque reprehenderit autem nemo, ducimus assumenda, sint optio obcaecati dolorem nihil laborum laudantium, temporibus ea?</p>
            </div>
            <!-- Font icons list -->
            <ul class="fa-ul">
                <li class="pb-3 pt-2"><span class="fa-li fa fa-2x slb-colour-ux-green fa-check"></span> Body copy Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae fugit ad iusto voluptatem laborum. Enim consequuntur maxime autem cum perspiciatis minima, dolores aperiam ex deserunt excepturi tempora corrupti vel eveniet!</li>
                <li class="pb-3 pt-2"><span class="fa-li fa fa-2x slb-colour-ux-green fa-check"></span> Body copy Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae fugit ad iusto voluptatem laborum. Enim consequuntur maxime autem cum perspiciatis minima, dolores aperiam ex deserunt excepturi tempora corrupti vel eveniet!</li>
                <li class="pb-3 pt-2"><span class="fa-li fa fa-2x slb-colour-ux-green fa-check"></span> Body copy Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae fugit ad iusto voluptatem laborum. Enim consequuntur maxime autem cum perspiciatis minima, dolores aperiam ex deserunt excepturi tempora corrupti vel eveniet!</li>
                <li class="pb-3 pt-2"><span class="fa-li fa fa-2x slb-colour-ux-green fa-check"></span> Body copy Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae fugit ad iusto voluptatem laborum. Enim consequuntur maxime autem cum perspiciatis minima, dolores aperiam ex deserunt excepturi tempora corrupti vel eveniet!</li>
            </ul>
        </div>
        <div class="col-12 col-md-4 pt-4">
            <!-- Side Navigation component -->
            <div class="slb-sidebar w-100">
                <header class="slb-sidebar__header">
                    <h3 class="slb-sidebar__header-text">
                        Website H3 22px
                    </h3>
                </header>
                <nav class="slb-sidebar__nav">
                    <ul class="slb-sidebar__list">
                        <li class="slb-sidebar__list-item">
                            <a href="#">
                            <svg class="slb-icon slb-icon--alt" viewBox="0 0 384 512" id="file-1"><title>file</title><path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"/></svg>
                            Side bar link
                            </a>
                        </li>
                        <li class="slb-sidebar__list-item">
                            <a href="#">
                            <svg class="slb-icon slb-icon--alt" viewBox="0 0 384 512" id="file-2"><title>file</title><path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"/></svg>
                            Side bar link
                            </a>
                        </li>
                        <li class="slb-sidebar__list-cta"><a class="slb-sidebar__list-cta-link" href="#">Button CTA</a></li>
                    </ul>
                </nav>
            </div>
            <!-- Information box component -->
            <div class="slb-infobox slb-infobox--blue mt-5">
                <div class="slb-infobox__content">
                    <h3>
                        Website H3 22px
                    </h3>
                    <p>
                        Subtext Copy style for all of that information lorum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua lorum ipsum dolor sit amet, consectetur adipiscing.
                    </p>
                    <div class="d-flex justify-content-center">
                        <a class="slb-button slb-button--cta" href="#">Button CTA</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container pt-5 pt-md-2">
    <!-- Important Information box component -->
    <div class="slb-infobox slb-infobox--blue">
        <div class="slb-infobox__content">
            <div class="slb-infobox__important">
                <h5>Important information</h5>
                <p>
                    Subtext Copy style for all of that information lorum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua lorum ipsum dolor sit amet, consectetur adipiscing.
                </p>
            </div>
        </div>
    </div>
</div>
<!-- Footer component -->
<footer class="slb-footer">
    <div class="container">
        <div class="row justify-content-end">
            <div class="col slb-footer-strapline">
                <h2 class="slb-footer-strapline__title">There's a lot to look forward to</h2>
            </div>
        </div>
    </div>
    <div class="slb-footer-thread">
        <svg xmlns="http://www.w3.org/2000/svg" class="slb-footer-thread__image" preserveAspectRatio="none" viewBox="0 0 1440 141">
            <linearGradient id="a-example" x1="12.962%" x2="96.805%" y1="50%" y2="50%">
                <stop offset="0%" stop-color="#FB0" />
                <stop offset="54.756%" stop-color="#FFDF00" />
                <stop offset="87.313%" stop-color="#FFDF00" />
                <stop offset="100%" stop-color="#FB0" />
            </linearGradient>
            <filter id="b-example" width="101.9%" height="127.4%" x="-1%" y="-13.7%" filterUnits="objectBoundingBox">
                <feGaussianBlur in="SourceGraphic" stdDeviation="4.286" />
            </filter>
            <g fill="none" fill-rule="evenodd">
                <path stroke="url(#a-example)" stroke-width="6" d="M-3 51.23C245.17-4.168 493.752-3.74 742.745 52.513c360.2 81.378 575.447 35.154 700.255-29.455" />
                <path stroke="#6E6D6A" stroke-opacity=".3" stroke-width="2" d="M-5 52.403C243.542 6.07 492.496 11.008 741.864 67.213c321.931 72.56 528.038 65.811 657.263 21.73 15.742-5.37 30.343-11.294 43.873-17.695"
                    filter="url(#b-example)" />
            </g>
        </svg>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12 col-sm-4 col-md-3">
                <h3 class="slb-footer__title">Have a question?</h3>
                <ul class="slb-footer-nav slb-footer-nav--inline">
                    <li class="slb-footer-nav__item">
                        <a href="#" class="">FAQs</a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="col-12 col-sm-4 col-md-3">
                <h3 class="slb-footer__title">Connect with us</h3>
                <ul class="slb-footer-nav slb-footer-nav--inline">
                    <li class="slb-footer-nav__item">
                        <a class="slb-footer-nav__social-link" href="#" target="_blank" rel="noopener" aria-label="Facebook">
                            <svg class="slb-footer-nav__social-icon" viewBox="0 0 448 512"><path d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z" /></svg>
                        </a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a class="slb-footer-nav__social-link" href="#" target="_blank" rel="noopener" aria-label="Twitter">
                            <svg class="slb-footer-nav__social-icon" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" /></svg>
                        </a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a class="slb-footer-nav__social-link" href="#" target="_blank" rel="noopener" aria-label="LinedIn">
                            <svg class="slb-footer-nav__social-icon" viewBox="0 0 448 512"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" /></svg>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="slb-footer-row-divider"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-sm-6 col-md-4 col-lg">
                <ul class="slb-footer-nav">
                    <li class="slb-footer-nav__item slb-footer-nav__item--column-title">
                        <h3 class="slb-footer-nav__title"><a href="#" class="slb-footer-nav__title-link">H3 Title +
                                link</a></h3>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">In suspendisse condimentum</a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">Non accumsan bibendum senectus.</a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">Potenti neque</a>
                    </li>
                </ul>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg">
                <ul class="slb-footer-nav">
                    <li class="slb-footer-nav__item slb-footer-nav__item--column-title">
                        <h4 class="slb-footer-nav__title"><a href="#" class="slb-footer-nav__title-link">H4 Title +
                                link</a></h4>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">In suspendisse condimentum</a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">Non accumsan bibendum senectus.</a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">Potenti neque</a>
                    </li>
                </ul>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg">
                <ul class="slb-footer-nav">
                    <li class="slb-footer-nav__item slb-footer-nav__item--column-title">
                        <h3 class="slb-footer-nav__title slb-footer-nav__title--title-link">H3 Title (not a link)</h3>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">In suspendisse condimentum</a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">Non accumsan bibendum senectus.</a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">Potenti neque</a>
                    </li>
                </ul>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg">
                <ul class="slb-footer-nav">
                    <li class="slb-footer-nav__item slb-footer-nav__item--column-title">
                        <h3 class="slb-footer-nav__title slb-footer-nav__title--title-link">Legal information</h3>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">In suspendisse condimentum</a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">Non accumsan bibendum senectus.</a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">Potenti neque</a>
                    </li>
                </ul>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg">
                <ul class="slb-footer-nav">
                    <li class="slb-footer-nav__item slb-footer-nav__item--column-title">
                        <a href="#" class="slb-footer-nav__title slb-footer-nav__title--title-link">Accessibility</a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">In suspendisse condimentum</a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__title slb-footer-nav__title-link">Title link only senectus.</a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">Potenti neque</a>
                    </li>
                </ul>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg">
                <ul class="slb-footer-nav">
                    <li class="slb-footer-nav__item slb-footer-nav__item--column-title">
                        <a href="#" class="slb-footer-nav__title-link">About us</a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">In suspendisse condimentum</a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__link">Non accumsan bibendum senectus.</a>
                    </li>
                    <li class="slb-footer-nav__item">
                        <a href="#" class="slb-footer-nav__title slb-footer-nav__title-link">Title link only</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-12 d-flex flex-wrap">
                <div class="slb-accordion" aria-label="Information Accordion">
                        <button class="slb-accordion__toggle collapsed" id="slb-content-footer-accordion-toggle"
                            data-toggle="collapse" data-target="#slb-content-footer-accordion-panel"
                            aria-expanded="true" aria-controls="content-footer-accordion-panel">
                            <svg class="slb-accordion__toggle-icon" viewBox="0 0 512 512" id="chevron-circle-down-1">
                                <title>chevron-circle-down</title>
                                <path
                                    d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z" />
                            </svg>Website brand and provider details
                        </button>
                        <div class="slb-accordion__panel collapse" id="slb-content-footer-accordion-panel"
                            aria-labelledby="slb-content-footer-accordion-toggle">
                            <p>
                                Standard Life is the brand for Standard Life’s UK direct customer proposition and
                                features
                                products provided by Standard Life Assurance Limited and other subsidiaries of Standard
                                Life Aberdeen plc. See Legal information for our list of product providers. &copy; 2018
                                Standard Life Aberdeen, images reproduced under licence. All rights reserved.
                            </p>
                        </div>
                    </div>
                <p class="slb-footer__copyright">&copy; 2018 Standard Life Aberdeen</p>
            </div>
        </div>
    </div>
</footer>
Source: components/boilerplates/content-page-structure.scss