Cards Blocks
Cards provide a flexible and extensible content container with multiple variants and options that can be used for creating a blocks for new,products,user card...etc.
Sass Customize
in order to edit the cards you can use the css class to overide the theme or you can edit it with sass Tornado Folder/SCSS/elements/_cards.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.
Standard Card
in order to use the card component first we create a <div> tag with class card-block this will be
the card wrapper ( the container ) wich you can use it for sorting the layout with the grid system columns class's
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 conponenets you can create an responsive aspect ratio Images without streatching 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 baisc posting info ,,
there is a lot of card content components and each one will be explained as showing in the examples below.
The Card Title Goes Right Here For Contetn Below
Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam , Proin mattis lacinia justo.
<!-- 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>
</div>
</div>
<!-- Card Content -->
</div>
<!-- // Card Wrapper -->
Head Bar and Full Width Media
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 put inside of it an a username or title element with class title and inside that title element
you can put 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 order to use it
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.
Abdullah Ramadan
15 oct 2018 16:20PM
Summary Head Line
Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam , Proin mattis lacinia justo.
<!-- 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 16:20PM</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>
</div>
</div>
<!-- Card Content -->
</div>
<!-- // Card Wrapper -->
Horizontally Mode
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.
Abdullah Ramadan
15 oct 2018 16:20PM
Summary Head Line
Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam , Proin mattis lacinia justo.
<!-- 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 16:20PM</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>
</div>
</div>
</div>
<!-- // Card Content -->
</div>
<!-- // Card Wrapper -->
Overlay Content Mode
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.
Abdullah Ramadan
15 oct 2018 16:20PM
<!-- 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 16:20PM</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>
</div>
</div>
<!-- // Card Content -->
</div>
<!-- // Card Wrapper -->
Removable Components
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.
Abdullah Ramadan
15 oct 2018 16:20PM
Summary Head Line
Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam , Proin mattis lacinia justo.
<!-- 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 16:20PM</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>
</div>
</div>
<!-- // Card Content -->
</div>
<!-- // Card Wrapper -->
Product Card Example
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.
Product Summary Head Line
Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in,
<!-- Card Wrapper -->
<div class="card-block product-card col-12 col-m-5 col-l-4 col-xl-3">
<!-- Card Content -->
<div class="content-box">
<!-- Media Component -->
<div class="card-media full" data-src="img/product-full.png">
<!-- Floating Over Wrapper -->
<div class="floating-content">
<!-- Floating Badge Element -->
<a href="#" class="badge primary floating-drt">Category Name</a>
<!-- Floating Group -->
<div class="floating-dt">
<!-- Rating Stars -->
<a href="#" class="stars">
<span class="ti-star active"></span><span class="ti-star active"></span><span class="ti-star active"></span><span class="ti-star active"></span><span class="ti-star"></span>
</a>
<!-- Badge Element -->
<a href="#" class="badge danger">15% Discount</a>
</div>
</div>
<!-- Hover Component -->
<div class="hvr-component">
<!-- Linked Overlay -->
<a href="#" class="overlay-link"></a>
<!-- Icon Button -->
<a href="#" class="icon-btn ti-search"></a>
<!-- Icon Button -->
<a href="#" class="icon-btn ti-heart"></a>
</div>
</div>
<!-- Title -->
<a href="#"><h3 class="title">Product Summary Head Line</h3></a>
<!-- Description -->
<p>Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, </p>
<!-- Buttons Group -->
<div class="btns-group">
<span class="btn primary outline price">510$ <i>600$</i></span>
<a href="#" class="btn primary ti-cart-add">Add To Cart</a>
</div>
</div>
<!-- // Card Content -->
</div>
<!-- // Card Wrapper -->
User Card Example
in order to use the user card add the class user-card to the Card Wrapper Element after that you will have an extra card content components for the user like avatar,user name and job title,social-btns take a look to the example code below to see the new componenets ad how it works.
<!-- Card Wrapper -->
<div class="card-block user-card col-12 col-m-5 col-l-4 col-xl-3">
<!-- Card Content -->
<div class="content-box">
<!-- Cover -->
<div class="card-media full" data-src="http://via.placeholder.com/370x200/52575b/52575b">
<!-- Floating Over Wrapper -->
<div class="floating-dt">
<span class="info-span ti-person">153</span>
<span class="info-span ti-comment-bubble">250</span>
</div>
</div>
<!-- Avatar Image -->
<a href="#" class="avatar"><img src="http://via.placeholder.com/120x120" alt=""></a>
<!-- Title -->
<a href="#"><h3 class="title">Abdullah Ramadan</h3></a>
<h4 class="subtitle">Full Stack Designer</h4>
<!-- Social Media -->
<div class="social-btns">
<a href="#" class="circle ti-facebook"></a>
<a href="#" class="circle ti-twitter"></a>
<a href="#" class="circle ti-google-plus"></a>
<a href="#" class="circle ti-instagram"></a>
<a href="#" class="circle ti-linkedin"></a>
</div>
<!-- Buttons Group -->
<div class="btns-group gutter-on">
<a href="#" class="btn primary outline small tx-uppercase">Add Freind</a>
<a href="#" class="btn secondary outline small tx-uppercase">Follow ME</a>
</div>
</div>
<!-- // Card Content -->
</div>
<!-- // Card Wrapper -->
Card Widget Mode
The Widget Theme Mode With Small Content Elements Can Be Used For Making Almost all The Other Cards Theme's as You See The Example Below Shows Card Widget With Product Content and you can easly use the widget mode by adding the class widget to The Card Wrapper and inside the Content Box Element You Can Use The Class widget-image for the media element and the class widget-content for information content wrapper.
<!-- Card Wrapper -->
<div class="card-block widget col-12 col-m-5 col-l-4 col-xl-3">
<!-- Card Content -->
<div class="content-box">
<!-- Widget Image -->
<a href="#" class="widget-image"><img src="img/product-full.png" alt=""></a>
<!-- Widget Content -->
<div class="widget-content">
<a href="#"><h3>Product Title Goes Here</h3></a>
<p>Morbi scelerisque luctus velit. Etiam dui sem,fermentum vitae, sagittis</p>
</div>
<!-- Action Footer -->
<div class="action-footer">
<!-- Action Link -->
<a href="#" class="ti-cart more-btn">Add To Cart</a>
<!-- Price -->
<h4 class="price">510$ <i>600$</i></h4>
<!-- Floating Button -->
<a href="#" class="icon-btn floating-drt ti-heart"></a>
</div>
</div>
<!-- // Card Content -->
</div>
<!-- // Card Wrapper -->
Another Widget Example as User Card Widget
<!-- Card Wrapper -->
<div class="card-block widget col-12 col-m-5 col-l-4 col-xl-3">
<!-- Card Content -->
<div class="content-box">
<!-- Widget Image -->
<a href="#" class="widget-image circle"><img src="http://via.placeholder.com/70x70" alt=""></a>
<!-- Widget Content -->
<div class="widget-content">
<a href="#"><h2>Abdullah Ramadan <span>Full Stack Designer</span></h2></a>
</div>
<!-- Action Footer -->
<div class="action-footer">
<!-- Action Link -->
<a href="#" class="ti-arrow-left-c more-btn">Visit Profile</a>
<!-- Card Info -->
<div class="info">
<span class="ti-person">153</span>
<span class="ti-comment-bubble">250</span>
</div>
<!-- Floating Button -->
<a href="#" class="icon-btn primary floating-drt ti-plus"></a>
</div>
</div>
<!-- // Card Content -->
</div>
<!-- // Card Wrapper -->
Utilities
Cards Class Name's Utilities for Layout and Content Components.
| Class Name | element | description |
|---|---|---|
| card-block | Card wrapper | Class of The Main Wrapper of The Card |
| content-box | Card Content wrapper | Class of The Content Wrapper Container Tag |
| horizontal | Card Content wrapper | Class of The Content Wrapper Horizontal Mode. |
| content-wrap | Card Second Content wrapper | Class of The Content Information Wrapper Only In Horizontal Mode. |
| card-media | Card Media Object | Class Of The Card Media Object Element Tag for images |
| [data-src] | Card Media Object | Source URL Path Attribute for responsive flexible images |
| full | Card Media Object | Class of The Card Media Object Full Width Mode |
| overlayed | Card Media Object | Class of The Card Media Object Overlayed Content Effect Mode |
| content | Media Object Overlayed | Class of The Card Media Object Overlayed Content Wrapper Only in Overlayed Mode. |
| title | Card Summary Headline Tag | the class of the card title/headline for all Headings tags |
| card-head | Card Head Bar | class for the card Head Bar Wrapper. |
| title | The Title of Head Bar Class | class for the card Head Bar Title Goes inside the card-head Tag. |
| date | The Extra Info of Head Bar Class | class for the card Head Bar Extra Information like Date/PostingTime Goes inside the card-head Tag. |
| action-footer | Card Footer | class for the card footer wrapper html tag. |
| more-btn | Card Footer Button | class for the card Read More Button inside the action footer. |
| info | Card Footer Information | class for the card extra statics information like comments/views inside the action footer |
| Product Card Class's | ||
| product-card | Card wrapper | Class of The Main Wrapper of The Card |
| price | Product Price | Class of The Product Price Tag. |
| floating-content | Card Floating Content | Class of The Product Floating Content Wrapper Inside The Media Object Tag. |
| stars | Floating Content Rating | Class of The Product Rating inside Floating Content Wrapper Tag. |
| floating-dt | Floating Content Position | Class of The Floating Content Postion Wrapper Page Direction [Left] Top. |
| floating-drt | Floating Content Position | Class of The Floating Content Postion Wrapper Page Direction Reverese [Right] Top. |
| floating-db | Floating Content Position | Class of The Floating Content Postion Wrapper Page Direction [Left] Bottom. |
| floating-drb | Floating Content Position | Class of The Floating Content Postion Wrapper Page Direction Reverese [Right] Bottom. |
| hvr-component | Card Hover Effect | Class of The Product Hover Content Wrapper Inside The Media Object Tag. |
| icon-btn | Hover Component Button | Class of The Buttons Inside The Product Hover Component. |
| overlay-link | Hover Component Link | Class of The Overlay Area Link Inside The Product Hover Component. |
| User Card Class's | ||
| user-card | Card wrapper | Class of The Main Wrapper of The Card |
| avatar | User Card Avatar | Class of The User Avatar Image inside the Card Content Wrapper After The Media Component |
| subtitle | User Card Job Title | Class of The User Card Job Title inside the Card Content Wrapper |
| social-btns | Social Media Wrapper | Class of The User Card Social Media Links Wrapper inside the Card Content Wrapper |
| circle | Social Media Link | Class of The User Card Social Media Links Circle Mode. |
| Card Widget Class's | ||
| widget | Card wrapper | Class of The Main Wrapper of The Card |
| widget-image | Image Component | Class of The Widget Image Component inside the Card Content Wrapper content-box |
| widget-content | Information Component | Class of The Widget Information Component inside the Card Content Wrapper content-box |