Ludo
fe8ddd6153
New data-demo attribute for demo blocks in documentation. Replaced 16 files worth of inline style="" wrappers with <div data-demo>. Only remaining style= is charts --size data injection (legitimate). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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>
|