Lens design system

Accolades

#Accolades

Multiple badges displayed together as a group.

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

<section class="accolades  bg-steel-75-light 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 small-padding">
            <!-- 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>
    <footer class="small-padding text-center">
        <div class="row column">
            <a href="/corporate-information/rankings-and-reputation/" class="button">Learn more about our rankings and reputation</a>
        </div>
    </footer>
</section>