Thin border

Information box using the border width utility. This can be changed 1-10 at any breakpoint.

Example

Bringing your pensions together

If it's right for you, it's easy to transfer your other plans to us. Having everything in one place can make managing your money easier and give you more control. But there are things to consider before making this decision.

Combine my pension >

Mark-up

<div class="slb-infobox slb-infobox--pale slb-b-1 slb-border-blue-alt slb-box-shadow-none d-flex flex-column h-100">
    <div class="container slb-infobox__content">
        <div class="row h-100">
            <div class="col-12 d-flex justify-content-center align-items-center">
                <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><title>Signpost</title><g fill="none" fill-rule="evenodd"><path class="illustration-main" fill="#0A2F73" d="M85.913 70.523H55.012V48.932h30.9l10.796 10.795-10.795 10.796zm0-55.637l10.795 10.796-10.795 10.795H55.012v-21.59h30.9zM14.087 53.5L3.293 42.705l10.794-10.796h30.901V53.5h-30.9zm73.355-6.895L99.6 58.763a1.364 1.364 0 0 1 0 1.929L87.44 72.85a1.366 1.366 0 0 1-.964.399H55.012v25.386a1.364 1.364 0 0 1-2.728 0V2.727h-4.569v95.91a1.364 1.364 0 1 1-2.727 0v-42.41H13.523a1.36 1.36 0 0 1-.964-.4L.399 43.668a1.36 1.36 0 0 1 0-1.928l12.16-12.16c.255-.255.602-.398.964-.398h31.465V1.364C44.988.61 45.6 0 46.352 0h7.296c.753 0 1.364.61 1.364 1.364v10.795h31.465c.362 0 .708.144.965.4L99.6 24.716a1.363 1.363 0 0 1 0 1.928l-12.16 12.16c-.256.256-.602.4-.964.4H55.012v7h31.465c.362 0 .708.143.965.399zm-.461-20.922l-3.9 3.9a1.363 1.363 0 1 0 1.929 1.928l4.863-4.864a1.364 1.364 0 0 0 0-1.929l-4.863-4.863a1.363 1.363 0 1 0-1.928 1.928l3.899 3.9zm-3.9 28.217a1.363 1.363 0 0 0 0 1.928l3.9 3.9-3.9 3.9a1.363 1.363 0 1 0 1.929 1.928l4.863-4.863a1.363 1.363 0 0 0 0-1.928L85.01 53.9a1.363 1.363 0 0 0-1.929 0z"></path><path class="illustration-highlight" fill="#147CB3" d="M32.977 41.341H14.383l2.535-2.536a1.363 1.363 0 1 0-1.928-1.929l-4.861 4.862c-.127.128-.23.28-.298.448l-.007.02c-.06.155-.097.322-.097.499 0 .176.037.343.097.498l.007.02c.069.168.17.32.298.448l4.86 4.862c.267.266.616.399.965.399a1.363 1.363 0 0 0 .964-2.327l-2.535-2.537h18.594a1.363 1.363 0 1 0 0-2.727"></path></g></svg>
            </div>
            <div class="col-12">
                <h3 class="text-center">...</h3>
            </div>
            <div class="col-12">
                <p class="pb-3 pt-2 text-center">...</p>
                <a href="#" class="d-block text-center slb-cta"><strong>...&#160; <!-- &nbsp; -->&#062; <!-- &gt; --></strong></a>
            </div>
        </div>
    </div>
</div>

Dependencies

Information Box
Border width utility