Standard Life Digital Framework

Search results Page

full screen new window example HTML markup
Usage

The search page structure should be used on all Standard Life websites that require search functionality. 10 results should be shown initially, selecting 'Show more results' should continue to reveal another 10 results until all results are shown.
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 the search input extends the container of the page.
The search results body copy contained within a 10-column grid with an underline within a 12-column grid.
The search button extends the full container of the page.
Tablet

For tablet the content remains the same as the desktop.
Mobile

All content changes into a 12 column grid in the same order as the desktop.
H3 Title link

Lorem ipsum dolor sit amet, consectetur adipiscing 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.
H3 Title link

Markup: boilerplates\search-results-page.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>
<!-- Hero component -->
<div class="slb-hero slb-hero--bg-primary">
    <div class="slb-hero__container">
        <div class="slb-hero__content py-0">
            <form>
                <div class="slb-form__group d-flex">
                    <input type="text" class="slb-form__control-block" id="searchInputExamplePage" placeholder="Search Example" />
                    <label class="slb-form__label sr-only" for="searchInputExamplePage">Input Label</label>
                    <button type="submit" class="slb-button slb-button--ghost"><span class="fa fa-search"></span><span class="sr-only">Search Submit</span></button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="container">
    <div class="row py-3">
        <!-- Search result -->
        <div class="col-12 col-md-10 py-3">
            <div>
                <h3><a href="#">H3 Title link</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
            </div>
        </div>
        <div class="col-12">
            <div class="slb-footer-row-divider"></div>
        </div>
        <!-- Search result -->
        <div class="col-12 col-md-10 py-3">
            <div>
                <h3><a href="#">H3 Title link</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
            </div>
        </div>
        <div class="col-12">
            <div class="slb-footer-row-divider"></div>
        </div>
        <!-- Search result -->
        <div class="col-12 col-md-10 py-3">
            <div>
                <h3><a href="#">H3 Title link</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
            </div>
        </div>
        <div class="col-12">
            <div class="slb-footer-row-divider"></div>
        </div>
        <!-- Search result -->
        <div class="col-12 col-md-10 py-3">
            <div>
                <h3><a href="#">H3 Title link</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
            </div>
        </div>
        <div class="col-12">
            <div class="slb-footer-row-divider"></div>
        </div>
        <!-- Search result -->
        <div class="col-12 col-md-10 py-3">
            <div>
                <h3><a href="#">H3 Title link</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
            </div>
        </div>
        <div class="col-12">
            <div class="slb-footer-row-divider"></div>
        </div>
        <!-- Search result -->
        <div class="col-12 col-md-10 py-3">
            <div>
                <h3><a href="#">H3 Title link</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
            </div>
        </div>
        <div class="col-12">
            <div class="slb-footer-row-divider"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <button class="slb-button w-100" href="#">Show more results</button>
        </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-search-footer-accordion-toggle"
                            data-toggle="collapse" data-target="#slb-search-footer-accordion-panel"
                            aria-expanded="true" aria-controls="search-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-search-footer-accordion-panel"
                            aria-labelledby="slb-search-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/search-results-page.scss