Dashboard Tiles

Quickly display important data in tiles.

Font Awesome Required for Icons in Tiles

Code:

<link rel="stylesheet" href="../../css/font-awesome.min.css">

238

Users Online

Link To Data     

21

Messages

Link To Data     

5

Metrics

Link To Data     

5

Errors

Link To Data     

Code:

<div class="row">    
    <div class="col"> 
        <div class="card">           
            <div class="card-body bg-primary text-white">
                <div class="row">
                    <div class="col">
                        <i class="fa fa-users fa-4x" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <h2 class="card-title">238</h2>
                        <p>Users Online</p>
                    </div>
                </div>
                
            </div>
            <div class="card-footer">
                <a href="#" class="text-dark">Link To Data 
                &nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-arrow-right" aria-hidden="true"></i></a>
            </div>
        </div>
    </div>
    <div class="col"> 
        <div class="card">           
            <div class="card-body bg-success text-white">
                <div class="row">
                    <div class="col">
                        <i class="fa fa-envelope fa-4x" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <h2 class="card-title">21</h2>
                        <p>Messages</p>
                    </div>
                </div>                
            </div>
            <div class="card-footer">
                <a href="#" class="text-dark">Link To Data 
                &nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-arrow-right" aria-hidden="true"></i></a>
            </div>
        </div>
    </div>
    <div class="col"> 
        <div class="card">           
            <div class="card-body bg-dark text-white">
                <div class="row">
                    <div class="col">
                        <i class="fa fa-line-chart fa-4x" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <h2 class="card-title">5</h2>
                        <p>Metrics</p>
                    </div>
                </div>                
            </div>
            <div class="card-footer">
                <a href="#" class="text-dark">Link To Data 
                &nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-arrow-right" aria-hidden="true"></i></a>
            </div>
        </div>
    </div>
    <div class="col"> 
        <div class="card">           
            <div class="card-body bg-danger text-white">
                <div class="row">
                    <div class="col">
                            <i class="fa fa-exclamation-triangle fa-4x" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <h2 class="card-title">5</h2>
                        <p>Errors</p>
                    </div>
                </div>                
            </div>
            <div class="card-footer">
                <a href="#" class="text-dark">Link To Data 
                &nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-arrow-right" aria-hidden="true"></i></a>
            </div>
        </div>
    </div>
</div>