Infobox component row layout

Infobox component using bootstrap grid to create four row layout using bootstrap/digital framework utilities

Example

Scale 2:3

Mark-up

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6">
            <div class="slb-infobox slb-infobox--white slb-bl-10 slb-border-blue slb-border-radius-0">
                <div class="slb-infobox__content">
                    <div class="row">
                        <div class="col-12">
                            <h5 class="slb-underlined">...</h5>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 slb-bb-1 slb-border-grey-tint">
                            <p class="mb-0">...</p>
                            <p class="slb-h2 mb-2">...</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 slb-bb-1 slb-border-grey-tint">
                            <p class="mb-0 mt-2">...</p>
                            <p class="slb-h4 slb-colour-ux-green mb-2">...</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <a href="#" title="" class="slb-cta mt-3">...</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Dependencies

• Information Box
• Bootstrap utilities
• Digital Framework utilities