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

Dashboard Tiles

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>
            

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.

Alternative Tiles

HTML

<div class="tiles-alt">
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-play_button" aria-hidden="true"></i>
                <p class="tile-alt-title">Tile Title</p>
            </div>
        </a>
    </div>
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-newspaper" aria-hidden="true"></i>
                <p class="tile-alt-title">Tile Title</p>
            </div>
        </a>
    </div>
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-laptop" aria-hidden="true"></i>
                <p class="tile-alt-title">Tile Title</p>
            </div>
        </a>
    </div>
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-book" aria-hidden="true"></i>
                <p class="tile-alt-title">Tile Title</p>
            </div>
        </a>
    </div>
</div>
            

Documentation

Documentation coming soon!