Skip to content
Card style based on Google Material color palette
Branch: master
Clone or download
marlenesco Update
Removed old stuff
Latest commit ba94603 Sep 11, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Masonry grid library integration May 11, 2016
js Repository rename Jul 25, 2015
LICENSE Initial commit Jul 21, 2015

Material Cards

Simple user card based on Google Material Color palette and jQuery.

See full preview

Working demo on

Less files


material-cards.less is the main .less file that includes the other .less files.
gm-variables.less contains all the color palette with the color accent.
mixin.less contains some utilities.
material-color.less contains the material color variant based on gm-variables.less


You can download full package and check the demo folder for implementation example or you can use bower:

bower install material-cards

Demo files require Font Awesome


Material Cards must be used in conjunction with jQuery.

You can choose to use it as a jQuery plugin or not. Demos for both usages are available in the demos folder. Using it as a jQuery plugin easies the management of options, methods and events for full customization.

Inside the js/ folder you can find the two files: jquery.material-cards.js and jquery.material-cards.min.js

Init jQuery Material Card



options = {
    icon_close	   : 'fa-arrow-left', //string
    icon_open	   : 'fa-bars',       //string
    icon_spin	   : 'fa-spin-fast',  //string
    card_activator : 'click'          //string: click or hover

The icons are from Font Awesome, fa-spin-fast is similar to fa-spin but spin faster.

The default card_activator is the click event on button card, but you can also use hover (this option remove the button).


toggle: change selected material card state


open: open selected material card


close: close selected material card


isOpen: check material card status, return true or false

if($('.material-card:eq(3)').materialCard('isOpen') === true) {
	// do something


  • show.material-card: triggered immediately when the open instance method is called
  • shown.material-card: triggered when the card becomes visible to the user (will wait the end of the CSS transitions)
  • hide.material-card: triggered immediately when the close instance method is called
  • hidden.material-card: triggered when the card has become hidden to the user (will wait for end of CSS transitions)


$('.material-card').on('shown.material-card', function (event) {
    console.log(event.type, event.namespace, $(this));
    //that return
    //shown material-card [article.material-card...]
var fullCardEvent = 'shown.material-card show.material-card hide.material-cards hidden.material-cards';
$('.material-cards').on(fullCardEvent, function (event) {
	//   do something

Material cards and Masonry grid library

check demo/material-cards_jquery-plugin_masonry.html material cards without a fixed height (use this less file less/material-cards-auto-height.less) and awesome javascript Masonry grid library.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.