Infobox three column CTA

Three column infobox multiple CTAs layout using bootstrap/digital framework utilities

Example

Scale 1:2

Call us

For information on your investment options

Fees may apply

0345 60 60 191

Call charges will vary

If you have a financial adviser, please speak to them first.

Access your investments online

• Quick
• Easy
• Free

And we'll give you all the information you need every step of the way.

Login to see performance

Find a financial planner

1825 has experienced advisers ready to help you plan for the future you want.

Find out more

Mark-up

<div class="container">
    <div class="row d-flex align-items-end justify-content-center">
        <div class="col-md-3 px-0">
            <div class="slb-infobox slb-infobox--white">
                <div class="slb-infobox__content text-center w-75 ">
                    <h2 class="slb-h3">...</h2>
                    <p class="slb-h5 slb-font-stack-light">...</p>
                    <p class="mb-0">...</p>
                    <p class="slb-h2 my-0">...</p>
                    <p>...</p>
                    <p class="slb-h5 slb-font-stack-light">...</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 px-0">
            <div class="slb-infobox slb-infobox--white">
                <div class="row">
                    <div class="col-12">
                        <div class="slb-infobox__content text-center pb-4">
                            <h2 class="slb-h3 px-0 mx-0">...</h2>
                            <img class="slb-infobox__image w-100" src="../../images/appendix-2f-example.png" alt="Example image"/>
                            <ul class="fa-ul d-flex justify-content-between w-75 mx-auto">
                                <li class=""><span class="fa-li fa fa-check fa-2x slb-colour-ux-green mt-n2"></span>...</li>
                                <li class=""><span class="fa-li fa fa-check fa-2x slb-colour-ux-green mt-n2"></span>...</li>
                                <li class=""><span class="fa-li fa fa-check fa-2x slb-colour-ux-green mt-n2"></span>...</li>
                            </ul>
                            <p>...</p>
                            <button class="slb-button slb-button--primary" href="#" title="" role=button>...</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 px-0">
            <div class="slb-infobox slb-infobox--white">
                <div class="slb-infobox__content text-center w-75 pb-4">
                    <h2>...</h2>
                    <p>...</p>
                    <button class="slb-button slb-button--secondary" href="#" title="" role=button>...</button>
                </div>
            </div>
        </div>
    </div>
</div>

Dependencies

• Information Box
• Bootstrap utilities
• Digital Framework utilities