Open demo

CSS code

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5.5M12 7.6h.01"/></symbol>
  <symbol id="i-bulb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V16h5.2v-.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z"/></symbol>
  <symbol id="i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v12H9l-5 4z"/><path d="M12 7.5v3.5M12 13.5h.01"/></symbol>
  <symbol id="i-warn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 4.2 2.9 17.3a2 2 0 0 0 1.7 3h14.8a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z"/><path d="M12 9.5v4.2M12 16.9h.01"/></symbol>
  <symbol id="i-stop" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.3 3h7.4L21 8.3v7.4L15.7 21H8.3L3 15.7V8.3z"/><path d="M12 7.8v5M12 16.2h.01"/></symbol>
  <symbol id="i-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1 1 0 0 1 0 1.4l-7.3 7.3a1 1 0 0 1-1.4 0z"/><circle cx="8" cy="8" r="1.4"/></symbol>
  <symbol id="i-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></symbol>
</svg>

<div><span class="lbl">Five callout types</span>
<article class="doc">
  <h2>Deploying a Quarry site</h2>
  <p>Run <code>quarry build</code> to write the finished site to <code>dist/</code>, then upload that folder to any static host.</p>
  <div class="co co-note" role="note"><p class="co-label"><svg aria-hidden="true"><use href="#i-info"/></svg>Note</p><p>The build reads <code>quarry.config.js</code> from the folder you run it in, not from the project root.</p></div>
  <div class="co co-tip" role="note"><p class="co-label"><svg aria-hidden="true"><use href="#i-bulb"/></svg>Tip</p><p>Add <code>--watch</code> during development and Quarry rebuilds only the pages you changed.</p></div>
  <div class="co co-important" role="note"><p class="co-label"><svg aria-hidden="true"><use href="#i-star"/></svg>Important</p><p>Set <code>site.url</code> before your first deploy. Sitemaps and feed links are built from it.</p></div>
  <div class="co co-warning" role="note"><p class="co-label"><svg aria-hidden="true"><use href="#i-warn"/></svg>Warning</p><p>Images over 8 MB are copied unoptimised. <a href="#">Read the image guide</a> for size limits.</p></div>
  <div class="co co-caution" role="note"><p class="co-label"><svg aria-hidden="true"><use href="#i-stop"/></svg>Caution</p><p><code>quarry clean --all</code> deletes <code>dist/</code> and the image cache. It cannot be undone.</p></div>
</article></div>

<div><span class="lbl">Card with a version badge and code</span>
<article class="doc">
  <div class="co co-card" role="note" aria-labelledby="co-dep">
    <div class="co-head"><p class="co-label" id="co-dep"><svg aria-hidden="true"><use href="#i-tag"/></svg>quarry.paginate()</p><span class="co-badge co-badge-old">Deprecated in 3.0</span><span class="co-badge co-badge-new">Replacement since 2.4</span></div>
    <div class="co-body">
      <p>Use <code>collection.pages()</code> instead. It returns the same objects and also works with filtered collections.</p>
      <pre class="co-pre"><span class="del">- const pages = quarry.paginate(posts, 10);</span>
<span class="add">+ const pages = posts.pages({ size: 10 });</span>
<span class="cm">  // pages[0].items, pages[0].next, pages[0].url</span></pre>
    </div>
  </div>
  <p>Old calls keep working until 4.0 and print one warning per build.</p>
</article></div>

<div><span class="lbl">Collapsible question callout</span>
<article class="doc">
  <details class="co co-important">
    <summary><span class="co-q" aria-hidden="true">?</span>Why is my build slower on CI than on my laptop?<svg class="co-chev" aria-hidden="true"><use href="#i-chev"/></svg></summary>
    <div class="co-more">
      <p>CI runners start with an empty image cache, so every photo is resized again. Cache the <code>.quarry/</code> folder between runs.</p>
      <p>On a typical 400-page site this takes a build from 3 minutes to about 40 seconds.</p>
    </div>
  </details>
  <details class="co co-tip" open>
    <summary><span class="co-q" aria-hidden="true">?</span>Can I deploy only the pages that changed?<svg class="co-chev" aria-hidden="true"><use href="#i-chev"/></svg></summary>
    <div class="co-more">
      <p>Yes. Run <code>quarry build --since main</code> and upload the list written to <code>dist/.changed</code>.</p>
    </div>
  </details>
</article></div>
CSS 
/* Docs callouts: role="note" boxes with a label. One set of custom properties per type. */
.co{--co-accent:#2563eb;--co-bg:#eff6ff;--co-label:#1d4ed8;
  margin:0 0 18px;padding:14px 18px 14px 16px;border-left:4px solid var(--co-accent);border-radius:4px 12px 12px 4px;background:var(--co-bg);color:#1e293b;font-size:.9375rem;line-height:1.65}
.co-tip{--co-accent:#16a34a;--co-bg:#f0fdf4;--co-label:#15803d}
.co-important{--co-accent:#7c3aed;--co-bg:#f5f3ff;--co-label:#6d28d9}
.co-warning{--co-accent:#d97706;--co-bg:#fffbeb;--co-label:#b45309}
.co-caution{--co-accent:#dc2626;--co-bg:#fef2f2;--co-label:#b91c1c}
.co .co-label,.co-label{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--co-label)}
.co-label svg{width:17px;height:17px;flex:none}
.co:last-child{margin-bottom:0}
.co p{margin:0}
.co code{padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.75);border:1px solid rgba(15,23,42,.08);color:#0f172a;font-size:.875em}
.co a{color:var(--co-label);font-weight:600;text-decoration:underline;text-underline-offset:2px;border-radius:3px}
.co a:focus-visible{outline:2px solid var(--co-label);outline-offset:2px}

/* 2. Card callout with a version badge and a code sample */
.co-card{padding:0;border:1px solid #e2e8f0;border-radius:14px;background:#fff;overflow:hidden}
.co-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 18px;border-bottom:1px solid #e2e8f0;background:#f8fafc}
.co-head .co-label{margin:0;color:#0f172a;letter-spacing:0;text-transform:none;font-size:.9375rem}
.co-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:99px;font-size:.75rem;font-weight:700}
.co-badge-new{background:#dcfce7;color:#166534}
.co-badge-old{background:#fee2e2;color:#991b1b}
.co-card .co-body{padding:14px 18px 16px}
.co-card .co-body>p+*{margin-top:12px}
.co-pre{margin:0;padding:14px 16px;border-radius:10px;background:#0f172a;color:#e2e8f0;font:.8125rem/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.co-pre .del{color:#fca5a5}
.co-pre .add{color:#86efac}
.co-pre .cm{color:#94a3b8}

/* 3. Collapsible callout on <details> */
details.co{padding:0}
.co summary{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:0 12px 12px 0;font-weight:650;color:#0f172a;cursor:pointer;list-style:none}
.co summary::-webkit-details-marker{display:none}
.co summary .co-q{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--co-accent);color:#fff;font-size:.8125rem;font-weight:800}
.co summary .co-chev{width:18px;height:18px;margin-left:auto;color:var(--co-label);transition:transform .2s}
.co[open] summary .co-chev{transform:rotate(180deg)}
.co summary:focus-visible{outline:2px solid var(--co-label);outline-offset:-2px}
.co .co-more{padding:0 18px 16px 50px}
.co .co-more p+p{margin-top:10px}

@media (max-width:600px){.co .co-more{padding-left:18px}}
@media (prefers-reduced-motion:reduce){.co summary .co-chev{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5.5M12 7.6h.01"/></symbol>
  <symbol id="i-bulb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V16h5.2v-.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z"/></symbol>
  <symbol id="i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v12H9l-5 4z"/><path d="M12 7.5v3.5M12 13.5h.01"/></symbol>
  <symbol id="i-warn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 4.2 2.9 17.3a2 2 0 0 0 1.7 3h14.8a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z"/><path d="M12 9.5v4.2M12 16.9h.01"/></symbol>
  <symbol id="i-stop" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.3 3h7.4L21 8.3v7.4L15.7 21H8.3L3 15.7V8.3z"/><path d="M12 7.8v5M12 16.2h.01"/></symbol>
  <symbol id="i-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1 1 0 0 1 0 1.4l-7.3 7.3a1 1 0 0 1-1.4 0z"/><circle cx="8" cy="8" r="1.4"/></symbol>
  <symbol id="i-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></symbol>
</svg>

<div><span class="lbl">Five callout types</span>
<article class="doc">
  <h2>Deploying a Quarry site</h2>
  <p>Run <code>quarry build</code> to write the finished site to <code>dist/</code>, then upload that folder to any static host.</p>
  <div class="alert co co-note" role="note"><p class="co-label"><svg aria-hidden="true"><use href="#i-info"/></svg>Note</p><p>The build reads <code>quarry.config.js</code> from the folder you run it in, not from the project root.</p></div>
  <div class="alert co co-tip" role="note"><p class="co-label"><svg aria-hidden="true"><use href="#i-bulb"/></svg>Tip</p><p>Add <code>--watch</code> during development and Quarry rebuilds only the pages you changed.</p></div>
  <div class="alert co co-important" role="note"><p class="co-label"><svg aria-hidden="true"><use href="#i-star"/></svg>Important</p><p>Set <code>site.url</code> before your first deploy. Sitemaps and feed links are built from it.</p></div>
  <div class="alert co co-warning" role="note"><p class="co-label"><svg aria-hidden="true"><use href="#i-warn"/></svg>Warning</p><p>Images over 8 MB are copied unoptimised. <a href="#" class="alert-link">Read the image guide</a> for size limits.</p></div>
  <div class="alert co co-caution" role="note"><p class="co-label"><svg aria-hidden="true"><use href="#i-stop"/></svg>Caution</p><p><code>quarry clean --all</code> deletes <code>dist/</code> and the image cache. It cannot be undone.</p></div>
</article></div>

<div><span class="lbl">Card with a version badge and code</span>
<article class="doc">
  <div class="card co-card" role="note" aria-labelledby="co-dep">
    <div class="card-header"><p class="co-label" id="co-dep"><svg aria-hidden="true"><use href="#i-tag"/></svg>quarry.paginate()</p><span class="badge rounded-pill co-badge-old">Deprecated in 3.0</span><span class="badge rounded-pill co-badge-new">Replacement since 2.4</span></div>
    <div class="card-body">
      <p class="card-text mb-0">Use <code>collection.pages()</code> instead. It returns the same objects and also works with filtered collections.</p>
      <pre class="co-pre"><span class="del">- const pages = quarry.paginate(posts, 10);</span>
<span class="add">+ const pages = posts.pages({ size: 10 });</span>
<span class="cm">  // pages[0].items, pages[0].next, pages[0].url</span></pre>
    </div>
  </div>
  <p>Old calls keep working until 4.0 and print one warning per build.</p>
</article></div>

<div><span class="lbl">Collapsible question callout</span>
<article class="doc">
  <details class="alert co co-important">
    <summary><span class="co-q" aria-hidden="true">?</span>Why is my build slower on CI than on my laptop?<svg class="co-chev" aria-hidden="true"><use href="#i-chev"/></svg></summary>
    <div class="co-more">
      <p>CI runners start with an empty image cache, so every photo is resized again. Cache the <code>.quarry/</code> folder between runs.</p>
      <p>On a typical 400-page site this takes a build from 3 minutes to about 40 seconds.</p>
    </div>
  </details>
  <details class="alert co co-tip" open>
    <summary><span class="co-q" aria-hidden="true">?</span>Can I deploy only the pages that changed?<svg class="co-chev" aria-hidden="true"><use href="#i-chev"/></svg></summary>
    <div class="co-more">
      <p>Yes. Run <code>quarry build --since main</code> and upload the list written to <code>dist/.changed</code>.</p>
    </div>
  </details>
</article></div>
CSS 
/* Callouts are .alert elements with role="note"; the card callout is a .card with .badge labels. */
.co{--co-accent:#2563eb;--co-label:#1d4ed8;--bs-alert-bg:#eff6ff;--bs-alert-color:#1e293b;--bs-alert-border-color:transparent;--bs-alert-margin-bottom:18px;
  --bs-alert-padding-x:16px;--bs-alert-padding-y:14px;padding-right:18px;border:0;border-left:4px solid var(--co-accent);border-radius:4px 12px 12px 4px;font-size:.9375rem;line-height:1.65}
.co-tip{--co-accent:#16a34a;--co-label:#15803d;--bs-alert-bg:#f0fdf4}
.co-important{--co-accent:#7c3aed;--co-label:#6d28d9;--bs-alert-bg:#f5f3ff}
.co-warning{--co-accent:#d97706;--co-label:#b45309;--bs-alert-bg:#fffbeb}
.co-caution{--co-accent:#dc2626;--co-label:#b91c1c;--bs-alert-bg:#fef2f2}
.co .co-label,.co-label{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--co-label)}
.co-label svg{width:17px;height:17px;flex:none}
.co:last-child{margin-bottom:0}
.co p{margin:0}
.co code,.co-card code{padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.75);border:1px solid rgba(15,23,42,.08);color:#0f172a;font-size:.875em}
.co .alert-link{color:var(--co-label);font-weight:600;text-decoration:underline;text-underline-offset:2px;border-radius:3px}
.co .alert-link:focus-visible{outline:2px solid var(--co-label);outline-offset:2px}

/* 2. Card callout */
.co-card{--bs-card-border-color:#e2e8f0;--bs-card-border-radius:14px;--bs-card-cap-bg:#f8fafc;--bs-card-cap-padding-x:18px;--bs-card-cap-padding-y:12px;
  --bs-card-spacer-x:18px;--bs-card-spacer-y:14px;margin-bottom:18px;overflow:hidden;font-size:.9375rem;line-height:1.65;color:#1e293b}
.co-card .card-header{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.co-card .card-header .co-label{margin:0;color:#0f172a;letter-spacing:0;text-transform:none;font-size:.9375rem}
.co-card .card-body{padding-bottom:16px}
.co-card .card-text+*{margin-top:12px}
.co-card .card-text code{background:#f1f5f9;border-color:transparent}
.co-card .badge{padding:4px 10px;font-size:.75rem;font-weight:700}
.co-badge-new{background:#dcfce7;color:#166534}
.co-badge-old{background:#fee2e2;color:#991b1b}
.co-pre{margin:0;padding:14px 16px;border-radius:10px;background:#0f172a;color:#e2e8f0;font:.8125rem/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.co-pre .del{color:#fca5a5}
.co-pre .add{color:#86efac}
.co-pre .cm{color:#94a3b8}

/* 3. Collapsible callout on <details> */
details.co{padding:0}
.co summary{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:0 12px 12px 0;font-weight:650;color:#0f172a;cursor:pointer;list-style:none}
.co summary::-webkit-details-marker{display:none}
.co summary .co-q{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--co-accent);color:#fff;font-size:.8125rem;font-weight:800}
.co summary .co-chev{width:18px;height:18px;margin-left:auto;color:var(--co-label);transition:transform .2s}
.co[open] summary .co-chev{transform:rotate(180deg)}
.co summary:focus-visible{outline:2px solid var(--co-label);outline-offset:-2px}
.co .co-more{padding:0 18px 16px 50px}
.co .co-more p+p{margin-top:10px}

@media (max-width:600px){.co .co-more{padding-left:18px}}
@media (prefers-reduced-motion:reduce){.co summary .co-chev{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5.5M12 7.6h.01"/></symbol>
  <symbol id="i-bulb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V16h5.2v-.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z"/></symbol>
  <symbol id="i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v12H9l-5 4z"/><path d="M12 7.5v3.5M12 13.5h.01"/></symbol>
  <symbol id="i-warn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 4.2 2.9 17.3a2 2 0 0 0 1.7 3h14.8a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z"/><path d="M12 9.5v4.2M12 16.9h.01"/></symbol>
  <symbol id="i-stop" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.3 3h7.4L21 8.3v7.4L15.7 21H8.3L3 15.7V8.3z"/><path d="M12 7.8v5M12 16.2h.01"/></symbol>
  <symbol id="i-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1 1 0 0 1 0 1.4l-7.3 7.3a1 1 0 0 1-1.4 0z"/><circle cx="8" cy="8" r="1.4"/></symbol>
  <symbol id="i-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></symbol>
</svg>

<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6474] uppercase">Five callout types</span>
<article class="rounded-2xl border border-[#e2e8f0] bg-white px-9 py-8 leading-[1.7] text-[#334155] shadow-[0_1px_2px_rgba(15,23,42,.05)] max-[600px]:px-[18px] max-[600px]:py-[22px]">
  <h2 class="mb-2.5 text-[1.35rem] leading-[1.3] font-bold tracking-[-.02em] text-[#0f172a]">Deploying a Quarry site</h2>
  <p class="mb-[18px]">Run <code class="rounded-md bg-[#f1f5f9] px-1.5 py-px text-[.875em] text-[#0f172a]">quarry build</code> to write the finished site to <code class="rounded-md bg-[#f1f5f9] px-1.5 py-px text-[.875em] text-[#0f172a]">dist/</code>, then upload that folder to any static host.</p>
  <div class="mb-[18px] rounded-l-[4px] rounded-r-xl border-l-4 border-[#2563eb] bg-[#eff6ff] py-3.5 pr-[18px] pl-4 text-[.9375rem] leading-[1.65] text-[#1e293b]" role="note"><p class="mb-1 flex items-center gap-2 text-[.8125rem] font-bold tracking-[.06em] text-[#1d4ed8] uppercase"><svg class="size-[17px] flex-none" aria-hidden="true"><use href="#i-info"/></svg>Note</p><p>The build reads <code class="rounded-md border border-[rgba(15,23,42,.08)] bg-white/75 px-1.5 py-px text-[.875em] text-[#0f172a]">quarry.config.js</code> from the folder you run it in, not from the project root.</p></div>
  <div class="mb-[18px] rounded-l-[4px] rounded-r-xl border-l-4 border-[#16a34a] bg-[#f0fdf4] py-3.5 pr-[18px] pl-4 text-[.9375rem] leading-[1.65] text-[#1e293b]" role="note"><p class="mb-1 flex items-center gap-2 text-[.8125rem] font-bold tracking-[.06em] text-[#15803d] uppercase"><svg class="size-[17px] flex-none" aria-hidden="true"><use href="#i-bulb"/></svg>Tip</p><p>Add <code class="rounded-md border border-[rgba(15,23,42,.08)] bg-white/75 px-1.5 py-px text-[.875em] text-[#0f172a]">--watch</code> during development and Quarry rebuilds only the pages you changed.</p></div>
  <div class="mb-[18px] rounded-l-[4px] rounded-r-xl border-l-4 border-[#7c3aed] bg-[#f5f3ff] py-3.5 pr-[18px] pl-4 text-[.9375rem] leading-[1.65] text-[#1e293b]" role="note"><p class="mb-1 flex items-center gap-2 text-[.8125rem] font-bold tracking-[.06em] text-[#6d28d9] uppercase"><svg class="size-[17px] flex-none" aria-hidden="true"><use href="#i-star"/></svg>Important</p><p>Set <code class="rounded-md border border-[rgba(15,23,42,.08)] bg-white/75 px-1.5 py-px text-[.875em] text-[#0f172a]">site.url</code> before your first deploy. Sitemaps and feed links are built from it.</p></div>
  <div class="mb-[18px] rounded-l-[4px] rounded-r-xl border-l-4 border-[#d97706] bg-[#fffbeb] py-3.5 pr-[18px] pl-4 text-[.9375rem] leading-[1.65] text-[#1e293b]" role="note"><p class="mb-1 flex items-center gap-2 text-[.8125rem] font-bold tracking-[.06em] text-[#b45309] uppercase"><svg class="size-[17px] flex-none" aria-hidden="true"><use href="#i-warn"/></svg>Warning</p><p>Images over 8 MB are copied unoptimised. <a href="#" class="rounded-[3px] font-semibold text-[#b45309] underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#b45309]">Read the image guide</a> for size limits.</p></div>
  <div class="rounded-l-[4px] rounded-r-xl border-l-4 border-[#dc2626] bg-[#fef2f2] py-3.5 pr-[18px] pl-4 text-[.9375rem] leading-[1.65] text-[#1e293b]" role="note"><p class="mb-1 flex items-center gap-2 text-[.8125rem] font-bold tracking-[.06em] text-[#b91c1c] uppercase"><svg class="size-[17px] flex-none" aria-hidden="true"><use href="#i-stop"/></svg>Caution</p><p><code class="rounded-md border border-[rgba(15,23,42,.08)] bg-white/75 px-1.5 py-px text-[.875em] text-[#0f172a]">quarry clean --all</code> deletes <code class="rounded-md border border-[rgba(15,23,42,.08)] bg-white/75 px-1.5 py-px text-[.875em] text-[#0f172a]">dist/</code> and the image cache. It cannot be undone.</p></div>
</article></div>

<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6474] uppercase">Card with a version badge and code</span>
<article class="rounded-2xl border border-[#e2e8f0] bg-white px-9 py-8 leading-[1.7] text-[#334155] shadow-[0_1px_2px_rgba(15,23,42,.05)] max-[600px]:px-[18px] max-[600px]:py-[22px]">
  <div class="mb-[18px] overflow-hidden rounded-[14px] border border-[#e2e8f0] bg-white text-[.9375rem] leading-[1.65] text-[#1e293b]" role="note" aria-labelledby="co-dep">
    <div class="flex flex-wrap items-center gap-2.5 border-b border-[#e2e8f0] bg-[#f8fafc] px-[18px] py-3"><p class="flex items-center gap-2 font-bold text-[#0f172a]" id="co-dep"><svg class="size-[17px] flex-none" aria-hidden="true"><use href="#i-tag"/></svg>quarry.paginate()</p><span class="inline-flex items-center rounded-full bg-[#fee2e2] px-2.5 py-0.5 text-xs font-bold text-[#991b1b]">Deprecated in 3.0</span><span class="inline-flex items-center rounded-full bg-[#dcfce7] px-2.5 py-0.5 text-xs font-bold text-[#166534]">Replacement since 2.4</span></div>
    <div class="px-[18px] pt-3.5 pb-4">
      <p>Use <code class="rounded-md bg-[#f1f5f9] px-1.5 py-px text-[.875em] text-[#0f172a]">collection.pages()</code> instead. It returns the same objects and also works with filtered collections.</p>
      <pre class="mt-3 rounded-[10px] bg-[#0f172a] px-4 py-3.5 font-mono text-[.8125rem] leading-[1.7] wrap-anywhere whitespace-pre-wrap text-[#e2e8f0]"><span class="text-[#fca5a5]">- const pages = quarry.paginate(posts, 10);</span>
<span class="text-[#86efac]">+ const pages = posts.pages({ size: 10 });</span>
<span class="text-[#94a3b8]">  // pages[0].items, pages[0].next, pages[0].url</span></pre>
    </div>
  </div>
  <p>Old calls keep working until 4.0 and print one warning per build.</p>
</article></div>

<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6474] uppercase">Collapsible question callout</span>
<article class="rounded-2xl border border-[#e2e8f0] bg-white px-9 py-8 leading-[1.7] text-[#334155] shadow-[0_1px_2px_rgba(15,23,42,.05)] max-[600px]:px-[18px] max-[600px]:py-[22px]">
  <details class="group mb-[18px] rounded-l-[4px] rounded-r-xl border-l-4 border-[#7c3aed] bg-[#f5f3ff] text-[.9375rem] leading-[1.65] text-[#1e293b]">
    <summary class="flex cursor-pointer list-none items-center gap-2.5 rounded-r-xl px-4 py-[13px] font-[650] text-[#0f172a] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#6d28d9] [&::-webkit-details-marker]:hidden"><span class="grid size-6 flex-none place-items-center rounded-full bg-[#7c3aed] text-[.8125rem] font-extrabold text-white" aria-hidden="true">?</span>Why is my build slower on CI than on my laptop?<svg class="ml-auto size-[18px] flex-none text-[#6d28d9] transition-transform duration-200 group-open:rotate-180 motion-reduce:transition-none" aria-hidden="true"><use href="#i-chev"/></svg></summary>
    <div class="space-y-2.5 pr-[18px] pb-4 pl-[50px] max-[600px]:pl-[18px]">
      <p>CI runners start with an empty image cache, so every photo is resized again. Cache the <code class="rounded-md border border-[rgba(15,23,42,.08)] bg-white/75 px-1.5 py-px text-[.875em] text-[#0f172a]">.quarry/</code> folder between runs.</p>
      <p>On a typical 400-page site this takes a build from 3 minutes to about 40 seconds.</p>
    </div>
  </details>
  <details class="group rounded-l-[4px] rounded-r-xl border-l-4 border-[#16a34a] bg-[#f0fdf4] text-[.9375rem] leading-[1.65] text-[#1e293b]" open>
    <summary class="flex cursor-pointer list-none items-center gap-2.5 rounded-r-xl px-4 py-[13px] font-[650] text-[#0f172a] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#15803d] [&::-webkit-details-marker]:hidden"><span class="grid size-6 flex-none place-items-center rounded-full bg-[#16a34a] text-[.8125rem] font-extrabold text-white" aria-hidden="true">?</span>Can I deploy only the pages that changed?<svg class="ml-auto size-[18px] flex-none text-[#15803d] transition-transform duration-200 group-open:rotate-180 motion-reduce:transition-none" aria-hidden="true"><use href="#i-chev"/></svg></summary>
    <div class="space-y-2.5 pr-[18px] pb-4 pl-[50px] max-[600px]:pl-[18px]">
      <p>Yes. Run <code class="rounded-md border border-[rgba(15,23,42,.08)] bg-white/75 px-1.5 py-px text-[.875em] text-[#0f172a]">quarry build --since main</code> and upload the list written to <code class="rounded-md border border-[rgba(15,23,42,.08)] bg-white/75 px-1.5 py-px text-[.875em] text-[#0f172a]">dist/.changed</code>.</p>
    </div>
  </details>
</article></div>

About this set

Callouts for documentation, shown inside a page of fictional docs for a static site builder called Quarry. The first group covers the five admonition types that GitHub, Docusaurus and most docs tools settled on: Note, Tip, Important, Warning and Caution, each with a 4px coloured edge, a tinted background, an icon and an uppercase label, so readers learn to scan for them. Inline code inside a callout gets a light chip that stays readable on every tint. The card callout is for API changes: a header with the function name, a red Deprecated in 3.0 badge and a green Replacement since 2.4 badge, a sentence and a diff-style code sample that wraps instead of scrolling. The collapsible callouts are question and answer boxes on native details and summary elements, for background that most readers can skip, with a rotating chevron and one opened by default. Every callout is a div with role=”note” and a visible label, so screen reader users hear what kind of note it is. There is no JavaScript in this set. The Bootstrap version uses .alert for the callouts and .card with .badge for the card callout.

What’s included

  • Note, Tip, Important, Warning and Caution types
  • Card callout with version badges and a wrapped code sample
  • Collapsible question callouts on native details
  • role="note" with a visible label on every callout
  • No JavaScript

Accessibility

Callouts use role="note" and start with a text label, so the type is announced and never shown by colour alone; icons are hidden from assistive technology. The collapsible callouts are native details elements, so Enter and Space open them and their state is announced. Summaries and links show a visible focus outline, and the chevron rotation stops under prefers-reduced-motion.

Customise it

Each type sets --co-accent, --co-bg and --co-label on .co-note, .co-tip, .co-important, .co-warning and .co-caution; add a type by copying one of those lines. The code sample colours are on .co-pre. In Bootstrap the same properties sit beside --bs-alert-bg; in Tailwind edit the border-l, bg and text utilities.