Lens design system

Badges

Badge item

Badge items are useful for the prominent display of profile pictures, awards, rankings and icons.

An individual badge item must include an image but can also have a variable paragraph of supporting copy and a link.

<!-- 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 -->