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


Introductie

Met de card classes kunt je gebieden met schaduw op het scherm plaatsen.


Klik op de Class naam om deze te kopiƫren.

cards Hoofd class voor het cards block
card Class voor een card sectie
card-hover Class om een hover effect voor een card te maken
card-title Class voor een card titel
card-img Class voor toevoegen van een afbeelding
card-text Class voor toevoegen van tekst

Voorbeeld Cards

Titel
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.
Titel
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.
Titel
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.
Titel
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.
Titel
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.
Titel
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">Titel</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