Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

» Card Blocks

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 src/SCSS/elements/_cards.scss

Standard Card

in order to use the card component first we create a 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 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 conponents 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.

Read More
153 250 
<!-- 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 -->

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 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 usagw 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.

avatar Abdullah Ramadan

15 oct 2018

Summary Head Line

Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam , Proin mattis lacinia justo.

Read More
153 250 
<!-- 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 -->

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.

avatar Abdullah Ramadan

15 oct 2018

Summary Head Line

Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam , Proin mattis lacinia justo.

Read More
153 250 
<!-- 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 -->

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.

avatar Abdullah Ramadan

15 oct 2018

Summary Head Line

Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam , Proin mattis lacinia justo.

Read More
153 250 
<!-- 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 -->

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.

avatar Abdullah Ramadan

15 oct 2018

Summary Head Line

Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam , Proin mattis lacinia justo.

Read More
153 250 
<!-- 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 -->

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.

Category Name
15% Discount

Product Summary Head Line

Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in,

510$ 600$ Add To Cart 
<!-- Card Wrapper -->
<div class="card-block product-card">
    <!-- 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>
        <!-- // Buttons Group -->
    </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.

153 250

Abdullah Ramadan

Full Stack Designer

Add Freind Follow ME 
<!-- Card Wrapper -->
<div class="card-block user-card">
    <!-- 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"></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>
        <!-- // Buttons Group -->
    </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.

Product Title Goes Here

Morbi scelerisque luctus velit. Etiam dui sem,fermentum vitae, sagittis

Add To Cart

510$ 600$

<!-- Card Wrapper -->
<div class="card-block widget">
    <!-- 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>
        <!-- // Action Footer -->
    </div>
    <!-- // Card Content -->
</div>
<!-- // Card Wrapper -->

Another Widget Example as User Card Widget

Abdullah Ramadan Full Stack Designer
Visit Profile
153 250 
<!-- Card Wrapper -->
<div class="card-block widget">
    <!-- 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>
        <!-- // Action Footer -->
    </div>
    <!-- // Card Content -->
</div>
<!-- // Card Wrapper -->

Utilities

Cards Class Names 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 Classes
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 Classes
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 Classes
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

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.