Ludo
502b2e8266
Navigation: Docs, Layouts, Lab (simplified from 6 items) Layouts gallery: card grid showing all available page layouts with live links to demo pages. Docs restructure: 8 auto-generated sidebar sections (Getting Started, Typography, Core, Content, Components, Reference, Vault, Packs) with 20 new stub pages. Each stub has inline HTML demos that ASW styles directly. New Hugo layout template for layouts/ section. Decap CMS nav updated. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
22 lines
987 B
Markdown
22 lines
987 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 style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:1rem">
|
|
<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>
|