in order to use the card component first we create a tag with class card-block this will be the card wrapper ( the container ) which you can use it for sorting the layout with the grid system columns classes then creating the content wrapper element with class content-box
now you got the basic container of the card what is left is building the content components you can create an responsive aspect ratio Images without scratching and a title for the card a description action btns footer and more see the example below to know and understand what you can put and use in the card component.
the standard card content contains a responsive media element and a title element with description paragraph then goes the footer element with a read more button/link and basic posting info ,, there is a lot of card content components and each one will be explained as showing in the examples below.
<!-- Card Wrapper -->
<div class="card-block">
<!-- Card Content -->
<div class="content-box">
<!-- Image -->
<a href="#" class="card-media" data-src="<http://via.placeholder.com/320x250>"></a>
<!-- Title -->
<a href="#"><h3 class="title">The Card Title Goes Right Here For Contetn Below</h3></a>
<!-- Description -->
<p>Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam , Proin mattis lacinia justo.</p>
<!-- Action Footer -->
<div class="action-footer">
<!-- Action Link -->
<a href="#" class="ti-arrow-left-c more-btn">Read More</a>
<!-- Card Info -->
<div class="info">
<span class="ti-heart">153</span>
<span class="ti-chatbubbles">250</span>
</div>
<!-- // Card Info -->
</div>
<!-- // Action Footer -->
</div>
<!-- Card Content -->
</div>
<!-- // Card Wrapper -->
first component is a heading bar contains a username with avatar and a date element and for an order to use them just create the head wrapper div with class card-head then create inside of it an a username or title element with class title and inside that title element you can create an image tag for avatar and the second element is for some info like date and goes with class date
and for the second component the Media Component it can be any sort of this data images, videos, iframes and for proper usage create a wrapper div with class name card-media if you wanna put a responsive aspect ratio image use the data-src=”imageURL” attribute and if you want to use another media tag just put the media tag whatever it is inside the card-media wrapper tag and for the full width media component add the class name full to the card media tag element.
<!-- Card Wrapper -->
<div class="card-block">
<!-- Card Content -->
<div class="content-box">
<!-- Head -->
<div class="card-head">
<h3 class="title"><img src="<http://via.placeholder.com/50x50>" alt="avatar"> Abdullah Ramadan</h3>
<span class="date">15 oct 2018</span>
</div>
<!-- Image -->
<a href="#" class="card-media full" data-src="<http://via.placeholder.com/320x250>"></a>
<!-- Title -->
<a href="#"><h3 class="title">Summary Head Line</h3></a>
<!-- Description -->
<p>Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam , Proin mattis lacinia justo.</p>
<!-- Action Footer -->
<div class="action-footer">
<!-- Action Link -->
<a href="#" class="ti-arrow-left-c more-btn">Read More</a>
<!-- Card Info -->
<div class="info">
<span class="ti-heart">153</span>
<span class="ti-chatbubbles">250</span>
</div>
<!-- // Card Info -->
</div>
<!-- // Action Footer -->
</div>
<!-- Card Content -->
</div>
<!-- // Card Wrapper -->
The Card Can Be Horizontally Media Object Style Mode and to use this feature in the card is adding class for the Content Wrapper content-box a class name horizontal and right inside of it pu a media components then after setting up the media component create a div container with class nam content-wrap for the other card components elements.
<!-- Card Wrapper -->
<div class="card-block">
<!-- Card Content -->
<div class="content-box horizontal">
<!-- Image -->
<a href="#" class="card-media" data-src="<http://via.placeholder.com/320x250>"></a>
<!-- Content -->
<div class="content-wrap">
<!-- Head -->
<div class="card-head">
<h3 class="title"><img src="<http://via.placeholder.com/50x50>" alt="avatar"> Abdullah Ramadan</h3>
<span class="date">15 oct 2018</span>
</div>
<!-- Title -->
<a href="#"><h3 class="title">Summary Head Line</h3></a>
<!-- Description -->
<p>Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam , Proin mattis lacinia justo.</p>
<!-- Action Footer -->
<div class="action-footer">
<!-- Action Link -->
<a href="#" class="ti-arrow-left-c more-btn">Read More</a>
<!-- Card Info -->
<div class="info">
<span class="ti-heart">153</span>
<span class="ti-chatbubbles">250</span>
</div>
<!-- // Card Info -->
</div>
<!-- // Action Footer -->
</div>
</div>
<!-- // Card Content -->
</div>
<!-- // Card Wrapper -->
there is another cool mode for the card that is the overlayed content mode you can see the example below ,, and for order to use this mode add to the Media Component a class name overlayed then create a div with class name content inside of it after doing that you can move the title and the description paragraph elements in it.
<!-- Card Wrapper -->
<div class="card-block">
<!-- Card Content -->
<div class="content-box">
<!-- Head -->
<div class="card-head">
<h3 class="title"><img src="<http://via.placeholder.com/50x50>" alt="avatar"> Abdullah Ramadan</h3>
<span class="date">15 oct 2018</span>
</div>
<!-- Background Image -->
<div class="card-media full overlayed" data-src="<http://via.placeholder.com/320x250>">
<!-- Overlay -->
<div class="content">
<!-- Title -->
<a href="#"><h3 class="title">Summary Head Line</h3></a>
<!-- Description -->
<p>Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam , Proin mattis lacinia justo.</p>
</div>
</div>
<!-- Action Footer -->
<div class="action-footer">
<!-- Action Link -->
<a href="#" class="ti-arrow-left-c more-btn">Read More</a>
<!-- Card Info -->
<div class="info">
<span class="ti-heart">153</span>
<span class="ti-chatbubbles">250</span>
</div>
<!-- // Card Info -->
</div>
<!-- // Action Footer -->
</div>
<!-- // Card Content -->
</div>
<!-- // Card Wrapper -->
all of the card components are Optional and can be removed without affecting the card theme at all as the example below shows a card without media component.
<!-- Card Wrapper -->
<div class="card-block">
<!-- Card Content -->
<div class="content-box">
<!-- Head -->
<div class="card-head">
<h3 class="title"><img src="<http://via.placeholder.com/50x50>" alt="avatar"> Abdullah Ramadan</h3>
<span class="date">15 oct 2018</span>
</div>
<!-- Title -->
<a href="#"><h3 class="title">Summary Head Line</h3></a>
<!-- Description -->
<p>Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam , Proin mattis lacinia justo.</p>
<!-- Action Footer -->
<div class="action-footer">
<!-- Action Link -->
<a href="#" class="ti-arrow-left-c more-btn">Read More</a>
<!-- Card Info -->
<div class="info">
<span class="ti-heart">153</span>
<span class="ti-chatbubbles">250</span>
</div>
<!-- // Card Info -->
</div>
<!-- // Action Footer -->
</div>
<!-- // Card Content -->
</div>
<!-- // Card Wrapper -->
in order to use the product card add the class product-card to the Card Wrapper Element after that you will have an extra card content components such as floating components, price, buttons hover effect with other general tornado predesigned elements ,, you can see the code example and learn how the new components work.