Yellow Variant

Information box with a yellow background colour and illustration.

Example

Mark-up

<div class="slb-infobox slb-background-yellow-pale">
    <div class="container py-5">
        <div class="row justify-content-between">
            <div class="col-12 col-md-7">
                <h2>...</h2>
                <p>...</p>
            </div>
            <div class="col-12 col-md-4 d-flex flex-column justify-content-center align-items-center align-items-md-start">
                <svg viewBox="-1 -1 71 102"  xmlns="http://www.w3.org/2000/svg" width="69" height="100"><g fill="none" fill-rule="evenodd"><path class="illustration-main" fill="#0A2F73" d="M12.171 2.727c-4.932 0-8.943 4.013-8.943 8.944v76.657c0 4.932 4.011 8.945 8.943 8.945h45.043c4.932 0 8.945-4.013 8.945-8.945V11.671c0-4.931-4.013-8.944-8.945-8.944H12.171zM57.214 100H12.171C5.736 100 .501 94.764.501 88.328V11.671C.5 5.235 5.735 0 12.17 0h45.043c6.435 0 11.672 5.235 11.672 11.67v76.658c0 6.436-5.237 11.672-11.672 11.672zM10.523 29.182h48.34v-19.16h-48.34v19.16zm49.704 2.727H9.16c-.754 0-1.364-.61-1.364-1.364V8.66c0-.754.61-1.364 1.364-1.364h51.068c.753 0 1.364.61 1.364 1.364v21.886c0 .754-.611 1.364-1.364 1.364zm-5.932 58.068h4.569V85.41h-4.569v4.567zm5.932 2.728h-7.295a1.364 1.364 0 0 1-1.364-1.364v-7.296c0-.752.611-1.363 1.364-1.363h7.295c.753 0 1.364.61 1.364 1.363v7.296c0 .753-.611 1.364-1.364 1.364zm-20.522-2.728h4.567V85.41h-4.567v4.567zm5.93 2.728h-7.294a1.364 1.364 0 0 1-1.364-1.364v-7.296c0-.752.611-1.363 1.364-1.363h7.294c.754 0 1.364.61 1.364 1.363v7.296c0 .753-.61 1.364-1.364 1.364zm-20.521-2.728h4.568V85.41h-4.568v4.567zm5.931 2.728H23.75a1.364 1.364 0 0 1-1.364-1.364v-7.296c0-.752.61-1.363 1.364-1.363h7.295c.753 0 1.364.61 1.364 1.363v7.296c0 .753-.61 1.364-1.364 1.364zm-20.522-2.728h4.568V85.41h-4.568v4.567zm5.932 2.728H9.159a1.364 1.364 0 0 1-1.364-1.364v-7.296c0-.752.61-1.363 1.364-1.363h7.296c.752 0 1.363.61 1.363 1.363v7.296c0 .753-.61 1.364-1.363 1.364zm37.84-17.319h4.569V70.82h-4.569v4.567zm5.932 2.728h-7.295a1.364 1.364 0 0 1-1.364-1.364v-7.295c0-.753.611-1.364 1.364-1.364h7.295c.753 0 1.364.61 1.364 1.364v7.295c0 .753-.611 1.364-1.364 1.364zm-20.522-2.728h4.567V70.82h-4.567v4.567zm5.93 2.728h-7.294a1.364 1.364 0 0 1-1.364-1.364v-7.295c0-.753.611-1.364 1.364-1.364h7.294c.754 0 1.364.61 1.364 1.364v7.295c0 .753-.61 1.364-1.364 1.364zm-20.521-2.728h4.568V70.82h-4.568v4.567zm5.931 2.728H23.75a1.364 1.364 0 0 1-1.364-1.364v-7.295c0-.753.61-1.364 1.364-1.364h7.295c.753 0 1.364.61 1.364 1.364v7.295c0 .753-.61 1.364-1.364 1.364zm-20.522-2.728h4.568V70.82h-4.568v4.567zm5.932 2.728H9.159a1.364 1.364 0 0 1-1.364-1.364v-7.295c0-.753.61-1.364 1.364-1.364h7.296c.752 0 1.363.61 1.363 1.364v7.295c0 .753-.61 1.364-1.363 1.364zm37.84-17.319h4.569v-4.568h-4.569v4.568zm5.932 2.728h-7.295a1.364 1.364 0 0 1-1.364-1.364v-7.295c0-.754.611-1.364 1.364-1.364h7.295c.753 0 1.364.61 1.364 1.364v7.295c0 .753-.611 1.364-1.364 1.364zm-20.522-2.728h4.567v-4.568h-4.567v4.568zm5.93 2.728h-7.294a1.364 1.364 0 0 1-1.364-1.364v-7.295c0-.754.611-1.364 1.364-1.364h7.294c.754 0 1.364.61 1.364 1.364v7.295c0 .753-.61 1.364-1.364 1.364zm-20.521-2.728h4.568v-4.568h-4.568v4.568zm5.931 2.728H23.75a1.364 1.364 0 0 1-1.364-1.364v-7.295c0-.754.61-1.364 1.364-1.364h7.295c.753 0 1.364.61 1.364 1.364v7.295c0 .753-.61 1.364-1.364 1.364zm-20.522-2.728h4.568v-4.568h-4.568v4.568zm5.932 2.728H9.159a1.364 1.364 0 0 1-1.364-1.364v-7.295c0-.754.61-1.364 1.364-1.364h7.296c.752 0 1.363.61 1.363 1.364v7.295c0 .753-.61 1.364-1.363 1.364z"></path><path class="illustration-highlight" fill="#147CB3" d="M10.523 46.205h19.159v-4.569h-19.16v4.569zm20.522 2.727H9.16c-.754 0-1.364-.61-1.364-1.364v-7.295c0-.754.61-1.364 1.364-1.364h21.886c.753 0 1.364.61 1.364 1.364v7.295c0 .754-.61 1.364-1.364 1.364zm8.66-2.727h19.159v-4.569h-19.16v4.569zm20.522 2.727H38.341c-.753 0-1.364-.61-1.364-1.364v-7.295c0-.754.611-1.364 1.364-1.364h21.886c.753 0 1.364.61 1.364 1.364v7.295c0 .754-.611 1.364-1.364 1.364z"></path></g></svg>
                <a class="d-block pt-3 slb-text-decoration-none-hover slb-text-decoration-underline slb-colour-blue" href="#"><strong>...</strong></a>
            </div>
        </div>
    </div>
</div>

Dependencies

• Information Box
• Background Utilities
• Colour Utilities