e47a9f4401
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
22 lines
876 B
Markdown
22 lines
876 B
Markdown
---
|
|
title: "Callouts"
|
|
description: "Attention-drawing callout blocks using the data-callout attribute."
|
|
type: docs
|
|
weight: 35
|
|
date: 2026-04-11
|
|
tags: ["components", "callouts", "data-attributes"]
|
|
ai-disclosure: "generated"
|
|
ai-model: "claude-sonnet-4-6"
|
|
ai-provider: "Anthropic"
|
|
---
|
|
|
|
Add `data-callout="<type>"` to any block element to style it as a callout. Four types are available: `note`, `tip`, `warning`, and `error`. No extra classes needed.
|
|
|
|
## Inline Demo
|
|
|
|
<div data-demo>
|
|
<div data-callout="note"><strong>Note</strong> — General information worth highlighting.</div>
|
|
<div data-callout="tip"><strong>Tip</strong> — A helpful suggestion or best practice.</div>
|
|
<div data-callout="warning"><strong>Warning</strong> — Something to watch out for.</div>
|
|
<div data-callout="error"><strong>Error</strong> — A critical issue or destructive action.</div>
|
|
</div>
|