Xtreme admin Template - The Ultimate Multipurpose admin template

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>

Social Cards

456

Following

1,456

Friends

456

Tweets

1,456

Followers

456

Following

1,456

Followers

456

Contacts

1,456

Following

Code Here:

									
<div class="row">
	<div class="col-md-6">
		<div class="card shadow-sm">
            <div class="row">
                <div class="col-12">
                    <div class="bg-info p-20">
                        <div class="text-center text-white display-6">
                            <i class="ti-facebook"></i>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="d-flex no-block align-items-center">
                            <div>
                                <h3 class="font-medium">456</h3>
                                <h5 class="text-info m-b-0">Following</h5>
                            </div>
                            <div class="ml-auto">
                                <h3 class="font-medium">1,456</h3>
                                <h5 class="text-info m-b-0">Friends</h5>
                            </div>
                        </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="bg-cyan p-20">
                        <div class="text-center text-white display-6">
                            <i class="ti-twitter"></i>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="d-flex no-block align-items-center">
                            <div>
                                <h3 class="font-medium">456</h3>
                                <h5 class="text-cyan m-b-0">Tweets</h5>
                            </div>
                            <div class="ml-auto">
                                <h3 class="font-medium">1,456</h3>
                                <h5 class="text-cyan m-b-0">Followers</h5>
                            </div>
                        </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="bg-success p-20">
                        <div class="text-center text-white display-6">
                            <i class="ti-instagram"></i>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="d-flex no-block align-items-center">
                            <div>
                                <h3 class="font-medium">456</h3>
                                <h5 class="text-success m-b-0">Following</h5>
                            </div>
                            <div class="ml-auto">
                                <h3 class="font-medium">1,456</h3>
                                <h5 class="text-success m-b-0">Followers</h5>
                            </div>
                        </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="bg-dark p-20">
                        <div class="text-center text-white display-6">
                            <i class="ti-skype"></i>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="d-flex no-block align-items-center">
                            <div>
                                <h3 class="font-medium">456</h3>
                                <h5 class="text-dark m-b-0">Contacts</h5>
                            </div>
                            <div class="ml-auto">
                                <h3 class="font-medium">1,456</h3>
                                <h5 class="text-dark m-b-0">Following</h5>
                            </div>
                        </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">
                        <span class="text-info display-6"><i class="ti-notepad"></i></span>
                    </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">
                        <span class="text-cyan display-6"><i class="ti-clipboard"></i></span>
                    </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">
                        <span class="text-success display-6"><i class="ti-wallet"></i></span>
                    </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">
                        <span class="text-orange display-6"><i class="ti-stats-down"></i></span>
                    </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>