Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Show All

Help Desk
  1. Ui Elements
  2. Card
Card title

He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff
sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. 


<div class="card dz-card dz-tab-area" id="card-title-1">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative border-b border-[#E6E6E6] dark:border-[#444444]">
		<h5 class="card-title capitalize">Card title</h5>
	</div>
	<div class="p-[1.125rem]">
		<p class="card-text">He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff <br> sections. The bedding was hardly able to cover it and seemed ready to
			slide off any moment.
		</p>
	</div>
</div>
Card title-2

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little
bit longer. Some quick example text to build the bulk

Last updated 3 mins ago

Go somewhere 

<div class="card dz-card dz-tab-area" id="card-title-2">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative border-b border-[#E6E6E6] dark:border-[#444444]">
		<h5 class="card-title capitalize">Card title-2</h5>
	</div>
	<div class="p-[1.125rem]">
		<p class="card-text">This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little <br> bit longer. Some quick example text to build the bulk</p>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#444444] sm:text-sm text-xs sm:flex justify-between items-center">
		<div class="card-footer-link mb-4 mb-sm-0">
			<p class="card-text mb-4 inline">Last updated 3 mins ago</p>
		</div>

		<a href="javascript:void(0);" class="inline-block rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300">Go somewhere</a>
	</div>	
</div>
Card Title-3

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content

Go somewhere

Last updateed 3 min ago


<div class="card dz-card dz-tab-area" id="card-title-2">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative border-b border-[#E6E6E6] dark:border-[#444444]">
		<h5 class="card-title capitalize">Card title-2</h5>
	</div>
	<div class="p-[1.125rem]">
		<p class="card-text">This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little <br> bit longer. Some quick example text to build the bulk</p>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#444444] sm:text-sm text-xs sm:flex justify-between items-center">
		<div class="card-footer-link mb-4 mb-sm-0">
			<p class="card-text mb-4 inline">Last updated 3 mins ago</p>
		</div>
		<a href="javascript:void(0);" class="inline-block rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300">Go somewhere</a>
	</div>	
</div>
Special title treatment

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

Go somewhere 

	<div class="card dz-card dz-tab-area text-center" id="special-title">
		<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative border-b border-[#E6E6E6] dark:border-[#444444]">
			<h5 class="card-title capitalize">Special title treatment</h5>
		</div>
		<div class="p-[1.125rem] custom-tab-1">
			<ul class="nav nav-tabs card-body-tabs flex flex-wrap border-b border-b-color mb-4">
				<li class="nav-item"><a class="nav-link px-3 py-[5px] text-primary border-b-[0.1875rem] block duration-500 text-sm border-primary focus:border-primary dark:hover:border-b-color active" href="javascript:void(0);">Active</a>
				</li>
				<li class="nav-item"><a class="nav-link px-3 py-[5px] text-primary border-b-[0.1875rem] border-transparent block duration-500 text-sm hover:border-primary focus:border-primary dark:hover:border-b-color" href="javascript:void(0);">Link</a>
				</li>
				<li class="nav-item"><a class="nav-link px-3 py-[5px] text-body-color border-b-[0.1875rem] border-transparent block duration-500 text-sm pointer-events-none disabled" href="javascript:void(0);">Disabled</a>
				</li>
			</ul>
			<p class="card-text mb-4">With supporting text below as a natural lead-in to additional content.</p><a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 btn-card">Go somewhere</a>
		</div>	
	</div>
Primary card

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Last updateed 3 min ago 

<div class="card dz-card dz-tab-area bg-primary text-white" id="primary-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative border-b border-[#E6E6E6] dark:border-[#444444]">
		<h5 class="card-title capitalize text-white">Primary card</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4 text-white">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-white text-primary btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#444444] sm:text-sm text-xs bg-transparent border-0 text-white">Last updateed 3 min ago
	</div>	
</div>
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Last updateed 3 min ago 

<div class="card dz-card dz-tab-area bg-secondary text-white" id="secondary-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative border-b border-[#E6E6E6] dark:border-[#444444]">
		<h5 class="card-title capitalize text-white">Secondary card title</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4 text-white">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-white text-secondary btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#444444] sm:text-sm text-xs bg-transparent border-0 text-white">Last updateed 3 min ago
	</div>	
</div>
Success card

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Last updateed 3 min ago 

<div class="card dz-card dz-tab-area bg-success text-white" id="success-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative border-b border-[#E6E6E6] dark:border-[#444444]">
		<h5 class="card-title capitalize text-white">Success card</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4 text-white">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-white text-success  btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#444444] sm:text-sm text-xs bg-transparent border-0 text-white">Last updateed 3 min ago
	</div>		
</div>
Danger card

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Last updateed 3 min ago 

<div class="card dz-card dz-tab-area bg-danger text-white" id="danger-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative border-b border-[#E6E6E6] dark:border-[#444444]">
		<h5 class="card-title capitalize text-white">Danger card</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4 text-white">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="javascript:void(0);" class=" inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-white text-danger btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#444444] sm:text-sm text-xs bg-transparent border-0 text-white">Last updateed 3 min ago
	</div>	
</div>
Warning card

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Last updateed 3 min ago 

<div class="card dz-card dz-tab-area bg-warning text-white" id="warning-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative border-b border-[#E6E6E6] dark:border-[#444444]">
		<h5 class="card-title capitalize text-white">Warning card</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4 text-white">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-white text-warning btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#444444] sm:text-sm text-xs bg-transparent border-0 text-white">Last updateed 3 min ago
	</div>
</div>
Info card

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Last updateed 3 min ago 

<div class="card dz-card dz-tab-area bg-info text-white" id="info-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative border-b border-[#E6E6E6] dark:border-[#444444]">
		<h5 class="card-title capitalize text-white">Info card</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4 text-white">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-white text-info btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#444444] sm:text-sm text-xs bg-transparent border-0 text-white">
		Last updateed 3 min ago
	</div>		
</div>
Light card

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Last updateed 3 min ago 

<div class="card dz-card dz-tab-area bg-d-light-2 text-black" id="light-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative border-b border-[#E6E6E6] dark:border-[#444444]">
		<h5 class="card-title capitalize">Light card</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-white text-dark btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#444444] sm:text-sm text-xs text-dark bg-transparent border-0">Last updateed 3 min ago
	</div>	
</div>
Dark card

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Last updateed 3 min ago 

<div class="card dz-card dz-tab-area bg-dark text-white" id="dark-card">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative border-b border-[#E6E6E6] dark:border-[#444444]">
		<h5 class="card-title capitalize text-white">Dark card</h5>
	</div>
	<div class="p-[1.125rem] mb-0">
		<p class="card-text mb-4 text-white">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		<a href="javascript:void(0);" class="inline-block lock rounded font-medium text-[15px] max-xl:text-xs leading-5 py-[0.719rem] max-xl:px-4 px-[1.563rem] max-xl:py-2.5 border border-transparent bg-white text-dark  btn-card">Go
			somewhere</a>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#444444] sm:text-sm text-xs bg-transparent border-0 text-white">Last updateed 3 min ago
	</div>	
</div>
Card image cap
Card title-4

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago


<div class="card dz-card dz-tab-area overflow-hidden" id="card-title-4">
	<img class="w-full img-fluid" src="assets/images/card/1.png" alt="Card image cap">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative border-b border-[#E6E6E6] dark:border-[#444444]">
		<h5 class="card-title capitalize">Card title-4</h5>
	</div>
	<div class="p-[1.125rem]">
		<p class="card-text mb-4">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
		<p class="card-text mb-4">Last updated 3 mins ago</p>
	</div>	
</div>
Card image cap
Card title-5

He lay on his armour-like back, and if he lifted his head a little

Card footer

Card link 

<div class="card dz-card dz-tab-area overflow-hidden" id="card-title-5">
	<img class="w-full img-fluid" src="assets/images/card/2.png" alt="Card image cap">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative border-b border-[#E6E6E6] dark:border-[#444444]">
		<h5 class="card-title capitalize">Card title-5</h5>
	</div>
	<div class="p-[1.125rem]">
		<p class="card-text mb-4">He lay on his armour-like back, and if he lifted his head a little
		</p>
	</div>
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#444444] sm:text-sm text-xs text-body-color sm:flex justify-between items-center">
		<p class="card-text mb-4 inline">Card footer</p>
		<a href="javascript:void(0);" class="card-link float-right">Card link</a>
	</div>	
</div>
Card title-6

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little

Card image cap

Card footer

Card link 

<div class="card dz-card dz-tab-area" id="card-title-6">
	<div class="card-header flex flex-wrap justify-between items-center sm:p-5 sm:pt-6 p-4 pt-5 max-sm:pb-5 relative border-b border-[#E6E6E6] dark:border-[#444444]">
		<h5 class="card-title capitalize">Card title-6</h5>
	</div>
	<div class="p-[1.125rem]">
		<p class="card-text mb-4">This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little</p>
	</div>
	<img class="w-full img-fluid" src="assets/images/card/3.png" alt="Card image cap">
	<div class="card-footer py-4 px-6 border-t border-[#E6E6E6] dark:border-[#444444] sm:text-sm text-xs text-body-color sm:flex justify-between items-center">
		<p class="card-text mb-4 inline">Card footer</p>
		<a href="javascript:void(0);" class="card-link float-right">Card link</a>
	</div>		
</div>

Copyright © Developed by DexignZone 2024