Card Image
<div class="card-img">
<img src="img/img-w-03.jpg" alt="img-w-03.jpg">
</div>
Date and Time Formats
13 November, 2019
Jan 21, 2019
25-11-2019
2 min ago
5 hours ago
3 day ago
2 week ago
6 month ago
<p class="date">13 November, 2019</p> <p class="date">Jan 21, 2019</p> <p class="date">25-11-2019</p> <p class="date">2 min ago</p> <p class="date">5 hours ago</p> <p class="date">3 day ago</p> <p class="date">2 week ago</p> <p class="date">6 month ago</p>
Card Title
Mist enveloped the ship three hours out from port.
Mist enveloped the ship three hours out from port.
<h2 class="card-title">Mist enveloped the ship three hours out from port.</h2>
<h2 class="card-title">
<a href="#0">Mist enveloped the ship three hours out from port.</a>
</h2>
Card Short Details
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, quidem! Cum doloribus rem nam qui ipsa, pariatur dicta eum itaque exercitationem tempore labore. Ducimus reprehenderit nemo id quo, inventore nam!
<p class="card-short-details">Lorem ipsum dolor sit............</p>
Post Overview
232
26
136
26 Likes
136 Comments
<div class="post-overview">
<p><span class="ti-eye"></span>232</p>
<p><span class="ti-heart"></span>26</p>
<p><span class="ti-comments"></span>136</p>
</div>
<div class="post-overview">
<p><span class="ti-heart"></span>26 Likes</p>
<p><span class="ti-comments"></span>136 Comments</p>
</div>
Post User
<!-- post-user 1 -->
<div class="post-user">
<img src="img/user-img/user_03.jpg" alt="">
<div class="post-user-info">
<h3 class="user-name">Jack Barker</h3>
<p class="user-role">Admin</p>
</div>
</div>
<!-- post-user 2 -->
<div class="post-user post-user-2">
<img src="img/user-img/user_02.jpg" alt="">
<div class="post-user-info">
<h3 class="user-name">Jack Barker</h3>
</div>
</div>
<!-- post-user 3 -->
<div class="post-user post-user-3">
<img src="img/user-img/user_03.jpg" alt="">
<div class="post-user-info">
<h3 class="user-name">Alex Smith</h3>
</div>
</div>
<!-- post-user 4 -->
<div class="post-user post-user-4">
<img src="img/user-img/user_02.jpg" alt="">
<div class="post-user-info">
<h3 class="user-name">Alex Smith</h3>
<p class="user-role">Blogger</p>
</div>
</div>
<!-- post-user 5 -->
<div class="post-user post-user-5">
<img src="img/user-img/user_01.jpg" alt="">
<div class="post-user-info">
<h3 class="user-name">Alex Smith</h3>
</div>
</div>
Tags
<!-- tags style 1 -->
<div class="tags">
<a href="#">#ui</a>
<a href="#">#ux</a>
<a href="#">#art</a>
<a href="#">#graph</a>
</div>
<!-- tags style 2 -->
<div class="tags tags-style-2">
<a href="#">#ui</a>
<a href="#">#ux</a>
<a href="#">#art</a>
<a href="#">#graph</a>
</div>
<!-- tags style 3 -->
<div class="tags tags-style-3">
<a href="#">#ui</a>
<a href="#">#ux</a>
<a href="#">#art</a>
<a href="#">#graph</a>
</div>
<!-- tags style 4 -->
<div class="tags tags-style-4">
<a href="#">#ui</a>
<a href="#">#ux</a>
<a href="#">#art</a>
<a href="#">#graph</a>
</div>
Links and Buttons styles
<!-- link/button --> <a class="link" href="#0">Read More<span class="ti-angle-right"></span></a> <!-- link/button style 1 --> <a class="link link-style-1" href="#0">Read More</a> <!-- link/button style 2 --> <a class="link link-style-2" href="#0">Explore</a> <!-- link/button style 3 --> <a class="link link-style-3" href="#0">Read More</a> <!-- link/button style 4 --> <a class="link link-style-4" href="#0">Explore</a> <!-- link/button style 5 --> <a class="link link-style-5" href="#0">Read More</a> <!-- link/button style 6 --> <a class="link link-style-6" href="#0">Explore</a>