Illustration and content

Hero in a grid container with body copy to the right and an illustration to the left. The illustration is removed for small screen devices.

Example

Mark-up

<div class="slb-hero slb-hero--bg-primary" role="banner">
    <div class="container">
        <div class="row justify-content-between py-0 py-md-5">
            <div class="col-12 col-md-8 col-lg-6 py-4 mt-3 d-flex flex-column justify-content-between">
                <h1 class="slb-hero__text mb-5">...</h1>
                <p class="slb-hero__text slb-subtitle">...</p>
            </div>
            <div class="col-md-4 d-none d-md-flex justify-content-end align-items-center">
                <svg viewBox="-1 -1 102 102" xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="slb-illustration--alt-accent"><g fill="none" fill-rule="evenodd"><path class="illustration-main" fill="#0A2F73" d="M79.473 85.254H60.222c-9.874 0-17.908-8.033-17.908-17.907v-.013a5.878 5.878 0 0 1 5.87-5.862h43.323a5.878 5.878 0 0 1 5.872 5.871v.004c0 9.874-8.032 17.907-17.906 17.907zm20.609-17.911v.004c0 11.364-9.245 20.61-20.609 20.61h-8.276v10.687a1.351 1.351 0 1 1-2.702 0V87.956h-8.273c-11.359 0-20.6-9.235-20.61-20.59l-.002-.023c0-4.728 3.847-8.574 8.575-8.574h43.322c4.728 0 8.575 3.846 8.575 8.574zM43.369 56.652H24.112c-6.056 0-10.983-4.927-10.983-10.983 0-3.3 1.463-6.265 3.774-8.28H9.665c-4.728 0-8.575-3.846-8.575-8.574 0-3.75 2.418-6.944 5.777-8.106l-2.976-2.972A9.798 9.798 0 0 1 1 10.76a9.798 9.798 0 0 1 2.89-6.976c3.846-3.846 10.104-3.846 13.95 0l2.975 2.977c1.161-3.36 4.358-5.78 8.107-5.78 4.728 0 8.575 3.847 8.575 8.574v7.24a10.962 10.962 0 0 1 8.28-3.776c6.056 0 10.982 4.927 10.982 10.983a1.352 1.352 0 0 1-2.702 0c0-4.565-3.715-8.28-8.28-8.28-4.565 0-8.28 3.715-8.28 8.28a1.351 1.351 0 1 1-2.703 0V9.556a5.878 5.878 0 0 0-5.872-5.872 5.879 5.879 0 0 0-5.872 5.872 1.351 1.351 0 0 1-2.306.956l-4.815-4.816c-2.793-2.79-7.336-2.792-10.128 0a7.115 7.115 0 0 0-2.098 5.065c0 1.913.745 3.71 2.098 5.064l4.818 4.81a1.351 1.351 0 0 1-.954 2.308 5.879 5.879 0 0 0-5.872 5.872 5.879 5.879 0 0 0 5.872 5.872h14.447a1.351 1.351 0 1 1 0 2.703c-4.566 0-8.28 3.714-8.28 8.28 0 4.565 3.714 8.28 8.28 8.28h19.257a1.351 1.351 0 1 1 0 2.702zm-2.403-14.443c-.346 0-.692-.132-.956-.396l-24.08-24.08a1.35 1.35 0 1 1 1.911-1.91l24.08 24.079a1.353 1.353 0 0 1-.955 2.307z"></path><path class="illustration-highlight" fill="#147CB3" d="M55.906 47.016a1.351 1.351 0 0 1-1.351-1.351c0-8.707 7.083-15.79 15.79-15.79a1.351 1.351 0 1 1 0 2.703c-7.216 0-13.087 5.87-13.087 13.087 0 .747-.606 1.351-1.352 1.351zm36.102 9.636a1.352 1.352 0 0 1-1.352-1.351v-9.636c0-11.2-9.11-20.31-20.31-20.31-11.199 0-20.31 9.11-20.31 20.31V55.3a1.352 1.352 0 0 1-2.702 0v-9.636c0-12.69 10.323-23.013 23.012-23.013 12.69 0 23.013 10.323 23.013 23.013V55.3c0 .746-.605 1.351-1.351 1.351z"></path></g></svg>
            </div>
        </div>
    </div>
</div>

Dependencies

• Hero
• Illustration SVGs