Top blue background and borders

Information box with a blue top border and 3 responsive columns of content below.

Example

Flexible income

With a flexible income you can take as much or as little money out of your pension as and when you need it.

Pros

Your money stays invested so it has the potential to grow
You have the flexibility to take out money as and when you need it
You can pass on your pot to your loved ones when you die

Cons

Your remaining pot could fall in value if your investments don't perform as you'd expect. This means your future income could go down or you could run out of money
You’ll need to regularly review your investments
If you’re entitled to any means-tested state benefits, these could be affected if you take money from your pension

Read all about Flexible income

Mark-up

<div class="slb-infobox slb-infobox--white mt-4">
    <div class="container">
        <div class="row">
            <div class="col-12 slb-background-blue py-3">
                <h5 class="slb-colour-white"><svg class=" slb-illustration--alt-accent" width="50" height="50" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><title>Graph investing</title><g transform="translate(-947 -354)" fill="none" fill-rule="evenodd"><g id="Illustration/Graph"><path class="illustration-main" fill="#0A2F73" d="M98.636 41.341c.753 0 1.364.61 1.364 1.364v9.727c0 .175-.036.343-.096.497l-.007.021a1.37 1.37 0 0 1-.742.742l-.021.006a1.355 1.355 0 0 1-.498.098H88.91a1.364 1.364 0 0 1 0-2.728h6.436L75.785 31.51a1.363 1.363 0 1 1 1.929-1.928l19.559 19.56v-6.436c0-.754.61-1.364 1.363-1.364zM69.454 24.613a1.36 1.36 0 0 1-.965-.399l-6.895-6.896H6.228a1.363 1.363 0 1 1 0-2.727h55.931c.361 0 .709.143.964.4l7.296 7.294a1.366 1.366 0 0 1-.965 2.328zM18.386 56.227a1.36 1.36 0 0 1-.965-.4L5.263 43.67a1.363 1.363 0 1 1 1.928-1.928L19.351 53.9a1.366 1.366 0 0 1-.965 2.328zM98.636 100H0V1.364a1.363 1.363 0 1 1 2.727 0v95.909h95.91a1.364 1.364 0 0 1 0 2.727zm1.26-20.295c-.026.06-.059.116-.093.17-.011.022-.02.045-.034.065a1.39 1.39 0 0 1-.168.205l-7.297 7.297a1.36 1.36 0 0 1-1.928 0 1.363 1.363 0 0 1 0-1.929l4.968-4.968H62.16a1.36 1.36 0 0 1-.964-.4l-8.763-8.762-8.763 8.762a1.363 1.363 0 0 1-1.928 0l-17.023-17.02a1.363 1.363 0 1 1 1.928-1.929l16.058 16.057 8.763-8.762a1.364 1.364 0 0 1 1.93 0l9.326 9.327h32.621l-4.968-4.967a1.363 1.363 0 1 1 1.928-1.928l7.297 7.294c.062.064.119.132.168.206.014.02.022.041.034.061.033.057.067.112.092.174.011.026.017.055.026.082.019.057.04.113.052.173a1.325 1.325 0 0 1 0 .538 1.196 1.196 0 0 1-.052.17c-.01.028-.015.058-.026.084z" transform="translate(947 354)"></path><path class="illustration-highlight" fill="#147CB3" d="M99.903.866c-.002-.007-.003-.014-.006-.02a1.364 1.364 0 0 0-.742-.742c-.007-.004-.014-.005-.022-.008A1.35 1.35 0 0 0 98.636 0h-9.727a1.364 1.364 0 1 0 0 2.727h6.435l-33.75 33.75H42.705a1.36 1.36 0 0 0-.964.4L5.263 73.353a1.363 1.363 0 1 0 1.928 1.928L43.27 39.205h18.889c.362 0 .709-.144.964-.4l34.15-34.15v6.436a1.364 1.364 0 1 0 2.727 0V1.364c0-.176-.037-.344-.097-.498" transform="translate(947 354)"></path></g></g></svg>
                <span class="align-bottom pl-3">...</span></h5>
            </div>
            <div class="col-12 col-lg-4 py-3 d-flex flex-column justify-content-between my-0 my-lg-4">
                <p>...</p>
            </div>
            <div class="col-12 col-lg-4 py-3 d-flex flex-column justify-content-start slb-bl-0 slb-bl-lg-1 slb-border-blue-pale my-0 my-lg-4">
                <ul class="fa-ul ml-5 mb-0">
                    <li class="pb-3 pt-2 slb-colour-grey ml-5"><span class="fa-li fa fa-2x slb-colour-ux-green fa-check"></span><strong>...</strong></li>
                </ul>
                <ul class="fa-ul slb-list__unordered slb-list__unordered--bullet">
                    <li class="pb-3 pt-2">...</li>
                    <li class="pb-3 pt-2">...</li>
                    <li class="pb-3 pt-2">...</li>
                </ul>
            </div>
            <div class="col-12 col-lg-4 py-3 d-flex flex-column justify-content-start slb-bl-0 slb-bl-lg-1 slb-border-blue-pale my-0 my-lg-4">
                <ul class="fa-ul ml-5 mb-0">
                    <li class="pb-3 pt-2 slb-colour-grey ml-5"><span class="fa-li fa fa-2x slb-colour-ux-red fa fa-plus fa-rotate-45"></span><strong>...</strong></li>
                </ul>
                <ul class="fa-ul slb-list__unordered slb-list__unordered--bullet">
                    <li class="pb-3 pt-2">...</li>
                    <li class="pb-3 pt-2">...</li>
                    <li class="pb-3 pt-2">...</li>
                </ul>
            </div>
            <div class="col-12 col-lg-4 py-3 d-flex flex-column justify-content-between my-0 my-lg-n5">
                <a href="#" class="slb-button slb-button--secondary slb-button--cta my-0 my-lg-n5">...</a>
            </div>
        </div>
    </div>
</div>

Dependencies

Bootstrap utilities
Background colour utilities
Border utilities
Information Box
Illustration SVGs
Secondary button