Landing Page

full screen new window example HTML markup
Usage

The landing page structure is used with information boxes that contain paragraph copy, these tiles should not be smaller than 3 columns wide. The below page structure is built without any additional styling.
The following page structure uses the following Framework components:
Navigation bar Breadcrumb Hero Information Box Footer Accordion
Desktop

On desktop a 4-column grid is used for the top information boxes, equally displaying 3 boxes with paragraph copy.
Additional information boxes are displayed in a 3-column grid, equally displaying 4 boxes with paragraph copy.
Tablet

For tablets The first row remains in a 4-column grid formation.
The second row changes to 2 rows of 6-column grids.
Mobile

All content changes into a 12 column grid with the desktops 1 row first, followed by the second row underneath.
Page heading

Subtitle

Website H2 26px

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.
CTA Anchor Link >
Website H2 26px

CTA Anchor Link >
Website H2 26px

CTA Anchor Link >
Other fund ranges

Website H4 20px

Markup: boilerplates\landing-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 Search">
            <svg class="slb-navbar__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 211.166 46.75"><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">Landing 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 py-4">
        <div class="col-12 col-md-4  d-flex flex-column justify-content-between py-3">
            <!-- Information Box -->
            <div class="slb-infobox slb-infobox--white">
                <div class="slb-infobox__content">
                    <h2>
                        Website H2 26px
                    </h2>
                    <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>
                    <p><a href="#" class="slb-cta">CTA Anchor Link&#160; <!-- &nbsp; -->></a></p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4  d-flex flex-column justify-content-between  py-3">
            <!-- Information Box -->
            <div class="slb-infobox slb-infobox--white">
                <div class="slb-infobox__content">
                    <h2>
                        Website H2 26px
                    </h2>
                    <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>
                    <p><a href="#" class="slb-cta">CTA Anchor Link&#160; <!-- &nbsp; -->></a></p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4  d-flex flex-column justify-content-between  py-3">
            <!-- Information Box -->
            <div class="slb-infobox slb-infobox--white">
                <div class="slb-infobox__content">
                    <h2>
                        Website H2 26px
                    </h2>
                    <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>
                    <p><a href="#" class="slb-cta">CTA Anchor Link&#160; <!-- &nbsp; -->></a></p>
                </div>
            </div>
        </div>
    </div>
    <!-- Highlighted Heading -->
    <div class="mx-md-5 px-md-5">
        <div class="slb-highlighted mx-md-5 px-md-5">
            <h2>Other fund ranges</h2>
        </div>
    </div>
    <div class="row pb-md-5 mb-md-5">
        <div class="col-12 col-md-6 col-lg-3 d-flex flex-column justify-content-between py-3">
            <!-- Information Box -->
            <div class="slb-infobox slb-infobox--white">
                <div class="slb-infobox__content">
                    <h4>
                        Website H4 20px
                    </h4>
                    <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 class="col-12 col-md-6 col-lg-3 d-flex flex-column justify-content-between py-3">
            <!-- Information Box -->
            <div class="slb-infobox slb-infobox--white">
                <div class="slb-infobox__content">
                    <h4>
                        Website H4 20px
                    </h4>
                    <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 class="col-12 col-md-6 col-lg-3 d-flex flex-column justify-content-between py-3">
            <!-- Information Box -->
            <div class="slb-infobox slb-infobox--white">
                <div class="slb-infobox__content">
                    <h4>
                        Website H4 20px
                    </h4>
                    <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 class="col-12 col-md-6 col-lg-3 d-flex flex-column justify-content-between  py-3">
            <!-- Information Box -->
            <div class="slb-infobox slb-infobox--white">
                <div class="slb-infobox__content">
                    <h4>
                        Website H4 20px
                    </h4>
                    <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>
</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="LinkedIn">
                            <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-landing-footer-accordion-toggle"
                            data-toggle="collapse" data-target="#slb-landing-footer-accordion-panel"
                            aria-expanded="true" aria-controls="landing-footer-accordion-panel">
                            <svg class="slb-accordion__toggle-icon" viewBox="0 0 512 512" id="chevron-circle-down-example">
                                <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-landing-footer-accordion-panel"
                            aria-labelledby="slb-landing-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/landing-page-structure.scss