Badges
Compact labels with color-coded backgrounds.
Classes
.forge-badge + .badge-cyan / .badge-amber / .badge-emerald / .badge-red / .badge-dim
Callouts / Alerts
Contextual callout boxes for tips, warnings, and status messages.
Info
Cyan callout — informational context or tips.
Warning
Amber callout — caution or important notes.
Success
Emerald callout — success or positive outcome.
Error
Red callout — errors or critical warnings.
Surface
Surface callout — neutral container.
Code Blocks & Inline
Inline code and Ctrl+K keyboard shortcut styling.
Classes
.forge-code · .keyword · .highlight · .comment
Topic preview card
For product sites that load forge-theme.js + forgesdlc-theme.css, use
render_topic_preview_trigger() (or an <a class="fs-topic-preview-card" href="…">)
to open a page in a same-tab modal. The iframe requests ?fs-embed=1 and fs-preview-rail=1; forge-theme.js adds matching html classes so global chrome (sidebar, primary nav, mobile bar, offcanvas, theme dropdown) is hidden inside the iframe. A Markdown .toc, if present, is hoisted into the modal’s right rail; otherwise it stays in-article (embed-only without the rail flag). The modal shell uses a minimal top-right toolbar (open full page + close).
This page loads product CSS only for this section — see For Agents if tokens clash on a handbook-themed page.
Python / API
render_topic_preview_trigger(href=…, title=…, description=…, eyebrow=…) · JS: openTopicPreviewModal · query: fs-embed=1 + fs-preview-rail=1