# Preview

Wrap shortcode output in a labeled preview box to show a live render alongside its code.

Use the `preview` shortcode to render a labeled "Preview" box around any content. It has no parameters — place any shortcodes or Markdown inside it.

## Usage

```go-html-template
{{</* preview */>}}
{{</* callout "info" */>}}
This is rendered inside a preview box.
{{</* /callout */>}}
{{</* /preview */>}}
```

Pair it with a code block immediately after to show both the live output and the source:

````go-html-template
{{</* preview */>}}
{{</* callout "info" */>}}
This is rendered inside a preview box.
{{</* /callout */>}}
{{</* /preview */>}}

```go-html-template
{{</* callout "info" */>}}
This is rendered inside a preview box.
{{</* /callout */>}}
```
````

## Example

{{< preview >}}
{{< card title="Preview" icon="eye" color="blue" >}}
This card is rendered live inside the preview box.
{{< /card >}}
{{< /preview >}}

```go-html-template
{{</* preview */>}}
{{</* card title="Preview" icon="eye" color="blue" */>}}
This card is rendered live inside the preview box.
{{</* /card */>}}
{{</* /preview */>}}
```