flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Cards


Introduction

With the card class you can place areas with shadow on the screen.


Click on the Class name to copy it.

cards Main class for the cards block
card Class for a card section
card-hover Class to make a hover effect for a card
card-title Class for card title
card-img Class for card image
card-text Class for card text

Example Cards

Title
test
Nulla elementum tristique ultricies. Etiam sit amet felis leo, non imperdiet sapien. Suspendisse venenatis, erat ac mollis sagittis, nulla arcu semper felis, a tempus dolor nibh in est. Nullam.
Title
test
Nulla elementum tristique ultricies. Etiam sit amet felis leo, non imperdiet sapien. Suspendisse venenatis, erat ac mollis sagittis, nulla arcu semper felis, a tempus dolor nibh in est. Nullam.
Title
test
Nulla elementum tristique ultricies. Etiam sit amet felis leo, non imperdiet sapien. Suspendisse venenatis, erat ac mollis sagittis, nulla arcu semper felis, a tempus dolor nibh in est. Nullam.
Title
test
Nulla elementum tristique ultricies. Etiam sit amet felis leo, non imperdiet sapien. Suspendisse venenatis, erat ac mollis sagittis, nulla arcu semper felis, a tempus dolor nibh in est. Nullam.
Title
test
Nulla elementum tristique ultricies. Etiam sit amet felis leo, non imperdiet sapien. Suspendisse venenatis, erat ac mollis sagittis, nulla arcu semper felis, a tempus dolor nibh in est. Nullam.
Title
test
Nulla elementum tristique ultricies. Etiam sit amet felis leo, non imperdiet sapien. Suspendisse venenatis, erat ac mollis sagittis, nulla arcu semper felis, a tempus dolor nibh in est. Nullam.

Example code

<div class="cards">
  <div class="card card-hover">
    <div class="card-title">Title</div>
	<img class="card-img" alt="test" src="../images/5.jpg" />
    <div class="card-text">
      Text....
    </div>
    <div class="center padding"><a class="button" href="javascript:void(0);">Button</a></div>
  </div>
  ...
  ...
  ...
</div>


© Copyright by Web Henkie
All right reserved
Webmaster