@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
22 lines (15 loc) • 1.12 kB
Markdown
# MCallout
A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
## Props
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `title` | Title of the callout. | `string` | - |
| `description` | Description of the callout. | `string` | - |
| `appearance` | Allows to define the callout appearance. | `"standard"` `"inverse"` `"accent"` `"tips"` | `"standard"` |
| `tag` | Heading level for the callout title (h2–h6). Adjust to match the
heading hierarchy of the page where the callout is used. | `"h2"` `"h1"` `"h3"` `"h4"` `"h5"` `"h6"` | `"h2"` |
## Slots
| Name | Description |
| --- | --- |
| `icon` | Use this slot to insert an icon. |
| `footer` | Use this slot to insert a button or a link in the footer of the callout. |