Bootstrap Cards - Component Snippets
Bootstrap Cards is a powerful and universal content container that will undoubtedly change the way you think about web design. It's not just a card. It's not just a modal. It's not just a dropdown or a menu. Bootstrap Cards is all of these and more, and it does it with style!
Card Style 1
<!--====== CARD PART START ======-->
<section class="card-area pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-4 col-md-7 col-sm-9">
<div class="single-card card-style-one">
<div class="card-image">
<img src="https://cdn.ayroui.com/1.0/images/card/card-1.jpg" alt="Image" />
</div>
<div class="card-content">
<h4 class="card-title">
<a href="javascript:void(0)">Item title is here</a>
</h4>
<p class="text">
Short description for the ones who look for something new
</p>
</div>
</div>
<!-- single-card -->
</div>
<!-- col -->
<div class="col-lg-4 col-md-7 col-sm-9">
<div class="single-card card-style-one">
<div class="card-image">
<img src="https://cdn.ayroui.com/1.0/images/card/card-2.jpg" alt="Image" />
</div>
<div class="card-content">
<h4 class="card-title">
<a href="javascript:void(0)">Item title is here</a>
</h4>
<p class="text">
Short description for the ones who look for something new
</p>
</div>
</div>
<!-- single-card -->
</div>
<!-- col -->
<div class="col-lg-4 col-md-7 col-sm-9">
<div class="single-card card-style-one">
<div class="card-image">
<img src="https://cdn.ayroui.com/1.0/images/card/card-3.jpg" alt="Image" />
</div>
<div class="card-content">
<h4 class="card-title">
<a href="javascript:void(0)">Item title is here</a>
</h4>
<p class="text">
Short description for the ones who look for something new
</p>
</div>
</div>
<!-- single-card -->
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!--====== CARD PART ENDS ======-->
/*===========================
card-01 css
===========================*/
.single-card {
box-shadow: var(--shadow-1);
border-radius: 8px;
overflow: hidden;
margin-top: 30px;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.single-card:hover {
box-shadow: var(--shadow-4);
}
.single-card .card-image img {
width: 100%;
height: 100%;
}
.single-card .card-content {
padding: 16px;
}
.single-card .card-content .card-title {
margin-bottom: 0;
}
.single-card .card-content .card-title a {
color: var(--black);
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.single-card .card-content .card-title a:hover {
color: var(--primary);
}
.single-card .card-content .text {
color: var(--dark-3);
margin-top: 8px;
}
Card Style 2
![](https://api.ayroui.com/images/product/e92d8f88-d36e-4fb9-9e7c-2e6df467db35.jpg)
Card Style 3
![](https://api.ayroui.com/images/product/1e6d3cb9-b891-4b22-a5be-0f4c7a1677b0.jpg)
Card Style 4
![](https://api.ayroui.com/images/product/53bcc544-644a-4da1-975f-a05220306a33.jpg)
Card Style 5
![](https://api.ayroui.com/images/product/28d4d31f-74f1-4260-9c59-4d608a2ed348.jpg)
Card Style 6
![](https://api.ayroui.com/images/product/6bdfd922-0d21-418b-8d77-5f72a7abdd22.jpg)
Card Style 7
![](https://api.ayroui.com/images/product/94fb6615-8a5c-4cfd-a7d5-9f4e5cd5372b.jpg)
Card Style 8
![](https://api.ayroui.com/images/product/6aebc2fe-fdde-4954-ab93-1be94fa53b09.jpg)
Card Style 9
![](https://api.ayroui.com/images/product/1c3194f4-26d9-4b9a-a7be-63be8bb6c131.jpg)
Card Style 10
![](https://api.ayroui.com/images/product/0b1c3bcd-a60f-4734-9655-2347521944e6.jpg)
Card Style 11
![](https://api.ayroui.com/images/product/6d8cb285-6773-4787-a517-785c55bd27d6.jpg)
Card Style 12
![](https://api.ayroui.com/images/product/d693e241-478e-4bc5-9388-b0a2fe7909b1.jpg)
Card Style 13
![](https://api.ayroui.com/images/product/8a3c81d5-3105-44b1-9e0e-da667283d584.jpg)
Card Style 14
![](https://api.ayroui.com/images/product/942f0d8b-6d37-4b43-b68c-4f76794e4674.jpg)