npm package: @maggioli-design-system/mds-card
Description: mds-card is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 4.6.4

# mds-card



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Properties

| Property   | Attribute   | Description                                                      | Type      | Default |
| ---------- | ----------- | ---------------------------------------------------------------- | --------- | ------- |
| `autoGrid` | `auto-grid` | Enables automatic responsive behavior based on container queries | `boolean` | `true`  |


## Slots

| Slot        | Description                                                                                                                                                                                                                                                                                |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `"content"` | Add `HTML elements` or `components`, it's responsive behaviour based on container queries is handled with `auto-grid` enabled                                                                                                                                                              |
| `"footer"`  | Add `HTML elements` or `components`, it's responsive behaviour based on container queries is handled with `auto-grid` enabled                                                                                                                                                              |
| `"header"`  | Add `HTML elements` or `components`, it's responsive behaviour based on container queries is handled with `auto-grid` enabled                                                                                                                                                              |
| `"media"`   | Add `HTML elements` or `components`Add `HTML elements` or `components`, it is **recommended** to use `mds-img` element or other component to represent media contents, used for images or videos, it's responsive behaviour based on container queries is handled with `auto-grid` enabled |


## Shadow Parts

| Part          | Description |
| ------------- | ----------- |
| `"container"` |             |


## CSS Custom Properties

| Name                 | Description                            |
| -------------------- | -------------------------------------- |
| `--mds-card-gap`     | Sets the spacing between card elements |
| `--mds-card-padding` | Sets the spacing around card elements  |


----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)