Lens design system

Badge Collection

Badge collection

Multiple badges displayed together as a group.

Each badge collection has a minimum of 1 badge and a maximum of 6. Badges can also have optional summary text and an internal or external link.

<section class="badge-collection bg-steel medium-padding">
    <header class="text-center">
        <div class="row column">
            <div class="section-header">
                <h1 class="section-heading">Our University ranking</h1>
                <p>Highly ranked in independent league tables, we’re a University that's well-placed to help you succeed.</p>
            </div>
            <hr class="section-header-divider" />
        </div>
    </header>
    <div class="row column">
        <div class="flex-wrapper">
            <!-- COMPONENT: Badge item -->
            <div class="badge-item">
                <a href="#">
                    <div class="badge stack">
                        <img src="https://live.staticflickr.com/65535/49083636721_a22b18e168_o_d.png" alt="100%">
                    </div>
                    <div class="badge-description">
                        <p>Linked badge description text</p>
                    </div>
                </a>
            </div>
            <!-- End component: Badge item -->
            <!-- COMPONENT: Badge item -->
            <div class="badge-item">
                <a href="#">
                    <div class="badge stack">
                        <img src="https://live.staticflickr.com/65535/49083636721_a22b18e168_o_d.png" alt="100%">
                    </div>
                    <div class="badge-description">
                        <p>Linked badge description text</p>
                    </div>
                </a>
            </div>
            <!-- End component: Badge item -->
            <!-- COMPONENT: Badge item -->
            <div class="badge-item">
                <a href="#">
                    <div class="badge stack">
                        <img src="https://live.staticflickr.com/65535/49083636721_a22b18e168_o_d.png" alt="100%">
                    </div>
                    <div class="badge-description">
                        <p>Linked badge description text</p>
                    </div>
                </a>
            </div>
            <!-- End component: Badge item -->
        </div>
    </div>
</section>