# @smui/card > Svelte Material UI - Card Latest version **9.0.2** (published 2026-08-03) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @smui/card pnpm add @smui/card yarn add @smui/card bun add @smui/card ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 9.0.2 | | Published | 2026-08-03 | | First published | 2019-08-30 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 180 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3443 | | Author | Hunter Perrin | | Maintainers | hperrin | | Keywords | svelte, svelte3, material-ui, material-design, material, svelte-components, sveltejs | ## Links - npm: https://www.npmjs.com/package/@smui/card - Repository: https://github.com/hperrin/svelte-material-ui - Homepage: https://github.com/hperrin/svelte-material-ui#readme - Issues: https://github.com/hperrin/svelte-material-ui/issues - npm.io page: https://npm.io/package/@smui/card ## Dependencies (4) - [@smui/button](https://npm.io/package/@smui/button.md) ^9.0.2 - [@smui/common](https://npm.io/package/@smui/common.md) ^9.0.2 - [@smui/ripple](https://npm.io/package/@smui/ripple.md) ^9.0.2 - [@smui/icon-button](https://npm.io/package/@smui/icon-button.md) ^9.0.2 ## Alternatives - [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads - [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads - [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads - [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads - [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads ## Recent versions - 9.0.2 (latest) — 2026-08-03 - 9.0.0-beta.14 (beta) — 2026-05-16 - 8.0.0-alpha.0 (alpha) — 2024-05-13 - 9.0.1 — 2026-06-02 - 9.0.0 — 2026-05-20 - 9.0.0-beta.13 — 2026-05-16 - 9.0.0-beta.12 — 2026-04-21 - 9.0.0-beta.11 — 2026-04-21 - 9.0.0-beta.10 — 2026-04-21 - 9.0.0-beta.9 — 2026-04-21 - 9.0.0-beta.8 — 2026-04-21 - 9.0.0-beta.7 — 2026-04-21 - 9.0.0-beta.6 — 2026-04-21 - 9.0.0-beta.5 — 2026-04-21 - 9.0.0-beta.4 — 2026-04-21 - … 100 more at https://npm.io/package/@smui/card/versions ## README # Svelte Material UI - Cards A container for media and actions. # Installation ```sh npm install --save-dev @smui/card ``` # Examples and Usage Information https://sveltematerialui.com/demo/card # Exports ## (default) A card. ### Options / Defaults - `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options. - `class`: `''` - A CSS class string. - `variant`: `'raised'` - The card's style variant. ('raised' or 'outlined') - `padded`: `false` - Whether to apply padding to the card. You can also use a `Content` component to achieve the same effect. ## Content A fragment used as a content area within a card. Equivalent to the [`ClassAdder` with `Div` common component](/packages/common/README.md#classaddersvelte). Note that you can supply your own component to a `ClassAdder` based component. You can use this to create things like list cards. ## PrimaryAction An interactive portion of the card. Meant to be the primary way to interact with the card. ### Options / Defaults - `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options. - `class`: `''` - A CSS class string. - `ripple`: `true` - Whether to implement a ripple for when the component is interacted with. - `color`: `undefined` - A color, passed to the Ripple action. ('primary', or 'secondary') - `padded`: `false` - Whether to apply padding to the area. - `tabindex`: `0` - The tabindex of the area. ## Media An area of the card meant to show media content. ### Options / Defaults - `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options. - `class`: `''` - A CSS class string. - `aspectRatio`: `undefined` - Add styling to maintain a given aspect ratio. ('square' or '16x9') ## MediaContent An area of the card within the media meant to show content over top of the media. Equivalent to the [`ClassAdder` with `Div` common component](/packages/common/README.md#classaddersvelte). ## Actions An area of the card containing interactive actions. ### Options / Defaults - `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options. - `class`: `''` - A CSS class string. - `fullBleed`: `false` - Whether to style the actions as full bleed, meaning they take up the whole width of the card. ## ActionButtons An area of the card, within Actions, containing buttons. Equivalent to the [`ClassAdder` with `Div` common component](/packages/common/README.md#classaddersvelte). ## ActionIcons An area of the card, within Actions, containing icon buttons. Equivalent to the [`ClassAdder` with `Div` common component](/packages/common/README.md#classaddersvelte). # More Information See [Cards](https://m2.material.io/components/cards) in the Material design spec. --- _Source: https://npm.io/package/@smui/card · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._