Version:

Install ​

shell
npm i @mate-vue/callout

Import ​

vue
<script setup>
import { MateCallout } from '@mate-vue/callout';
</script>

Variants ​

Neutral with custom icon ​

vue
<template>
    <MateCallout title-text="Heading text" iconName="home">
        Every possible content like text or an unordered list
    </MateCallout>
</template>

Secondary ​

vue
<template>
    <MateCallout theme="secondary" title-text="Heading text">
      Every possible content like text or an unordered list
    </MateCallout>
</template>

Info ​

vue
<template>
    <MateCallout theme="info" title-text="Heading text">
      Every possible content like text or an unordered list
    </MateCallout>
</template>

Success ​

vue
<template>
    <MateCallout theme="success" title-text="Heading text">
      Every possible content like text or an unordered list
    </MateCallout>
</template>

Warning ​

vue
<template>
    <MateCallout theme="warning" title-text="Heading text">
      Every possible content like text or an unordered list
    </MateCallout>
</template>

Error ​

vue
<template>
    <MateCallout theme="danger" title-text="Heading text">
      Every possible content like text or an unordered list
    </MateCallout>
</template>

No heading ​

vue
<template>
    <MateCallout theme="danger">
      Every possible content like text or an unordered list
    </MateCallout>
</template>