Card
Simple Card
Lorem Ipsum
Lorem Ipsum
<div class="card">
<p class="card-title">Lorem Ipsum</p>
<div class="card-body"> . . . </div>
</div>
<div class="card outlined-card">
<p class="card-title">Lorem Ipsum</p>
<div class="card-body"> . . . </div>
</div>
Cards with Images
Lorem Ipsum
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore sapiente, sequi atque esse animi possimus iste hic cumque voluptatibus quisquam. Nam cum maxime iusto nihil minus tenetur eligendi exercitationem culpa.
Lorem Ipsum
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore sapiente, sequi atque esse animi possimus iste hic cumque voluptatibus quisquam. Nam cum maxime iusto nihil minus tenetur eligendi exercitationem culpa.
<div class="card outlined-card">
<img class="card-img" src="..." alt="..." />
<div class="card-content pa-2 px-4">
<p class="card-title">Lorem Ipsum</p>
<div class="card-body"> . . . </div>
</div>
</div>
<div class="card outlined-card flex">
<img class="card-img" src="..." alt="..." />
<div class="card-content pa-2 px-4">
<p class="card-title">Lorem Ipsum</p>
<div class="card-body"> . . . </div>
</div>
</div>
Card with Overlay
<div class="card">
<img class="card-img" src="..." alt="..." />
<div class="card-overlay">
<div class="card-title">Lorem Ipsum</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Est vitae, perferendis natus molestias repudiandae labore
amet. Eius impedit sequi iste necessitatibus. Facilis repudiandae
veniam provident consequatur eum error facere tenetur.
</p>
</div>
</div>
E-commerce Card
Sneakers
₹ 1500 (-20%)
₹ 1200
<div class="card outlined-card">
<img class="card-img" src="..." alt="..." />
<div class="card-badge">New</div>
<div class="card-content">
<p>Sneakers</p>
<div class="card-title">Maroon Plimsoll</div>
<div class="card-price">
<p>
<span class="price-before"> ₹ 1500 </span>
<span class="price-discount"> (-20%) </span>
</p>
<span class="price-now"> ₹ 1200 </span>
</div>
</div>
</div>