UI 컴포넌트 Easy
Wiki — Callout / Admonition Blocks
A complete set of documentation callout blocks for a knowledge base, set in a clean white Aurora DB handbook shell with a left nav, a centered serif article column, and a right-rail table of contents. Five semantic variants — Note, Tip, Info, Warning, and Danger — each carry a left accent border, a tinted background, an inline SVG icon, a bold title, and rich body content with inline code and lists. A foldable details admonition collapses long supplementary content, a code-bearing Tip ships a copy button, and a live builder lets you pick a type and type a title and body to preview the exact markup.
Lab에서 열기
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #ffffff;
--bg-2: #f7f8fa;
--panel: #ffffff;
--ink: #1a1a1f;
--ink-2: #3a3a42;
--muted: #6b7280;
--line: rgba(20, 20, 30, 0.10);
--line-2: rgba(20, 20, 30, 0.18);
--link: #2563eb;
--link-hover: #1d4ed8;
--accent: #2563eb;
--note: #2563eb;
--tip: #16a34a;
--warn: #d97706;
--danger: #dc2626;
--info: #0891b2;
--code-bg: #f4f4f6;
--kbd-bg: #eceef2;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--serif: "Source Serif 4", Georgia, "Times New Roman", serif;
--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--sidebar-w: 248px;
--toc-w: 200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 3px;
}
.skip-link {
position: absolute;
left: -9999px;
top: 8px;
z-index: 60;
background: var(--ink);
color: #fff;
padding: 8px 14px;
border-radius: var(--r-sm);
}
.skip-link:focus { left: 12px; }
code, pre, kbd { font-family: var(--mono); }
code {
background: var(--code-bg);
border: 1px solid var(--line);
border-radius: 5px;
padding: 0.08em 0.38em;
font-size: 0.86em;
color: #b91c5c;
}
kbd {
background: var(--kbd-bg);
border: 1px solid var(--line-2);
border-bottom-width: 2px;
border-radius: 5px;
padding: 0.05em 0.45em;
font-size: 0.78em;
color: var(--ink-2);
line-height: 1;
}
/* ---------- Topbar ---------- */
.topbar {
position: sticky;
top: 0;
z-index: 40;
height: 56px;
display: flex;
align-items: center;
gap: 14px;
padding: 0 18px;
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--panel);
color: var(--ink-2);
cursor: pointer;
}
.nav-toggle:hover { background: var(--bg-2); }
.brand { display: flex; align-items: baseline; gap: 7px; }
.brand-mark { color: var(--accent); font-size: 15px; transform: translateY(1px); }
.brand-name { font-weight: 800; letter-spacing: -0.01em; }
.brand-sub {
color: var(--muted);
font-weight: 500;
font-size: 13px;
padding-left: 8px;
border-left: 1px solid var(--line-2);
}
.topbar-search {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
width: min(320px, 38vw);
padding: 7px 11px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--r-md);
color: var(--muted);
}
.topbar-search:focus-within { border-color: var(--accent); background: var(--panel); }
.topbar-search input {
flex: 1;
border: 0;
background: transparent;
font: inherit;
font-size: 13.5px;
color: var(--ink);
outline: none;
min-width: 0;
}
.topbar-search kbd { font-size: 11px; }
.ver-badge {
font-size: 12px;
font-weight: 600;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, #fff);
border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff);
padding: 3px 9px;
border-radius: 999px;
}
/* ---------- Shell ---------- */
.shell {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
max-width: 1320px;
margin: 0 auto;
}
.scrim {
position: fixed;
inset: 0;
z-index: 30;
background: rgba(15, 15, 25, 0.4);
}
/* ---------- Sidebar ---------- */
.sidebar {
position: sticky;
top: 56px;
align-self: start;
height: calc(100vh - 56px);
overflow-y: auto;
padding: 22px 16px 40px 22px;
border-right: 1px solid var(--line);
}
.nav-group { margin-bottom: 22px; }
.nav-title {
margin: 0 0 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { margin: 1px 0; }
.sidebar a {
display: block;
padding: 6px 10px;
border-radius: var(--r-sm);
color: var(--ink-2);
font-size: 13.5px;
font-weight: 500;
}
.sidebar a:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.sidebar a.is-active {
background: color-mix(in srgb, var(--accent) 9%, #fff);
color: var(--link-hover);
font-weight: 600;
box-shadow: inset 2px 0 0 var(--accent);
}
/* ---------- Content ---------- */
.content {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--toc-w);
gap: 40px;
padding: 30px 40px 96px;
}
.article-col { max-width: 760px; }
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--muted);
margin-bottom: 18px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--link); }
.breadcrumb span[aria-current] { color: var(--ink-2); font-weight: 600; }
.article-head h1 {
margin: 0 0 12px;
font-size: 34px;
line-height: 1.12;
font-weight: 800;
letter-spacing: -0.02em;
}
.lede {
font-family: var(--serif);
font-size: 18px;
line-height: 1.6;
color: var(--ink-2);
margin: 0 0 8px;
}
.lede em { font-style: italic; }
section { padding-top: 18px; }
section h2 {
margin: 28px 0 12px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.article-col p {
font-family: var(--serif);
font-size: 16px;
line-height: 1.65;
color: var(--ink-2);
}
.article-col > section > p,
.article-head .lede { max-width: 70ch; }
/* ---------- Callouts ---------- */
.callout {
--c: var(--note);
display: flex;
gap: 12px;
margin: 18px 0;
padding: 14px 16px 14px 14px;
background: color-mix(in srgb, var(--c) 7%, #fff);
border: 1px solid color-mix(in srgb, var(--c) 24%, #fff);
border-left: 3px solid var(--c);
border-radius: var(--r-md);
}
.callout--note { --c: var(--note); }
.callout--tip { --c: var(--tip); }
.callout--info { --c: var(--info); }
.callout--warn { --c: var(--warn); }
.callout--danger { --c: var(--danger); }
.callout-icon {
flex: none;
width: 24px;
height: 24px;
display: grid;
place-items: center;
color: var(--c);
}
.callout-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.callout-body { min-width: 0; flex: 1; }
.callout-title {
margin: 1px 0 4px !important;
font-family: var(--sans) !important;
font-weight: 700 !important;
font-size: 14px !important;
color: var(--c) !important;
letter-spacing: 0.01em;
}
.callout-body p {
margin: 6px 0 0;
font-family: var(--sans);
font-size: 14px;
line-height: 1.6;
color: var(--ink-2);
}
.callout-body p:first-of-type { margin-top: 0; }
.callout-body ul {
margin: 8px 0 0;
padding-left: 18px;
font-family: var(--sans);
font-size: 14px;
line-height: 1.6;
color: var(--ink-2);
}
.callout-body li { margin: 3px 0; }
.callout-body li::marker { color: var(--c); }
.callout-body code {
background: color-mix(in srgb, var(--c) 10%, #fff);
border-color: color-mix(in srgb, var(--c) 22%, #fff);
color: color-mix(in srgb, var(--c) 70%, #3a0d2a);
}
/* foldable */
.callout.is-foldable { display: block; padding: 0; }
.callout-foldhead {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 13px 14px;
background: transparent;
border: 0;
border-radius: var(--r-md);
cursor: pointer;
text-align: left;
font: inherit;
color: var(--ink);
}
.callout-foldhead:hover { background: color-mix(in srgb, var(--c) 10%, transparent); }
.callout-foldhead .callout-title { margin: 0 !important; flex: 1; }
.fold-chevron {
flex: none;
width: 18px;
height: 18px;
fill: none;
stroke: var(--c);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.2s ease;
}
.callout-foldhead[aria-expanded="true"] .fold-chevron { transform: rotate(180deg); }
.callout-foldbody {
padding: 0 14px 14px 50px;
}
.callout-foldbody p:first-child { margin-top: 0; }
/* code in callout */
.code-wrap {
position: relative;
margin-top: 10px;
}
.code-wrap pre {
margin: 0;
padding: 12px 14px;
background: #1c1d24;
color: #e6e7ec;
border-radius: var(--r-sm);
overflow-x: auto;
font-size: 12.5px;
line-height: 1.7;
}
.code-wrap code { background: none; border: 0; padding: 0; color: inherit; }
.tok-cmd { color: #7dd3fc; font-weight: 600; }
.copy-btn {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
font: 600 11.5px var(--sans);
color: #d6d7de;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--r-sm);
cursor: pointer;
}
.copy-btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.copy-btn svg { stroke: currentColor; stroke-width: 2; fill: none; }
.copy-btn.is-done { color: #86efac; border-color: rgba(134, 239, 172, 0.4); }
/* ---------- Builder ---------- */
.builder {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
margin-top: 16px;
padding: 18px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--r-lg);
}
.builder-controls { display: flex; flex-direction: column; gap: 16px; }
.type-picker { border: 0; padding: 0; margin: 0; }
.type-picker legend,
.field-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
padding: 0;
}
.type-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.type-chip {
--c: var(--note);
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--line-2);
border-radius: 999px;
background: var(--panel);
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
cursor: pointer;
user-select: none;
}
.type-chip--note { --c: var(--note); }
.type-chip--tip { --c: var(--tip); }
.type-chip--info { --c: var(--info); }
.type-chip--warn { --c: var(--warn); }
.type-chip--danger { --c: var(--danger); }
.type-chip::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--c);
}
.type-chip input { position: absolute; opacity: 0; pointer-events: none; }
.type-chip:hover { border-color: var(--c); }
.type-chip:has(input:checked) {
background: color-mix(in srgb, var(--c) 11%, #fff);
border-color: var(--c);
color: color-mix(in srgb, var(--c) 65%, #1a1a1f);
}
.type-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.field { display: flex; flex-direction: column; }
.field input[type="text"],
.field textarea {
width: 100%;
padding: 9px 11px;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: var(--panel);
font: inherit;
font-size: 14px;
color: var(--ink);
resize: vertical;
}
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.field-hint { margin-top: 5px; font-size: 11.5px; color: var(--muted); align-self: flex-end; font-variant-numeric: tabular-nums; }
.builder-actions { display: flex; gap: 8px; margin-top: 2px; }
.btn {
padding: 8px 14px;
font: 600 13.5px var(--sans);
border-radius: var(--r-sm);
cursor: pointer;
border: 1px solid transparent;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--link-hover); }
.btn--ghost { background: var(--panel); border-color: var(--line-2); color: var(--ink-2); }
.btn--ghost:hover { background: var(--bg-2); border-color: var(--ink-2); }
.builder-preview {
display: flex;
flex-direction: column;
}
.preview-label,
.callout-foldbody + * {}
.preview-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 8px;
}
#previewMount { flex: 1; }
#previewMount .callout { margin: 0; }
/* ---------- TOC ---------- */
.toc {
position: sticky;
top: 80px;
align-self: start;
font-size: 13px;
}
.toc-title {
margin: 0 0 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted);
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a {
display: block;
padding: 4px 0 4px 12px;
color: var(--muted);
border-left: 2px solid var(--line);
}
.toc a:hover { color: var(--link); border-color: var(--link); text-decoration: none; }
/* ---------- Toast ---------- */
.toast {
position: fixed;
bottom: 22px;
left: 50%;
transform: translate(-50%, 16px);
background: var(--ink);
color: #fff;
font-size: 13.5px;
font-weight: 500;
padding: 10px 16px;
border-radius: var(--r-md);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
z-index: 70;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
.content { grid-template-columns: 1fr; }
.toc { display: none; }
}
@media (max-width: 820px) {
.nav-toggle { display: inline-flex; }
.shell { grid-template-columns: 1fr; }
.sidebar {
position: fixed;
top: 56px;
left: 0;
z-index: 35;
width: min(280px, 82vw);
background: var(--panel);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
transform: translateX(-105%);
transition: transform 0.24s ease;
}
.sidebar.is-open { transform: translateX(0); }
.content { padding: 24px 22px 80px; }
.builder { grid-template-columns: 1fr; }
.article-head h1 { font-size: 28px; }
}
@media (max-width: 520px) {
body { font-size: 14.5px; }
.topbar { gap: 10px; padding: 0 12px; }
.topbar-search { width: auto; }
.topbar-search input { display: none; }
.topbar-search kbd { display: none; }
.brand-sub { display: none; }
.content { padding: 18px 14px 72px; }
.article-head h1 { font-size: 24px; }
.lede { font-size: 16px; }
.callout { padding: 12px; }
.callout-foldbody { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; transition: none !important; }
}(function () {
"use strict";
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-show");
}, 2200);
}
function copyText(text) {
if (navigator.clipboard && navigator.clipboard.writeText) {
return navigator.clipboard.writeText(text);
}
return new Promise(function (resolve, reject) {
try {
var ta = document.createElement("textarea");
ta.value = text;
ta.setAttribute("readonly", "");
ta.style.position = "absolute";
ta.style.left = "-9999px";
document.body.appendChild(ta);
ta.select();
document.execCommand("copy");
document.body.removeChild(ta);
resolve();
} catch (e) {
reject(e);
}
});
}
/* ---------- sidebar drawer ---------- */
var sidebar = document.getElementById("sidebar");
var navToggle = document.getElementById("navToggle");
var scrim = document.getElementById("scrim");
function setNav(open) {
if (!sidebar) return;
sidebar.classList.toggle("is-open", open);
if (navToggle) navToggle.setAttribute("aria-expanded", String(open));
if (scrim) scrim.hidden = !open;
}
if (navToggle) {
navToggle.addEventListener("click", function () {
setNav(!sidebar.classList.contains("is-open"));
});
}
if (scrim) scrim.addEventListener("click", function () { setNav(false); });
if (sidebar) {
sidebar.addEventListener("click", function (e) {
if (e.target.closest("a") && window.matchMedia("(max-width: 820px)").matches) {
setNav(false);
}
});
}
document.addEventListener("keydown", function (e) {
if (e.key === "Escape") setNav(false);
});
/* ---------- search focus shortcut ---------- */
var searchInput = document.querySelector(".topbar-search input");
document.addEventListener("keydown", function (e) {
if (
e.key === "/" &&
searchInput &&
document.activeElement !== searchInput &&
!/^(INPUT|TEXTAREA)$/.test((document.activeElement || {}).tagName || "")
) {
e.preventDefault();
searchInput.focus();
}
});
/* ---------- collapsible callouts ---------- */
document.querySelectorAll("[data-fold]").forEach(function (fold) {
var head = fold.querySelector(".callout-foldhead");
var body = fold.querySelector(".callout-foldbody");
if (!head || !body) return;
head.addEventListener("click", function () {
var open = head.getAttribute("aria-expanded") === "true";
head.setAttribute("aria-expanded", String(!open));
body.hidden = open;
});
});
/* ---------- copy buttons on code callouts ---------- */
document.querySelectorAll(".copy-btn").forEach(function (btn) {
btn.addEventListener("click", function () {
var text = btn.getAttribute("data-copy") || "";
copyText(text).then(
function () {
var label = btn.querySelector("span");
var prev = label ? label.textContent : "";
if (label) label.textContent = "Copied";
btn.classList.add("is-done");
toast("Snippet copied to clipboard");
setTimeout(function () {
if (label) label.textContent = prev;
btn.classList.remove("is-done");
}, 1600);
},
function () {
toast("Copy failed — select manually");
}
);
});
});
/* ---------- live builder ---------- */
var ICONS = {
note: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg>',
tip: '<svg viewBox="0 0 24 24"><path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-4 10.5c.8.8 1 1.3 1 2.5h6c0-1.2.2-1.7 1-2.5A6 6 0 0 0 12 3Z"/></svg>',
info: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg>',
warn: '<svg viewBox="0 0 24 24"><path d="M12 3 2 20h20L12 3Z"/><path d="M12 10v4M12 17h.01"/></svg>',
danger: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M15 9l-6 6M9 9l6 6"/></svg>'
};
var ROLE = { danger: "alert", warn: "note", note: "note", tip: "note", info: "note" };
var typePicker = document.getElementById("typePicker");
var titleInput = document.getElementById("titleInput");
var bodyInput = document.getElementById("bodyInput");
var charCount = document.getElementById("charCount");
var mount = document.getElementById("previewMount");
var resetBtn = document.getElementById("resetBtn");
var copyMarkup = document.getElementById("copyMarkup");
var DEFAULTS = { type: "note", title: "Heads up", body: bodyInput ? bodyInput.value : "" };
function escapeHtml(s) {
return String(s)
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """);
}
function currentType() {
var checked = typePicker ? typePicker.querySelector('input[name="ctype"]:checked') : null;
return checked ? checked.value : "note";
}
function buildMarkup(type, title, body) {
var role = ROLE[type] || "note";
var safeTitle = escapeHtml(title || (type.charAt(0).toUpperCase() + type.slice(1)));
var safeBody = escapeHtml(body || "Add your callout text here.");
return (
'<aside class="callout callout--' + type + '" role="' + role + '">\n' +
' <div class="callout-icon" aria-hidden="true">' + ICONS[type] + "</div>\n" +
' <div class="callout-body">\n' +
' <p class="callout-title">' + safeTitle + "</p>\n" +
" <p>" + safeBody + "</p>\n" +
" </div>\n" +
"</aside>"
);
}
function render() {
if (!mount) return;
var type = currentType();
var title = titleInput ? titleInput.value : "";
var body = bodyInput ? bodyInput.value : "";
mount.innerHTML = buildMarkup(type, title, body);
if (charCount && bodyInput) charCount.textContent = String(bodyInput.value.length);
}
if (typePicker) typePicker.addEventListener("change", render);
if (titleInput) titleInput.addEventListener("input", render);
if (bodyInput) bodyInput.addEventListener("input", render);
if (resetBtn) {
resetBtn.addEventListener("click", function () {
var note = typePicker ? typePicker.querySelector('input[value="' + DEFAULTS.type + '"]') : null;
if (note) note.checked = true;
if (titleInput) titleInput.value = DEFAULTS.title;
if (bodyInput) bodyInput.value = DEFAULTS.body;
render();
toast("Builder reset");
});
}
if (copyMarkup) {
copyMarkup.addEventListener("click", function () {
var markup = buildMarkup(
currentType(),
titleInput ? titleInput.value : "",
bodyInput ? bodyInput.value : ""
);
copyText(markup).then(
function () { toast("Callout markup copied"); },
function () { toast("Copy failed — select manually"); }
);
});
}
render();
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Aurora DB Handbook — Callouts & Admonitions</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,[email protected],400;8..60,500;8..60,600&family=JetBrains+Mono:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="topbar">
<button class="nav-toggle" id="navToggle" aria-expanded="false" aria-controls="sidebar" aria-label="Toggle navigation">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<div class="brand">
<span class="brand-mark" aria-hidden="true">◆</span>
<span class="brand-name">Aurora DB</span>
<span class="brand-sub">Handbook</span>
</div>
<div class="topbar-search" role="search">
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/><path d="m20 20-3.2-3.2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<input type="search" placeholder="Search the handbook" aria-label="Search the handbook" />
<kbd>/</kbd>
</div>
<span class="ver-badge">v3.4</span>
</header>
<div class="shell">
<div class="scrim" id="scrim" hidden></div>
<nav class="sidebar" id="sidebar" aria-label="Documentation sections">
<div class="nav-group">
<p class="nav-title">Getting started</p>
<ul>
<li><a href="#">Installation</a></li>
<li><a href="#">Quick start</a></li>
<li><a href="#">Connecting a cluster</a></li>
</ul>
</div>
<div class="nav-group">
<p class="nav-title">Writing docs</p>
<ul>
<li><a href="#main" class="is-active" aria-current="page">Callouts & admonitions</a></li>
<li><a href="#gallery">The five types</a></li>
<li><a href="#collapsible">Collapsible details</a></li>
<li><a href="#code-callout">Code in callouts</a></li>
<li><a href="#builder">Live builder</a></li>
</ul>
</div>
<div class="nav-group">
<p class="nav-title">Reference</p>
<ul>
<li><a href="#">Query language</a></li>
<li><a href="#">Replication</a></li>
<li><a href="#">Backups</a></li>
</ul>
</div>
</nav>
<main class="content" id="main">
<div class="article-col">
<nav class="breadcrumb" aria-label="Breadcrumb">
<a href="#">Handbook</a>
<span aria-hidden="true">/</span>
<a href="#">Writing docs</a>
<span aria-hidden="true">/</span>
<span aria-current="page">Callouts & admonitions</span>
</nav>
<header class="article-head">
<h1>Callouts & Admonitions</h1>
<p class="lede">
Admonitions pull a reader's eye toward something that doesn't belong in the
normal flow of prose — a caveat, a shortcut, or a warning that prevents data
loss. Aurora DB's handbook ships five semantic variants plus a foldable
<em>details</em> block. Use them sparingly; a page where everything is
highlighted highlights nothing.
</p>
</header>
<section id="gallery" aria-labelledby="gallery-h">
<h2 id="gallery-h">The five types</h2>
<p>
Each block carries a left accent border, a tinted background, an inline icon,
and a bold title. Pick the variant whose meaning matches the message — the
colour is part of the signal.
</p>
<aside class="callout callout--note" role="note">
<div class="callout-icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg>
</div>
<div class="callout-body">
<p class="callout-title">Note</p>
<p>
Aurora DB stores timestamps in UTC internally. The <code>at_zone()</code>
function converts on read, so a row written from Tokyo and read from Lisbon
returns the same instant rendered in two different wall clocks.
</p>
</div>
</aside>
<aside class="callout callout--tip" role="note">
<div class="callout-icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-4 10.5c.8.8 1 1.3 1 2.5h6c0-1.2.2-1.7 1-2.5A6 6 0 0 0 12 3Z"/></svg>
</div>
<div class="callout-body">
<p class="callout-title">Tip</p>
<p>
Wrap multi-statement migrations in a single transaction. If the third
<code>ALTER TABLE</code> fails, the cluster rolls the whole batch back and
your schema never lands in a half-applied state.
</p>
</div>
</aside>
<aside class="callout callout--info" role="note">
<div class="callout-icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg>
</div>
<div class="callout-body">
<p class="callout-title">Info</p>
<p>The default cluster ships with three roles. They differ in what they may write:</p>
<ul>
<li><code>reader</code> — read-only access to every namespace.</li>
<li><code>author</code> — read plus write to owned namespaces.</li>
<li><code>steward</code> — full control, including schema migrations.</li>
</ul>
</div>
</aside>
<aside class="callout callout--warn" role="note">
<div class="callout-icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M12 3 2 20h20L12 3Z"/><path d="M12 10v4M12 17h.01"/></svg>
</div>
<div class="callout-body">
<p class="callout-title">Warning</p>
<p>
Rebuilding a secondary index locks writes on the affected table. On the
<code>orders</code> table at peak that can stall checkout for minutes —
schedule it inside a maintenance window.
</p>
</div>
</aside>
<aside class="callout callout--danger" role="alert">
<div class="callout-icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M15 9l-6 6M9 9l6 6"/></svg>
</div>
<div class="callout-body">
<p class="callout-title">Danger</p>
<p>
<code>DROP NAMESPACE</code> is irreversible and skips the trash. There is
no soft-delete window and no undo — restore from a backup is the only path
back. Double-check the target name before you press enter.
</p>
</div>
</aside>
</section>
<section id="collapsible" aria-labelledby="collapsible-h">
<h2 id="collapsible-h">Collapsible details</h2>
<p>
Long supplementary content — full error tables, edge cases, the gnarly
footnote — can fold away behind a toggle so it doesn't break a reader's
stride. Activate the header with the mouse, <kbd>Enter</kbd>, or
<kbd>Space</kbd>.
</p>
<aside class="callout callout--note is-foldable" data-fold>
<button class="callout-foldhead" type="button" aria-expanded="false">
<span class="callout-icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg>
</span>
<span class="callout-title">Why did my connection drop after 30 minutes?</span>
<svg class="fold-chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="callout-foldbody" hidden>
<p>
Idle connections are reaped after <code>30m</code> by default. The pooler
considers a connection idle when it hasn't issued a statement; an open
transaction that never commits still counts as idle.
</p>
<ul>
<li>Raise the limit with <code>SET idle_timeout = '2h'</code>.</li>
<li>Or send a lightweight <code>SELECT 1</code> heartbeat from the client.</li>
</ul>
</div>
</aside>
</section>
<section id="code-callout" aria-labelledby="code-callout-h">
<h2 id="code-callout-h">Code inside a callout</h2>
<p>
When the actionable part of a callout is a command, embed a copyable code
block. The copy button writes the snippet to the clipboard so the reader never
has to hand-select it.
</p>
<aside class="callout callout--tip" role="note">
<div class="callout-icon" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-4 10.5c.8.8 1 1.3 1 2.5h6c0-1.2.2-1.7 1-2.5A6 6 0 0 0 12 3Z"/></svg>
</div>
<div class="callout-body">
<p class="callout-title">Tip — verify before you migrate</p>
<p>Dry-run a migration against a throwaway branch first:</p>
<div class="code-wrap">
<button class="copy-btn" type="button" data-copy="aurora branch create --from main staging aurora migrate --branch staging --dry-run aurora migrate --branch staging --apply">
<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
<span>Copy</span>
</button>
<pre><code><span class="tok-cmd">aurora</span> branch create --from main staging
<span class="tok-cmd">aurora</span> migrate --branch staging --dry-run
<span class="tok-cmd">aurora</span> migrate --branch staging --apply</code></pre>
</div>
</div>
</aside>
</section>
<section id="builder" aria-labelledby="builder-h">
<h2 id="builder-h">Live builder</h2>
<p>
Pick a type and type a title to preview the exact markup you'd embed. The
preview updates as you type.
</p>
<div class="builder">
<div class="builder-controls">
<fieldset class="type-picker">
<legend>Type</legend>
<div class="type-grid" id="typePicker" role="radiogroup" aria-label="Callout type">
<label class="type-chip type-chip--note"><input type="radio" name="ctype" value="note" checked /><span>Note</span></label>
<label class="type-chip type-chip--tip"><input type="radio" name="ctype" value="tip" /><span>Tip</span></label>
<label class="type-chip type-chip--info"><input type="radio" name="ctype" value="info" /><span>Info</span></label>
<label class="type-chip type-chip--warn"><input type="radio" name="ctype" value="warn" /><span>Warning</span></label>
<label class="type-chip type-chip--danger"><input type="radio" name="ctype" value="danger" /><span>Danger</span></label>
</div>
</fieldset>
<label class="field">
<span class="field-label">Title</span>
<input type="text" id="titleInput" value="Heads up" maxlength="48" placeholder="e.g. Read this first" />
</label>
<label class="field">
<span class="field-label">Body</span>
<textarea id="bodyInput" rows="3" maxlength="240" placeholder="Write the callout content…">Replication lag is normal under heavy write bursts and self-heals within a few seconds.</textarea>
<span class="field-hint"><span id="charCount">0</span>/240</span>
</label>
<div class="builder-actions">
<button class="btn btn--ghost" type="button" id="resetBtn">Reset</button>
<button class="btn btn--primary" type="button" id="copyMarkup">Copy markup</button>
</div>
</div>
<div class="builder-preview">
<p class="preview-label">Preview</p>
<div id="previewMount" aria-live="polite"></div>
</div>
</div>
</section>
</div>
<aside class="toc" aria-label="On this page">
<p class="toc-title">On this page</p>
<ul>
<li><a href="#gallery">The five types</a></li>
<li><a href="#collapsible">Collapsible details</a></li>
<li><a href="#code-callout">Code in callouts</a></li>
<li><a href="#builder">Live builder</a></li>
</ul>
</aside>
</main>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Callout / Admonition Blocks
A reusable family of admonition blocks rendered inside a realistic Aurora DB handbook page — a sticky top bar with search, a persistent left sidebar, a readable serif article column capped around 760px, and a sticky right-rail table of contents. Five semantic variants cover the common needs: a blue Note, a green Tip, a teal Info, an amber Warning, and a red Danger alert. Each one pairs a coloured left accent border and tinted background with an inline SVG icon, a bold title, and body content that can hold inline code, paragraphs, and lists — the colour itself carries the signal.
Beyond the static gallery, three interactions show the pattern in motion. A foldable details admonition collapses long supplementary content behind a keyboard-operable header (toggle with the mouse, Enter, or Space), with a chevron that rotates as it opens. A Tip that wraps a multi-line shell snippet carries a copy button that writes the command to the clipboard and confirms with a toast. The icons, roles, and tinting are all driven from a small token map so a Danger block correctly announces itself as an alert while the rest use note.
The live builder closes the loop: choose a type from the segmented radiogroup, type a title and body, and the preview re-renders the exact callout markup as you type — with a character counter, a reset, and a Copy markup button that hands you paste-ready HTML. The whole shell is responsive, collapsing the sidebar to a drawer with a scrim below 820px and dropping the TOC on narrow screens, down to 360px.
Illustrative UI only — fictional articles, products, and data.