Hello world!
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Card Component
The Card component in the Arts Oven UI Component Library is designed to encapsulate content and actions related to a single topic. Cards are versatile and can be used for displaying images, text, and interactive elements in a visually appealing manner.
Card
<div class="card">
<div class="card-body">
<h2 class="card-title">Hello world!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="card-footer">
<button class="btn btn-primary">Buy Now!</button>
</div>
</div>
</div>
<div className="card">
<div className="card-body">
<h2 className="card-title">Hello world!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div className="card-footer">
<button className="btn btn-primary">Buy Now!</button>
</div>
</div>
</div>
Card with Image Header
Hello world!
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Hello world!
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Hello world!
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="card">
<img src="https://placehold.co/600x400"/>
<div class="card-body">
<h2 class="card-title">Hello world!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="card-footer justify-end">
<button class="btn btn-primary">Add Cart</button>
</div>
</div>
</div>
<div className="card">
<img src="https://placehold.co/600x400"/>
<div className="card-body">
<h2 className="card-title">Hello world!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div className="card-footer justify-end">
<button className="btn btn-primary">Add Cart</button>
</div>
</div>
</div>
Card with Image Footer
Hello world!
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Hello world!
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Hello world!
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="card">
<div class="card-body">
<h2 class="card-title">Hello world!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="card-footer justify-end">
<button class="btn btn-primary">Add Cart</button>
</div>
</div>
<img src="https://placehold.co/600x400"/>
</div>
<div class="card">
<div className="card-body">
<h2 className="card-title">Hello world!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div className="card-footer justify-end">
<button className="btn btn-primary">Add Cart</button>
</div>
</div>
<img src="https://placehold.co/600x400"/>
</div>
Image Card
<div class="card">
<img src="https://via.placeholder.com/600x400" alt="Card Image"/>
<div class="card-img-overlay">
<div class="card-body">
<h2 class="card-title">Hello world!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div className="card">
<img src="https://via.placeholder.com/600x400" alt="Card Image"/>
<div className="card-img-overlay">
<div className="card-body">
<h2 className="card-title">Hello world!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
Image Card with Action
<div class="card">
<img src="https://via.placeholder.com/600x400" alt="Card Image"/>
<div class="card-img-overlay">
<div class="card-body">
<h2 class="card-title">Hello world!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="card-footer">
<button class="btn btn-primary">Learn More</button>
</div>
</div>
</div>
</div>
<div className="card">
<img src="https://via.placeholder.com/600x400" alt="Card Image"/>
<div className="card-img-overlay">
<div className="card-body">
<h2 className="card-title">Hello world!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div className="card-footer">
<button className="btn btn-primary">Learn More</button>
</div>
</div>
</div>
</div>
Contribute ideas!
Share Your Ideas! While we can’t guarantee that every request will be added, we will definitely consider your suggestions for future updates.