Infoxbox grid

Infobox component grid layout, with heading, description and CTA link using bootstrap/digital framework utilities

Example

Scale 2:5

First card

Nunc molestie molestie eros, ac dignissim nisl scelerisque et.

Link text >

Second card

Nunc molestie molestie eros, ac dignissim nisl scelerisque et.

Link text >

Third card

Nunc molestie molestie eros, ac dignissim nisl scelerisque et.

Link text >

Fourth card

Nunc molestie molestie eros, ac dignissim nisl scelerisque et.

Link text >

Fifth card

Nunc molestie molestie eros, ac dignissim nisl scelerisque et.

Link text >

Sixth card

Nunc molestie molestie eros, ac dignissim nisl scelerisque et.

Link text >

Seventh card

Nunc molestie molestie eros, ac dignissim nisl scelerisque et.

Link text >

Mark-up

<div class="container px-0">
    <div class="row">
        <div class="col-12 col-sm-6 col-xl-4 my-3">
            <div class="slb-infobox slb-infobox--white d-flex flex-column h-100 py-4 px-3">
                <h2 class="slb-h2">...</h2>
                <p>...</p>
                <a href="#" title="" class="slb-cta-light mt-auto">... <span  class="text-nowrap">... &#062; <!-- &gt; --></span></a>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-4 my-3">
            <div class="slb-infobox slb-infobox--white d-flex flex-column h-100 py-4 px-3">
                <h2 class="slb-h2">...</h2>
                <p>...</p>
                <p>...</p>
                <a href="#" title="" class="slb-cta-light mt-auto">... <span  class="text-nowrap">... &#062; <!-- &gt; --></span></a>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-4 my-3">
            <div class="slb-infobox slb-infobox--white d-flex flex-column h-100 py-4 px-3">
                <h2 class="slb-h2">...</h2>
                <p>...</p>
                <a href="#" title="" class="slb-cta-light mt-auto">... <span  class="text-nowrap">... &#062; <!-- &gt; --></span></a>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-4 my-3">
            <div class="slb-infobox slb-infobox--white d-flex flex-column h-100 py-4 px-3">
                <h2 class="slb-h2">...</h2>
                <p>...</p>
                <a href="#" title="" class="slb-cta-light mt-auto">... <span  class="text-nowrap">... &#062; <!-- &gt; --></span></a>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-4 my-3">
            <div class="slb-infobox slb-infobox--white d-flex flex-column h-100 py-4 px-3">
                <h2 class="slb-h2">...</h2>
                <p>...</p>
                <p>...</p>
                <a href="#" title="" class="slb-cta-light mt-auto">... <span  class="text-nowrap">... &#062; <!-- &gt; --></span></a>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-4 my-3">
            <div class="slb-infobox slb-infobox--white d-flex flex-column h-100 py-4 px-3">
                <h2 class="slb-h2">...</h2>
                <p>...</p>
                <a href="#" title="" class="slb-cta-light mt-auto">... <span  class="text-nowrap">... &#062; <!-- &gt; --></span></a>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-4 my-3">
            <div class="slb-infobox slb-infobox--white d-flex flex-column h-100 py-4 px-3">
                <h2 class="slb-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>

Dependencies

Information Box
Bootstrap utilities
Digital Framework utilities