> ## Documentation Index
> Fetch the complete documentation index at: https://docs.evidence.studio/llms.txt
> Use this file to discover all available pages before exploring further.

# Callout

> Add a callout box to show a message or highlight a section of text

<img src="https://mintcdn.com/evidence/Z2CIIsynbphd2HX3/images/components/callout/callout.png?fit=max&auto=format&n=Z2CIIsynbphd2HX3&q=85&s=026cb2e2db4a408044a051114937559a" alt="Basic Usage" width="1000" height="148" data-path="images/components/callout/callout.png" />

```liquid theme={null}
{% callout type="info" title="Report Info"%}
This is an info callout
{% /callout %}
```

## Examples

### Basic Usage

<img src="https://mintcdn.com/evidence/Z2CIIsynbphd2HX3/images/components/callout/callout.png?fit=max&auto=format&n=Z2CIIsynbphd2HX3&q=85&s=026cb2e2db4a408044a051114937559a" alt="Basic Usage" width="1000" height="148" data-path="images/components/callout/callout.png" />

```liquid theme={null}
{% callout type="info" title="Report Info"%}
This is an info callout
{% /callout %}
```

## Attributes

<ResponseField name="type" type="string" default="info">
  **Allowed values:**

  * `info`
  * `success`
  * `warning`
  * `error`
</ResponseField>

<ResponseField name="title" type="string" default="" />

<ResponseField name="width" type="number">
  Set the width of this component (in percent) relative to the page width
</ResponseField>