@maggioli-design-system/mds-card
v4.4.3
Published
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.
Downloads
1,094
Readme
mds-card
This is a web-component from Maggioli Design System Magma, 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.
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 from R&D Department