Tile grid

Tile notification component row layout using bootstrap/digital framework utilities

Example

Scale 1:2

Mark-up

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <a href="#" class="slb-tile slb-tile--primary">
                <h3 class="slb-tile__heading mb-2">...</h3>
                <p class="mb-0">...</p>
                <ul class="mt-0">
                    <li class="ml-3 slb-colour-grey">...</li>
                    <li class="ml-3 slb-colour-grey">...</li>
                    <li class="ml-3 slb-colour-grey">...</li>
                </ul>
            </a>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <a href="#" class="slb-tile slb-tile--primary">
                <h3 class="slb-tile__heading mb-2">...</h3>
                <p class="mb-0">...</p>
                <ul class="ml-0">
                    <li class="ml-3 slb-colour-grey">...</li>
                    <li class="ml-3 slb-colour-grey">...</li>
                    <li class="ml-3 slb-colour-grey">...</li>
                </ul>
            </a>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <a href="#" class="slb-tile slb-tile--primary">
                <h3 class="slb-tile__heading mb-2">...</h3>
                <p class="mb-0">...</p>
                <ul class="ml-0">
                    <li class="ml-3 slb-colour-grey">...</li>
                    <li class="ml-3 slb-colour-grey">...</li>
                    <li class="ml-3 slb-colour-grey">...</li>
                </ul>
            </a>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <a href="#" class="slb-tile slb-tile--primary">
                <h3 class="slb-tile__heading mb-2">...</h3>
                <p class="mb-0">...</p>
                <ul class="ml-0">
                    <li class="ml-3 slb-colour-grey">...</li>
                    <li class="ml-3 slb-colour-grey">...</li>
                    <li class="ml-3 slb-colour-grey">...</li>
                </ul>
            </a>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <a href="#" class="slb-tile slb-tile--primary">
                <h3 class="slb-tile__heading mb-2">...</h3>
                <p class="mb-0">...</p>
                <ul class="ml-0">
                    <li class="ml-3 slb-colour-grey">...</li>
                    <li class="ml-3 slb-colour-grey">...</li>
                    <li class="ml-3 slb-colour-grey">...</li>
                </ul>
            </a>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <a href="#" class="slb-tile slb-tile--primary">
                <h3 class="slb-tile__heading mb-2">...</h3>
                <p class="mb-0">...</p>
                <ul class="ml-0">
                    <li class="ml-3 slb-colour-grey">...</li>
                    <li class="ml-3 slb-colour-grey">...</li>
                    <li class="ml-3 slb-colour-grey">...</li>
                </ul>
            </a>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <a href="#" class="slb-tile slb-tile--primary">
                <h3 class="slb-tile__heading mb-2">...</h3>
                <p class="mb-0">...</p>
                <ul class="ml-0">
                    <li class="ml-3 slb-colour-grey">...</li>
                    <li class="ml-3 slb-colour-grey">...</li>
                    <li class="ml-3 slb-colour-grey">...</li>
                </ul>
            </a>
        </div>
    </div>
</div>

Dependencies

• Information Box
• Bootstrap utilities
• Framework utilities