Cards

Left Alignment

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Center Alignment

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Right Alignment

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Code Here:


									
<div class="p-4">
	<h5>Left Alignment</h5>
	<div class="card mb-0 bg-light mt-3">
	    <div class="card-body">
	        <h4 class="card-title">Special title treatment</h4>
	        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
	        <a href="javascript:void(0)" class="btn btn-info">Go somewhere</a>
	    </div>
	</div>
</div>
<div class="p-4 border-top">
	<h5>Center Alignment</h5>
	<div class="card text-center mb-0 mt-3 bg-light">
	    <div class="card-body">
	        <h4 class="card-title">Special title treatment</h4>
	        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
	        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
	    </div>
	</div>
</div>
<div class="p-4 border-top">
	<h5>Right Alignment</h5>
	<div class="card text-right mb-0 mt-3 bg-light">
	    <div class="card-body">
	        <h4 class="card-title">Special title treatment</h4>
	        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
	        <a href="javascript:void(0)" class="btn btn-inverse">Go somewhere</a>
	    </div>
	</div>
</div>		
									
								

Color Cards

Card Title

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Card Title

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Card Title

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Card Title

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Code Here:


									
<div class="row">
	<div class="col-md-6">
		<div class="card shadow-sm">
            <div class="row">
                <div class="col-12">
                    <div class="card border-dark mb-0">
					    <div class="card-header bg-dark">
					        <h4 class="mb-0 text-white">Card Title</h4></div>
					    <div class="card-body">
					        <h3 class="card-title">Special title treatment</h3>
					        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
					        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
					    </div>
					</div>
                </div>
            </div>
        </div>
	</div>
	<div class="col-md-6">
		<div class="card shadow-sm">
            <div class="row">
                <div class="col-12">
                    <div class="card border-info mb-0">
					    <div class="card-header bg-info">
					        <h4 class="mb-0 text-white">Card Title</h4></div>
					    <div class="card-body">
					        <h3 class="card-title">Special title treatment</h3>
					        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
					        <a href="javascript:void(0)" class="btn btn-inverse">Go somewhere</a>
					    </div>
					</div>
                </div>
            </div>
        </div>
	</div>
	<div class="col-md-6">
		<div class="card shadow-sm">
            <div class="row">
                <div class="col-12">
                    <div class="card border-primary mb-0">
					    <div class="card-header bg-primary">
					        <h4 class="mb-0 text-white">Card Title</h4></div>
					    <div class="card-body">
					        <h3 class="card-title">Special title treatment</h3>
					        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
					        <a href="javascript:void(0)" class="btn btn-inverse">Go somewhere</a>
					    </div>
					</div>
                </div>
            </div>
        </div>
	</div>
	<div class="col-md-6">
		<div class="card shadow-sm">
            <div class="row">
                <div class="col-12">
                    <div class="card border-danger mb-0">
					    <div class="card-header bg-danger">
					        <h4 class="mb-0 text-white">Card Title</h4></div>
					    <div class="card-body">
					        <h3 class="card-title">Special title treatment</h3>
					        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
					        <a href="javascript:void(0)" class="btn btn-inverse">Go somewhere</a>
					    </div>
					</div>
                </div>
            </div>
        </div>
	</div>
</div>
									
								

Line Cards

120

News Feed

150

Invoices

450

Revenue

100

Sales

Code Here:


									
<div class="row">
	<div class="col-md-6">
		<div class="card border-bottom shadow border-info">
	        <div class="card-body">
	            <div class="d-flex no-block align-items-center">
	                <div>
	                    <h2>120</h2>
	                    <h6 class="text-info">News Feed</h6>
	                </div>
	                <div class="ml-auto">
	                    <h2 class="text-info mb-0"><i class="ti-notepad"></i></h2>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>
	<div class="col-md-6">
		<div class="card border-bottom shadow border-cyan">
	        <div class="card-body">
	            <div class="d-flex no-block align-items-center">
	                <div>
	                    <h2>150</h2>
	                    <h6 class="text-cyan">Invoices</h6>
	                </div>
	                <div class="ml-auto">
	                    <h2 class="text-cyan mb-0"><i class="ti-clipboard"></i></h2>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>
	<div class="col-md-6">
		<div class="card border-bottom shadow border-success">
	        <div class="card-body">
	            <div class="d-flex no-block align-items-center">
	                <div>
	                    <h2>450</h2>
	                    <h6 class="text-success">Revenue</h6>
	                </div>
	                <div class="ml-auto">
	                    <h2 class="text-success mb-0"><i class="ti-wallet"></i></h2>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>
	<div class="col-md-6">
		<div class="card border-bottom shadow border-orange">
	        <div class="card-body">
	            <div class="d-flex no-block align-items-center">
	                <div>
	                    <h2>100</h2>
	                    <h6 class="text-orange">Sales</h6>
	                </div>
	                <div class="ml-auto">
	                    <h2 class="text-orange mb-0"><i class="ti-stats-down"></i></h2>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>
	</div>
									
								

Card Groups

Unique Visit

1200


12056


145

Total Visit

1200


21456


145

Bounce rate

1200


12465


145

Code Here:


									
<div class="card-group">
    <!-- Column -->
    <div class="card">
        <div class="card-body text-center">
            <h4 class="text-center text-info">Unique Visit</h4>
            <h2>1200</h2>
            <div class="row p-t-10 p-b-10">
                <!-- Column -->
                <div class="col text-center align-self-center">
                    <div data-label="20%" class="css-bar m-b-0 css-bar-primary css-bar-20"><i class="display-6 mdi mdi-account-circle"></i></div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-sm-12">
                    <h4 class="font-medium m-b-0"><i class="ti-angle-up text-success"></i> <br> 12056</h4>
                </div>
                <div class="col-md-6 col-sm-12">
                    <h4 class="font-medium m-b-0"><i class="ti-angle-down text-danger"></i> <br> 145</h4>
                </div>
            </div>
        </div>
    </div>
    <!-- Column -->
    <!-- Column -->
    <div class="card">
        <div class="card-body text-center">
            <h4 class="text-center text-danger">Total Visit</h4>
            <h2>1200</h2>
            <div class="row p-t-10 p-b-10">
                <!-- Column -->
                <div class="col text-center align-self-center">
                    <div data-label="20%" class="css-bar m-b-0 css-bar-danger css-bar-20"><i class="display-6 mdi mdi-star-circle"></i></div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-sm-12">
                    <h4 class="font-medium m-b-0"><i class="ti-angle-up text-success"></i> <br> 21456</h4>
                </div>
                <div class="col-md-6 col-sm-12">
                    <h4 class="font-medium m-b-0"><i class="ti-angle-down text-danger"></i> <br> 145</h4>
                </div>
            </div>
        </div>
    </div>
    <!-- Column -->
    <!-- Column -->
    <div class="card">
        <div class="card-body text-center">
            <h4 class="text-center text-cyan">Bounce rate</h4>
            <h2>1200</h2>
            <div class="row p-t-10 p-b-10">
                <!-- Column -->
                <div class="col text-center align-self-center">
                    <div data-label="20%" class="css-bar m-b-0 css-bar-success css-bar-20"><i class="display-6 mdi mdi-briefcase-check"></i></div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-sm-12">
                    <h4 class="font-medium m-b-0"><i class="ti-angle-up text-success"></i> <br> 12465</h4>
                </div>
                <div class="col-md-6 col-sm-12">
                    <h4 class="font-medium m-b-0"><i class="ti-angle-down text-danger"></i> <br> 145</h4>
                </div>
            </div>
        </div>
    </div>
    <!-- Column -->
</div>
									
								
All Rights Reserved by Severny. Designed and Developed by WrapPixel.