{"id":14036604,"url":"https://github.com/marlenesco/material-cards","last_synced_at":"2025-10-22T20:01:48.265Z","repository":{"id":35193966,"uuid":"39452345","full_name":"marlenesco/material-cards","owner":"marlenesco","description":"Card style based on Google Material color palette","archived":false,"fork":false,"pushed_at":"2022-10-20T16:59:46.000Z","size":47,"stargazers_count":401,"open_issues_count":0,"forks_count":126,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-09-27T07:22:41.052Z","etag":null,"topics":["color-palette","css-transitions","jquery","jquery-plugin","material-cards","material-design","user-cards"],"latest_commit_sha":null,"homepage":"http://codepen.io/marlenesco/full/NqOozj/","language":"Less","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marlenesco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-21T15:03:54.000Z","updated_at":"2025-09-26T20:34:58.000Z","dependencies_parsed_at":"2022-08-31T00:00:55.030Z","dependency_job_id":null,"html_url":"https://github.com/marlenesco/material-cards","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/marlenesco/material-cards","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marlenesco%2Fmaterial-cards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marlenesco%2Fmaterial-cards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marlenesco%2Fmaterial-cards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marlenesco%2Fmaterial-cards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marlenesco","download_url":"https://codeload.github.com/marlenesco/material-cards/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marlenesco%2Fmaterial-cards/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280503215,"owners_count":26341693,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-22T02:00:06.515Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color-palette","css-transitions","jquery","jquery-plugin","material-cards","material-design","user-cards"],"created_at":"2024-08-12T03:02:04.816Z","updated_at":"2025-10-22T20:01:48.236Z","avatar_url":"https://github.com/marlenesco.png","language":"Less","funding_links":[],"categories":["Less"],"sub_categories":[],"readme":"Material Cards\n==============\nSimple user card based on [Google Material Color palette](https://www.google.com/design/spec/style/color.html#color-color-palette) and jQuery.\n\n[![See full preview](https://material-cards.s3.eu-west-1.amazonaws.com/preview.jpg)](http://codepen.io/marlenesco/full/NqOozj/)\n\n[Working demo on Codepen.io](http://codepen.io/marlenesco/full/NqOozj/)\n\nLess files\n----\n    material-cards.less\n    gm-variables.less\n    mixin.less\n    material-color.less\n \n\u003e `material-cards.less` is the main `.less` file that includes the other .less files.  \n\u003e `gm-variables.less` contains all the [color palette](https://www.google.com/design/spec/style/color.html#color-color-palette) with the color accent.  \n\u003e `mixin.less` contains some utilities.  \n\u003e `material-color.less` contains the material color variant based on `gm-variables.less`\n\nInstallation\n----\nYou can download full package and check the **demo** folder for implementation example or you can use **bower**:\n\n    bower install material-cards\n    \nDemo files require [Font Awesome](http://fortawesome.github.io/Font-Awesome/)\n\nUsage\n----\nMaterial Cards must be used in conjunction with jQuery.\n\nYou 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.\n\nInside the `js/` folder you can find the two files: `jquery.material-cards.js` and `jquery.material-cards.min.js`\n\n### Init jQuery Material Card\n\n```javascript\n$('.material-card').materialCard(options);\n```\n\n### Options\n\n```javascript\noptions = {\n    icon_close\t   : 'fa-arrow-left', //string\n    icon_open\t   : 'fa-bars',       //string\n    icon_spin\t   : 'fa-spin-fast',  //string\n    card_activator : 'click'          //string: click or hover\n});\n```\n\nThe icons are from [Font Awesome](http://fortawesome.github.io/Font-Awesome/), `fa-spin-fast` is similar to [`fa-spin`](http://fortawesome.github.io/Font-Awesome/examples/#animated) but spin faster.  \n\nThe default **card_activator** is the **click** event on button card, but you can also use **hover** (this option remove the button).\n\n### Methods\n\n`toggle`: change selected material card state\n\n```javascript\n$('.material-card').materialCard('toggle');\n```\n    \n`open`: open selected material card\n\n```javascript\n$('.material-card:eq(1)').materialCard('open');\n```\n\n`close`: close selected material card\n\n```javascript\n$('.material-card:eq(2)').materialCard('close');\n```\n   \n`isOpen`: check material card status, return **true** or **false**\n\n```javascript\nif($('.material-card:eq(3)').materialCard('isOpen') === true) {\n\t// do something\n}\n```\n\n### Events\n\n* `show.material-card`: triggered immediately when the **open** instance method is called\n* `shown.material-card`: triggered when the card becomes visible to the user (will wait the end of the CSS transitions)\n* `hide.material-card`: triggered immediately when the **close** instance method is called\n* `hidden.material-card`: triggered when the card has become hidden to the user (will wait for end of CSS transitions)\n\n### Examples\n\n```javascript\n$('.material-card').on('shown.material-card', function (event) {\n    console.log(event.type, event.namespace, $(this));\n    //that return\n    //shown material-card [article.material-card...]\n});\n```\n\n```javascript\nvar fullCardEvent = 'shown.material-card show.material-card hide.material-cards hidden.material-cards';\n$('.material-cards').on(fullCardEvent, function (event) {\n\t//   do something\n});\n```\n### Material cards and Masonry grid library\ncheck `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](http://masonry.desandro.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarlenesco%2Fmaterial-cards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarlenesco%2Fmaterial-cards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarlenesco%2Fmaterial-cards/lists"}