Information Box - Round infographic

Information box using border radius and background colour utilities.

Example

Assess your workforce
Join new members
Manage payments
Deal with
opt-outs
Manage multiple schemes

Mark-up

<div class="container">
    <div class="row justify-content-center">
        <ul class="col-12 col-md-8 d-flex justify-content-center">
            <li class="slb-infobox slb-background-blue slb-border-radius-50 mr-2 slb-min-w-100 slb-max-w-100 slb-min-h-100">
                <p class="slb-colour-white text-center pt-4">...</p>
            </li>
            <li class="slb-infobox slb-background-blue-alt slb-border-radius-50 mr-2 slb-min-w-100 slb-max-w-100 slb-min-h-100">
                <p class="slb-colour-white text-center pt-4">...</p>
            </li>
            <li class="slb-infobox slb-background-purple slb-border-radius-50 mr-2 slb-min-w-100 slb-max-w-100 slb-min-h-100">
                <p class="slb-colour-white text-center pt-4">...</p>
            </li>
            <li class="slb-infobox slb-background-aqua slb-border-radius-50 mr-2 slb-min-w-100 slb-max-w-100 slb-min-h-100">
                <p class="slb-colour-white text-center pt-4">...</p>
            </li>
            <li class="slb-infobox slb-background-ux-green slb-border-radius-50 mr-2 slb-min-w-100 slb-max-w-100 slb-min-h-100">
                <p class="slb-colour-white text-center pt-3 mb-0">...</p>
            </li>
        </ul>
    </div>
</div>

Dependencies

Information Box
Bootstrap utilities
Border radius utility
Width and Height utilities