Infobox CTA with ribbon

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

Example

Scale 2:3

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">...</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