Cards
Onekit cards provide a flexible and extensible content container with multiple variants and options.
Card Blogs
Card for make blog grid layout.
Great Layout and Grid
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
New UI Design for 2020
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
<!-- Card -->
<div class="card blog-two border-0 mb-4 mb-lg-0 rounded-3 overflow-hidden shadow-sm">
<div class="blog-two-img">
<a href="#">
<img class="img-fluid" src="assets/img-min/blog/blog3.jpg" alt="alt title">
</a>
</div>
<div class="card-body">
<span class="blog-author">
<a href="#"><img class="avatar-md mt-n-2 rounded-circle" src="assets/img-min/avatar/img3-small.jpg" alt="avatar"></a>
</span>
<div class="card-title">
<h3 class="h5 mb-3"><a href="#">Great Layout and Grid</a></h3>
<div class="text-muted">
<svg class="bi bi-calendar me-2 text-muted" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- End card -->
<!-- Card -->
<div class="card blog-one border-0 mb-4 mb-lg-0 rounded-3 overflow-hidden shadow-sm">
<div class="blog-one-img">
<a href="#">
<img class="img-fluid" src="assets/img-min/blog/blog1.jpg" alt="">
</a>
<div class="blog-one-category p-2 bg-primary">
<a class="text-white font-size-75" href="#">Creative</a>
</div>
</div>
<div class="card-body">
<div class="card-title">
<h3 class="h5 mb-3"><a href="#">New UI Design for 2020</a></h3>
<div class="text-muted">
<svg class="bi bi-calendar me-2 text-muted" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- end card -->
12
May
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque.
New UI Design for 2020
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque.
<!-- Card -->
<div class="card blog-three rounded-3 overflow-hidden border-0 mb-4 mb-lg-0">
<div class="blog-three-img">
<a href="#">
<img class="img-fluid" src="assets/img-min/blog/blog1.jpg" alt="">
</a>
<div class="post-date bg-light p-2">
<span class="date">12</span>
<span class="small">May</span>
</div>
</div>
<div class="card-body px-0">
<div class="card-title">
<h3 class="h5 mb-3"><a href="#">New UI Design for 2020</a></h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque.</p>
</div>
</div><!-- end card -->
<!-- Card -->
<div class="card blog-two mb-4 mb-lg-0 border-0 rounded-3 overflow-hidden hover-shadow-sm z-index-1">
<div class="z-index-n1">
<a href="#">
<img class="img-fluid" src="src/img-min/blog/blog1.jpg" alt="">
</a>
</div>
<div class="card-body bg-white text-center mx-4 mt-n6">
<div class="card-title">
<h3 class="h5 mb-3"><a href="#">New UI Design for 2020</a></h3>
<div class="text-muted">
<svg class="bi bi-calendar me-2 text-muted" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque.</p>
</div>
</div><!-- end card -->
You can read full documentation about card in Bootstrap Documentation