List group

Information box using the utilities to create a list group.

Example

Mark-up

<div class="slb-infobox slb-infobox--white slb-sticky" role="complementary">
    <h3 class="slb-bb-2 slb-border-blue-pale px-3 py-2 m-0">...</h3>
    <div class="slb-colour-blue-alt slb-background-blue-hover-pale slb-bb-2 slb-border-blue-pale px-3 py-2 m-0 slb-font-stack-light">
        <a class="slb-anchor__text" href="#">...</a>
    </div>
    <div class="slb-colour-blue-alt slb-background-blue-hover-pale slb-bb-2 slb-border-blue-pale px-3 py-2 m-0 slb-font-stack-light">
        <a class="slb-anchor__text" href="#">...</a>
    </div>
    <div class="slb-colour-blue-alt slb-background-blue-hover-pale slb-bb-2 slb-border-blue-pale px-3 py-2 m-0 slb-font-stack-light">
        <a class="slb-anchor__text" href="#">...</a>
    </div>
    <div class="slb-colour-blue-alt slb-background-blue-hover-pale slb-bb-2 slb-border-blue-pale px-3 py-2 m-0 slb-font-stack-light">
        <a class="slb-anchor__text" href="#">...</a>
    </div>
    <div class="slb-colour-blue-alt slb-background-blue-hover-pale slb-bb-2 slb-border-blue-pale px-3 py-2 m-0 slb-font-stack-light">
        <a class="slb-anchor__text" href="#">...</a>
    </div>
    <div class="slb-colour-blue-alt slb-background-blue-hover-pale slb-bb-2 slb-border-blue-pale px-3 py-2 m-0 slb-font-stack-light">
        <a class="slb-anchor__text" href="#">...</a>
    </div>
</div>

Dependencies

• Information Box
• Border width utility
• Border colour utility
• Font stack utility