Infographic

Information box with an infographic inside it.

Example

Mark-up

<div class="slb-infobox slb-infobox--blue p-4 mt-4">
    <div class="row">
        <div class="col">
            <p>...</p>
        </div>
    </div>
    <div class="row">
        <div class="col-3 d-flex flex-column align-items-center">
            <svg height="100" width="100" class="slb-icon--lg" id="building-after-tax" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 110 110" style="enable-background:new 0 0 110 110;" xml:space="preserve"><style type="text/css">.st0 {display: none;}.st1 {display: inline;fill: none;stroke: #078ACC;stroke-width: 0.1;stroke-linecap: round;stroke-miterlimit: 10;}.st2 {fill: none;stroke: #0A2F73;stroke-width: 3;stroke-linecap: round;stroke-linejoin: round;stroke-miterlimit: 10;}.st3 {fill: none;stroke: #147CB3;stroke-width: 3;stroke-linecap: round;stroke-linejoin: round;stroke-miterlimit: 10;}</style><g id="Grid-after-tax" class="st0"><line class="st1" x1="4.2" y1="1.5" x2="4.2" y2="108.5"></line><line class="st1" x1="6.9" y1="1.5" x2="6.9" y2="108.5"></line><line class="st1" x1="9.5" y1="1.5" x2="9.5" y2="108.5"></line><line class="st1" x1="12.2" y1="1.5" x2="12.2" y2="108.5"></line><line class="st1" x1="14.9" y1="1.5" x2="14.9" y2="108.5"></line><line class="st1" x1="17.5" y1="1.5" x2="17.5" y2="108.5"></line><line class="st1" x1="20.2" y1="1.5" x2="20.2" y2="108.5"></line><line class="st1" x1="22.9" y1="1.5" x2="22.9" y2="108.5"></line><line class="st1" x1="25.6" y1="1.5" x2="25.6" y2="108.5"></line><line class="st1" x1="28.2" y1="1.5" x2="28.2" y2="108.5"></line><line class="st1" x1="30.9" y1="1.5" x2="30.9" y2="108.5"></line><line class="st1" x1="33.6" y1="1.5" x2="33.6" y2="108.5"></line><line class="st1" x1="36.3" y1="1.5" x2="36.3" y2="108.5"></line><line class="st1" x1="39" y1="1.5" x2="39" y2="108.5"></line><line class="st1" x1="41.6" y1="1.5" x2="41.6" y2="108.5"></line><line class="st1" x1="44.3" y1="1.5" x2="44.3" y2="108.5"></line><line class="st1" x1="47" y1="1.5" x2="47" y2="108.5"></line><line class="st1" x1="49.7" y1="1.5" x2="49.7" y2="108.5"></line><line class="st1" x1="52.3" y1="1.5" x2="52.3" y2="108.5"></line><line class="st1" x1="55" y1="1.5" x2="55" y2="108.5"></line><line class="st1" x1="57.7" y1="1.5" x2="57.7" y2="108.5"></line><line class="st1" x1="60.3" y1="1.5" x2="60.3" y2="108.5"></line><line class="st1" x1="63" y1="1.5" x2="63" y2="108.5"></line><line class="st1" x1="65.7" y1="1.5" x2="65.7" y2="108.5"></line><line class="st1" x1="68.4" y1="1.5" x2="68.4" y2="108.5"></line><line class="st1" x1="71.1" y1="1.5" x2="71.1" y2="108.5"></line><line class="st1" x1="73.7" y1="1.5" x2="73.7" y2="108.5"></line><line class="st1" x1="76.4" y1="1.5" x2="76.4" y2="108.5"></line><line class="st1" x1="79.1" y1="1.5" x2="79.1" y2="108.5"></line><line class="st1" x1="81.8" y1="1.5" x2="81.8" y2="108.5"></line><line class="st1" x1="84.4" y1="1.5" x2="84.4" y2="108.5"></line><line class="st1" x1="87.1" y1="1.5" x2="87.1" y2="108.5"></line><line class="st1" x1="89.8" y1="1.5" x2="89.8" y2="108.5"></line><line class="st1" x1="92.4" y1="1.5" x2="92.4" y2="108.5"></line><line class="st1" x1="95.1" y1="1.5" x2="95.1" y2="108.5"></line><line class="st1" x1="97.8" y1="1.5" x2="97.8" y2="108.5"></line><line class="st1" x1="100.5" y1="1.5" x2="100.5" y2="108.5"></line><line class="st1" x1="103.2" y1="1.5" x2="103.2" y2="108.5"></line><line class="st1" x1="105.8" y1="1.5" x2="105.8" y2="108.5"></line><line class="st1" x1="1.5" y1="12.2" x2="108.5" y2="12.2"></line><line class="st1" x1="1.5" y1="9.5" x2="108.5" y2="9.5"></line><line class="st1" x1="1.5" y1="6.8" x2="108.5" y2="6.8"></line><line class="st1" x1="1.5" y1="4.2" x2="108.5" y2="4.2"></line><line class="st1" x1="1.5" y1="105.8" x2="108.5" y2="105.8"></line><line class="st1" x1="1.5" y1="103.1" x2="108.5" y2="103.1"></line><line class="st1" x1="1.5" y1="100.5" x2="108.5" y2="100.5"></line><line class="st1" x1="1.5" y1="97.8" x2="108.5" y2="97.8"></line><line class="st1" x1="1.5" y1="95.1" x2="108.5" y2="95.1"></line><line class="st1" x1="1.5" y1="92.4" x2="108.5" y2="92.4"></line><line class="st1" x1="1.5" y1="89.8" x2="108.5" y2="89.8"></line><line class="st1" x1="1.5" y1="87.1" x2="108.5" y2="87.1"></line><line class="st1" x1="1.5" y1="84.4" x2="108.5" y2="84.4"></line><line class="st1" x1="1.5" y1="81.7" x2="108.5" y2="81.7"></line><line class="st1" x1="1.5" y1="79.1" x2="108.5" y2="79.1"></line><line class="st1" x1="1.5" y1="76.4" x2="108.5" y2="76.4"></line><line class="st1" x1="1.5" y1="73.7" x2="108.5" y2="73.7"></line><line class="st1" x1="1.5" y1="71" x2="108.5" y2="71"></line><line class="st1" x1="1.5" y1="68.4" x2="108.5" y2="68.4"></line><line class="st1" x1="1.5" y1="65.7" x2="108.5" y2="65.7"></line><line class="st1" x1="1.5" y1="63" x2="108.5" y2="63"></line><line class="st1" x1="1.5" y1="60.3" x2="108.5" y2="60.3"></line><line class="st1" x1="1.5" y1="57.7" x2="108.5" y2="57.7"></line><line class="st1" x1="1.5" y1="55" x2="108.5" y2="55"></line><line class="st1" x1="1.5" y1="52.3" x2="108.5" y2="52.3"></line><line class="st1" x1="1.5" y1="49.6" x2="108.5" y2="49.6"></line><line class="st1" x1="1.5" y1="47" x2="108.5" y2="47"></line><line class="st1" x1="1.5" y1="44.3" x2="108.5" y2="44.3"></line><line class="st1" x1="1.5" y1="41.6" x2="108.5" y2="41.6"></line><line class="st1" x1="1.5" y1="38.9" x2="108.5" y2="38.9"></line><line class="st1" x1="1.5" y1="36.3" x2="108.5" y2="36.3"></line><line class="st1" x1="1.5" y1="33.6" x2="108.5" y2="33.6"></line><line class="st1" x1="1.5" y1="30.9" x2="108.5" y2="30.9"></line><line class="st1" x1="1.5" y1="28.2" x2="108.5" y2="28.2"></line><line class="st1" x1="1.5" y1="25.6" x2="108.5" y2="25.6"></line><line class="st1" x1="1.5" y1="22.9" x2="108.5" y2="22.9"></line><line class="st1" x1="1.5" y1="20.2" x2="108.5" y2="20.2"></line><line class="st1" x1="1.5" y1="17.5" x2="108.5" y2="17.5"></line><line class="st1" x1="1.5" y1="14.9" x2="108.5" y2="14.9"></line><rect x="1.5" y="1.5" class="st1" width="107" height="107"></rect></g><path class="st2" d="M108.5,108.5l-0.1-5.4c0-2.5-2-4.6-4.5-4.6H6c-2.5,0-4.5,2-4.5,4.6l0.1,5.4H108.5z"></path><path class="st2" d="M68.4,57.7"></path><polygon class="st2" points="1.5,12.2 1.5,20.2 108.5,20.2 108.5,12.2 55,1.5 "></polygon><rect x="9.5" y="20.2" class="st2" width="21.4" height="5.4"></rect><rect x="6.9" y="93.1" class="st2" width="26.7" height="5.4"></rect><rect x="12.2" y="25.6" class="st2" width="16" height="67.5"></rect><circle class="st3" cx="55" cy="10.8" r="4.1"></circle><line class="st3" x1="44.3" y1="10.8" x2="17.5" y2="14.5"></line><line class="st3" x1="65.7" y1="10.8" x2="92.4" y2="14.5"></line><rect x="44.3" y="20.2" class="st2" width="21.4" height="5.4"></rect><rect x="41.7" y="93.1" class="st2" width="26.7" height="5.4"></rect><path class="st2" d="M47,33.6"></path><path class="st2" d="M47,76.4"></path><polyline class="st2" points="62.9,76.4 62.9,93.1 47,93.1 47,76.4 "></polyline><path class="st2" d="M62.9,76.4"></path><path class="st2" d="M62.9,33.6"></path><polyline class="st2" points="47,36.1 47,25.6 62.9,25.6 62.9,36.1 "></polyline><rect x="79.1" y="20.2" class="st2" width="21.5" height="5.4"></rect><rect x="76.5" y="93.1" class="st2" width="26.7" height="5.4"></rect><rect x="81.8" y="25.6" class="st2" width="16.1" height="67.5"></rect><path class="st3" d="M64.3,48.6c0-4.4-3.6-8-8-8s-8,3.6-8,8V70"></path><line class="st3" x1="44.3" y1="70" x2="65.7" y2="70"></line><line class="st3" x1="44.3" y1="56.6" x2="55" y2="56.6"></line></svg>
            <h5 class="text-center mt-4 mw-100">.</h5>
        </div>
        <div class="col d-flex flex-column align-items-center">
            <p class="slb-h1">-</p>
        </div>
        <div class="col-3 d-flex flex-column align-items-center">
            <svg width="100" height="100" id="money-after-tax" class="slb-icon--lg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><title>...</title><g fill="none" fill-rule="evenodd"><path class="illustration-main" fill="#0A2F73" d="M2.727 97.256h79.955V51.347H2.727v45.91zm81.318 2.728H1.364A1.364 1.364 0 0 1 0 98.62V49.984c0-.754.61-1.364 1.364-1.364h82.681c.753 0 1.364.61 1.364 1.364V98.62c0 .753-.61 1.364-1.364 1.364zM17.211 89.96h50.988a8.677 8.677 0 0 1 7.187-7.188V65.831a8.678 8.678 0 0 1-7.187-7.188H17.21a8.68 8.68 0 0 1-7.189 7.188v16.942a8.68 8.68 0 0 1 7.189 7.188m52.244 2.727h-53.5a1.364 1.364 0 0 1-1.364-1.364c0-3.27-2.661-5.93-5.932-5.93a1.365 1.365 0 0 1-1.364-1.364V64.574c0-.753.611-1.363 1.364-1.363a5.939 5.939 0 0 0 5.932-5.931c0-.753.61-1.364 1.363-1.364h53.501c.753 0 1.364.61 1.364 1.364 0 3.27 2.66 5.93 5.93 5.93.753 0 1.364.611 1.364 1.364V84.03c0 .752-.61 1.363-1.363 1.363a5.938 5.938 0 0 0-5.931 5.931c0 .753-.611 1.364-1.364 1.364zM88.89 46.484a1.366 1.366 0 0 1-.965-2.328l8.764-8.763L64.573 3.275l-42.808 42.81a1.365 1.365 0 0 1-1.928-1.93L63.608.384c.512-.512 1.418-.512 1.93 0l34.045 34.045a1.362 1.362 0 0 1 0 1.928l-9.727 9.727a1.36 1.36 0 0 1-.965.4zm-9.773 0a1.363 1.363 0 0 1-.958-2.334l2.816-2.781c-2.197-3.278-2.195-8.683.004-11.96L70.556 18.987c-3.278 2.2-8.688 2.2-11.966 0L31.492 46.084a1.365 1.365 0 0 1-1.928-1.929L57.529 16.19a1.363 1.363 0 0 1 1.929 0c1.087 1.088 3 1.737 5.115 1.737s4.028-.649 5.115-1.737a1.363 1.363 0 0 1 1.929 0l12.159 12.159a1.363 1.363 0 0 1 0 1.928c-2.294 2.295-2.294 7.937 0 10.231a1.366 1.366 0 0 1-.007 1.935l-3.692 3.647a1.357 1.357 0 0 1-.959.394z"></path><path class="illustration-highlight" fill="#147CB3" d="M43.012 46.484a1.364 1.364 0 0 1-1.322-1.705 11.086 11.086 0 0 1 10.742-8.318c5.063 0 9.48 3.42 10.74 8.318a1.36 1.36 0 0 1-.98 1.66 1.365 1.365 0 0 1-1.66-.98 8.36 8.36 0 0 0-8.1-6.27 8.357 8.357 0 0 0-8.1 6.271 1.366 1.366 0 0 1-1.32 1.024m-.307 19.454c-4.612 0-8.364 3.752-8.364 8.364 0 4.611 3.752 8.363 8.364 8.363 4.611 0 8.363-3.752 8.363-8.363 0-4.612-3.752-8.364-8.363-8.364m0 19.455c-6.116 0-11.091-4.975-11.091-11.091s4.975-11.091 11.09-11.091c6.116 0 11.092 4.975 11.092 11.09 0 6.117-4.976 11.092-11.091 11.092"></path></g></svg>
            <h5 class="text-center mt-4 mw-100">...</h5>
        </div>
        <div class="col d-flex flex-column align-items-center">
            <p class="slb-h1">+</p>
        </div>
        <div class="col-3 d-flex flex-column align-items-center">
            <svg width="100" height="100" id="coins-after-tax" class="slb-icon--lg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><title>Tax</title><g fill="none" fill-rule="evenodd"><path class="illustration-main" fill="#0A2F73" d="M187.546 51.455c-3.86 0-7.002-3.14-7.002-7s3.142-7 7.002-7 7 3.14 7 7-3.14 7-7 7zm-55.638 19.509h23.727V47.182h-23.727v23.782zm0 29.127h23.727V76.418h-23.727v23.673zm0 29.182h23.727v-23.728h-23.727v23.728zm0 29.183h23.727v-23.729h-23.727v23.73zm-29.184-87.492h23.73V47.182h-23.73v23.782zm0 29.127h23.73V76.418h-23.73v23.673zm0 29.182h23.73v-23.728h-23.73v23.728zm0 29.183h23.73v-23.729h-23.73v23.73zM73.542 70.964h23.73V47.182h-23.73v23.782zm0 29.127h23.73V76.418h-23.73v23.673zm0 29.182h23.73v-23.728h-23.73v23.728zm0 29.183h23.73v-23.729h-23.73v23.73zM44.36 70.964h23.728V47.182H44.36v23.782zm0 29.127h23.728V76.418H44.36v23.673zm0 29.182h23.728v-23.728H44.36v23.728zm0 29.183h23.728v-23.729H44.36v23.73zM12.455 51.455c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM187.545 32c-5.93 0-10.896 4.17-12.145 9.727H24.6C23.35 36.17 18.384 32 12.455 32 5.585 32 0 37.587 0 44.455c0 6.867 5.586 12.454 12.455 12.454 5.929 0 10.896-4.167 12.144-9.727h14.307v148.045a2.727 2.727 0 1 0 5.454 0v-31.316h23.728v31.316a2.727 2.727 0 1 0 5.454 0v-31.316h23.73v31.316a2.727 2.727 0 1 0 5.454 0v-31.316h23.727v31.316a2.728 2.728 0 0 0 5.455 0v-31.316h23.727v31.316a2.728 2.728 0 0 0 5.454 0V47.182H175.4c1.25 5.56 6.215 9.727 12.146 9.727 6.867 0 12.454-5.587 12.454-12.454C200 37.587 194.413 32 187.546 32z"></path><path class="illustration-highlight" fill="#147CB3" d="M19.455 122.273V132c0 3.86-3.14 7-7 7s-7-3.14-7-7v-9.727a7.009 7.009 0 0 1 4.272-6.445v1.581a2.727 2.727 0 1 0 5.455 0v-1.581a7.009 7.009 0 0 1 4.273 6.445m-14-34.045V78.5a7.009 7.009 0 0 1 4.272-6.445v1.636a2.727 2.727 0 1 0 5.455 0v-1.636a7.009 7.009 0 0 1 4.273 6.445v9.728a7.009 7.009 0 0 1-4.273 6.445v-1.582a2.727 2.727 0 1 0-5.455 0v1.582a7.009 7.009 0 0 1-4.272-6.445m19.454 0V78.5c0-5.929-4.169-10.896-9.727-12.143V49.319a2.726 2.726 0 0 0-2.727-2.728 2.726 2.726 0 0 0-2.728 2.728v17.038C4.17 67.604 0 72.57 0 78.5v9.728c0 5.93 4.17 10.896 9.727 12.143v9.758C4.17 111.38 0 116.342 0 122.273V132c0 6.868 5.587 12.455 12.455 12.455 6.867 0 12.454-5.587 12.454-12.455v-9.727c0-5.93-4.169-10.894-9.727-12.144v-9.758c5.558-1.247 9.727-6.212 9.727-12.143m169.636 34.045V132c0 3.86-3.14 7-7 7s-7-3.14-7-7v-9.727c0-2.893 1.766-5.38 4.273-6.445v1.581a2.728 2.728 0 0 0 5.454 0v-1.581a7.009 7.009 0 0 1 4.273 6.445m-14-34.045V78.5c0-2.892 1.766-5.38 4.273-6.445v1.636a2.728 2.728 0 0 0 5.454 0v-1.636a7.009 7.009 0 0 1 4.273 6.445v9.728a7.009 7.009 0 0 1-4.273 6.445v-1.582a2.727 2.727 0 1 0-5.454 0v1.582c-2.507-1.065-4.273-3.553-4.273-6.445m19.455 0V78.5c0-5.929-4.168-10.896-9.728-12.143V49.319a2.727 2.727 0 1 0-5.455 0v17.038c-5.557 1.247-9.726 6.214-9.726 12.143v9.728c0 5.93 4.169 10.896 9.727 12.143v9.758c-5.558 1.25-9.727 6.213-9.727 12.144V132c0 6.868 5.587 12.455 12.454 12.455 6.87 0 12.455-5.587 12.455-12.455v-9.727c0-5.93-4.168-10.894-9.728-12.144v-9.758c5.56-1.247 9.728-6.212 9.728-12.143"></path></g></svg>
            <h5 class="text-center mt-4 mw-100">...</h5>
        </div>
    </div>
</div>

Dependencies

• Information Box
• Bootstrap utilities
• Heading classes