{/* callout.mdx */}

import { Canvas, Title, Subtitle, ArgTypes, Source, Meta, Description, Primary, Story, Stories, Controls } from '@storybook/blocks';
import * as comStories from './callout.stories.json';
import templateSource from './callout.twig?raw';

<Meta of={comStories} name="Docs"/>

<Title />
<Subtitle />
<Description />

<Primary />

## Properties
<Controls />

### Attributes:
 * `attributes`: HTML attributes for the callout element.

### Slots:
* `content`: The content of the callout.

<Stories of={comStories} />


### Examples:

**Example #1** Default callout
```
{% include 'vartheme_bs5:callout' with {
  content: '<strong>Default callout.</strong> Example text to show it in action.'
} %}
```

**Example #2** Info callout
```
{% include 'vartheme_bs5:callout' with {
  type: 'bs-callout-info',
  content: '<strong>This is an info callout.</strong> Example text to show it in action.'
} %}
```

**Example #3** Warning callout
```
{% include 'vartheme_bs5:callout' with {
  type: 'bs-callout-warning',
  content: '<strong>This is a warning callout.</strong> Example text to show it in action.'
} %}
```

**Example #3** Danger callout
```
{% include 'vartheme_bs5:callout' with {
  type: 'bs-callout-danger',
  content: '<strong>This is a danger callout.</strong> Example text to show it in action.'
} %}
```

## Source code
[//]: # (Twig Template source code)
<Source code={templateSource} />
