We're using cookies, but you can turn them off in Privacy Settings. If you use the site without changing settings, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

Tiles

Example

Code

HTML

<div class="col-xxs-12 col-xs-12 col-sm-4 col-md-3 col-xl-2 col-lg-2">
    <a href="#" class="tile-link">
        <div class="tile-content profile-tile">
            <i class="tile-icon" aria-hidden="true"></i>
            <p class="tile-title">Profile</p>
        </div>
    </a>
</div>
        

Documentation

Problem Being Solved

Users need a way to see the myriad apps they can drill down into.

When To Use

This pattern should be used to present a series of unrelated, equally-weighted links to apps. It works best when we can assume nothing about the best path forward.

When Not To use

This pattern should not be used for anything except a dashboard.

Formatting

Currently, individual tile colors and icons are hard coded per app. Be sure to use or create styles and classes specific to the app.