Infobox CTA with illustration and button

Infobox component column layout with SVG illustration using bootstrap/digital framework utilities

Example

Scale 2:3

Not ready to start taking money from your pension?

Many people decide they don’t need to access their pension pot just yet. You can always leave this money invested. But it’s important to keep an eye on how your investments are doing and how they're affecting the value of your pension.

Mark-up

<div class="row">
    <div class="col-12 col-md-8">
        <div class="slb-infobox slb-infobox--white slb-b-2-solid slb-border-blue-alt d-flex flex-column justify-content-space-evenly h-100">
            <div class="slb-infobox__content d-flex flex-row h-100 align-items-center">
                <div class="col-2">
                    {{ SVG icon }}
                </div>
                <div class="col-10">
                    <h3>...</h3>
                    <p>...</p>
                    <button id="" href="#" class="slb-button slb-button--secondary"><strong>...</strong></button>
                </div>
            </div>
        </div>
    </div>
</div>

Dependencies

Information Box
Bootstrap utilities
Digital Framework utilities