@maggioli-design-system/mds-banner

mds-banner

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 JavaScirpt framework you are using.

Properties

Property	Attribute	Description	Type	Default
closeLabel	close-label	Sets the cross icon accessibility label to perform close action on element	"Annulla" | undefined	'Annulla'
deletable	deletable	Shows the cross icon to perform cancel/delete action on element	boolean | undefined	undefined
headline	headline	The title on the top of the banner	string | undefined	undefined
icon	icon	An icon displayed at the top left of the banner	string | undefined	undefined
tone	tone	Sets the tone of the color variant	"quiet" | "strong" | "weak" | undefined	'weak'
variant	variant	Sets the theme variant colors	"dark" | "error" | "info" | "light" | "primary" | "success" | "warning" | undefined	'light'

Events

Event	Description	Type
mdsBannerClose	Emits when the url view is closed	CustomEvent<void>

Slots

Slot	Description
"action"	Add HTML elements or components, it is recommended to use mds-button element.
"default"	Add text string, HTML elements or components to this slot.

CSS Custom Properties

Name	Description
--mds-banner-background	Sets the background-color of the component
--mds-banner-close-icon-hover-background	Sets the background color of the close icon when the mouse is over it
--mds-banner-color	Sets the text color of the component
--mds-banner-icon-color	Sets the close icon fill color of the component
--mds-banner-radius	Sets the border-radius of the component
--mds-banner-shadow	Sets the box-shadow of the component

Dependencies

Depends on

• mds-icon
• mds-text
• mds-button

Graph

graph TD;
  mds-banner --> mds-icon
  mds-banner --> mds-text
  mds-banner --> mds-button
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  style mds-banner fill:#f9f,stroke:#333,stroke-width:4px

---

Built with love @ Gruppo Maggioli from R&D Department