Infobox CTA with icon

Infobox with thick border, heading, SVG icon, description and CTA link using bootstrap/digital framework utilities

Example

Scale 2:3

Market volatility

Nunc molestie molestie eros, ac dignissim nisl scelerisque et.

Nunc molestie molestie eros, ac dignissim nisl scelerisque et. Nunc molestie molestie eros, ac dignissim nisl scelerisque et.

Nunc molestie molestie eros scelerisque >

Mark-up

<div class="col-12 col-md-6 my-3">
    <div class="slb-infobox slb-infobox--pale px-3">
        <div class="slb-infobox__content">
            <div class="row mb-4">
                <div class="col-10">
                    <h2 class="slb-font-stack-light">Heading text</h2>
                </div>
                <div class="col-2 ">
                    <svg class="slb-icon slb-icon--lg" width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="none" fill-rule="evenodd"><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.364 1.364 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.364 1.364 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"/><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"/></g></svg>
                </div>
            </div>
            <div class="row">
                <div class="col-11">
                <p>....</p>
                <p>...</p>
                <a href="#" title="" class="slb-cta-light mt-auto">... <span  class="text-nowrap">...e &#062; <!-- &gt; --></span></a>
            </div>
        </div>
    </div>
</div>

Dependencies

Information Box
Bootstrap utilities
Digital Framework utilities