Cards.
Cards are used to display content in a structured and organized manner. They are used to display content in a structured and organized manner.
Class names
Start with card, then add modifiers when needed.
| Class name | Description |
|---|---|
card |
Normal card with button |
card-head |
A card with heading |
card-animation |
Card hover animation |
Crads
The default NodexUI cards
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.
<div class="card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>
<button><a href="#">Button</a></button>
</div>Card style with Heading
Card with title heading.
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.
<div class="card">
<h3 class="card-head">Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>
<button><a href="#">Button</a></button>
</div>Card animation
You can change the color of the button and the text of the button.
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.
<div class="card-animation card">
<h3 class="card-head">Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>
<button><a href="#">Button</a></button></div>Card style wit dots
Card with three dots.
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.
<div class="card">
<span class="dot-1"></span><span class="dot-2"></span><span class="dot-3"></span>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>
<button><a href="#">Button</a></button></div>Card colors
You can change the color of the cards.
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.
<div class="card bg-blue-100"></div>
<div class="card bg-green-100"></div>
<div class="card bg-red-100"></div>
<div class="card bg-yellow-100"></div>
<div class="card bg-purple-100"></div>
<div class="card bg-white-100"></div>
