---
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)

The callout below uses `message: aitranslation` to pull its title and body from the `callouts:` block in `config.yml`. The type (`warning`) also comes from the config entry, not the tag name.

```mdcms callout-info
message: aitranslation
```

---

## message: overrides inline content

When `message:` is present, any inline `title:` or body text is ignored. A warning should appear in the browser console.

```mdcms callout-info
message: aitranslation
title: This title should be ignored
This body text should also be ignored. Check the console for a warning.
```

---

## Missing icon

This callout uses a non-existent icon name. A broken image should appear where the icon would be.

```mdcms callout-info
title: Custom icon that does not exist
icon: nonexistent_icon
The icon to the left of this title should show as a broken image.
```

---

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