Signpost

Information box with SVG signpost and body content.

Example

Explore our pension products and find out how you can switch to Standard Life

Mark-up

<div class="slb-infobox slb-infobox--blue">
    <div class="slb-infobox__content d-flex flex-column flex-sm-row">
        <div class="col-md-4 px-0 text-center text-md-left">
                <svg width="160" height="160" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><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-md-8 px-0 text-center text-md-left">
            <h3 class="slb-subtitle mb-3">...</h3>
            <a role="button" class="slb-button" href="#">...</a>
        </div>
    </div>
</div>

Dependencies

Default Button
Information Box
Bootstrap utilities
Illustration SVGs