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.