# 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>
```