---
title: Home
sort: 100
---

# Phase 4 — Callout Tags

Check each callout below. Each should show a coloured left border, an icon, a bold title in the accent colour, and a rendered body.

---

## Basic types

```mdcms callout-info
title: Information
This is an **info** callout. Supports *italic*, `code`, and lists:

- Item one
- Item two
```

```mdcms callout-warning
title: Warning
Something needs your attention. This is a **warning** callout.
```

```mdcms callout-success
title: Success
The operation completed successfully. This is a **success** callout.
```

```mdcms callout-error
title: Error
Something went wrong. This is an **error** callout.
```

---

## No title

```mdcms callout-info
No title key here. The title row should not appear at all — just the body.
```

---

## Markdown body

```mdcms callout-warning
title: Rich body
- List item one
- List item two

A paragraph with `inline code` and a [link](https://example.com).
```

---

## Custom icon override

```mdcms callout-info
title: Info with warning icon
icon: warning
This info callout uses the warning icon instead of the default info icon.
```

---

## Config-defined message (message: key)

```mdcms callout-warning
message: aitranslation
```

---

Toggle dark mode and check all four callout types still look correct.