2x2 Promo

2x2 Information box layout with image, introduction text and text link.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nunc molestie molestie eros, ac dignissim nisl scelerisque et.

Lorem ipsum dolor sit amet adipiscing >

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nunc molestie molestie eros, ac dignissim nisl scelerisque et.

Lorem ipsum dolor sit amet adipiscing >

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nunc molestie molestie eros, ac dignissim nisl scelerisque et.

Lorem ipsum dolor sit amet adipiscing >

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nunc molestie molestie eros, ac dignissim nisl scelerisque et.

Lorem ipsum dolor sit amet adipiscing >

Mark-up

<div class="slb-infobox">
    <div class="row">
        <div class="col-12 col-lg-6 mb-5">
            <img src="..." alt="" class="w-100">
            <div class="slb-infobox--white slb-box-shadow-none mt-n5 col-12 col-lg-9 w-100 w-lg-75">
                <div class="slb-infobox__content">
                    <h2>...</h2>
                    <p>...</p>
                    <a href="#" title="" class="slb-cta-light mt-auto">... <span class="text-nowrap">... &#062; <!-- &gt; --></span></a>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6 mb-5">
            <img src="..." alt="" class="w-100">
            <div class="slb-infobox--white slb-box-shadow-none mt-n5 col-12 col-lg-9 w-100 w-lg-75">
                <div class="slb-infobox__content">
                    <h2>...</h2>
                    <p>...</p>
                    <a href="#" title="" class="slb-cta-light mt-auto">... <span class="text-nowrap">... &#062; <!-- &gt; --></span></a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-12">
    <div class="row">
        <div class="col-12 col-lg-6 mb-5">
            <img src="..." alt="" class="w-100">
            <div class="slb-infobox--white slb-box-shadow-none mt-n5 col-12 col-lg-9 w-100 w-lg-75">
                <div class="slb-infobox__content">
                    <h2>...</h2>
                    <p>...</p>
                    <a href="#" title="" class="slb-cta-light mt-auto">... <span class="text-nowrap">... &#062; <!-- &gt; --></span></a>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6 mb-5">
            <img src="..." alt="" class="w-100">
            <div class="slb-infobox--white slb-box-shadow-none mt-n5 col-12 col-lg-9 w-100 w-lg-75">
                <div class="slb-infobox__content">
                    <h2>...</h2>
                    <p>...</p>
                    <a href="#" title="" class="slb-cta-light mt-auto">... <span class="text-nowrap">... &#062; <!-- &gt; --></span></a>
                </div>
            </div>
        </div>
    </div>
</div>

Dependencies

• Information Box
• Bootstrap utilities
• Box shadow utilities