{"repo":"marlenesco/material-cards","free":true,"listed":false,"github":"https://github.com/marlenesco/material-cards","clone":"git clone https://github.com/marlenesco/material-cards.git","description":"Card style based on Google Material color palette","language":"SCSS","stars":401,"topics":["material-cards","color-palette","material-design","user-cards","css-transitions"],"license":"MIT","category":"ui-components","readme_excerpt":"Material Cards Material card component inspired by the Google Material color palette, built with vanilla JavaScript + SCSS. Working demo on CodePen Installation Quick start API initMaterialCards(target?, options?) - target : selector, single element, NodeList, or array of elements - options : - cardActivator ( click or hover , default: click ) - buttonSelector (default: .mc-btn-action ) mc-btn-action uses a built-in morph animation (hamburger - X - hamburger). Use mc-img-responsive for card images: Events Each card dispatches: - show.material-card - shown.material-card - hide.material-card - hidden.material-card Package exports - material-cards - JS API ( js/material-cards.js ) - material-cards/css - main CSS ( dist/material-cards.css ) - material-cards/css/auto-height - auto-height CSS ( dist/material-cards-auto-height.css ) - material-cards/icons - SVG sprite ( assets/icons.svg ) Development Experimental multi-framework packages (vNext) The repository now includes a vNext scaffold with shared TypeScript models and framework adapters: - packages/core - shared types and open-state contract - packages/react - MaterialCard React component - packages/vue - MaterialCard Vue 3 component - packages/svelte - MaterialCard Svelte component Core API (aligned across frameworks): - card : title, subtitle, description, image, links, actions - color : palette token ( blue , teal , etc.) or custom - colorHex : explicit color override - isOpen + defaultOpen + onOpenChange Icon strategy: - pa","default_branch":null,"files":null,"tree":[],"storefront":"/r/marlenesco","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/marlenesco/material-cards/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}