This page exercises every callout type and alias supported by @lossless-group/lfm's remark-callouts plugin, as rendered by the new Callout.astro component. Toggle the theme between light and dark to verify mode-aware accents.
The ten canonical types
Aliases
These should render as their canonical type (warn → warning, tldr → info, etc.).
Edge cases
Unknown type falls back to note
Empty title (foldable syntax) suppresses the header row
Missing title uses the default label
Rich content inside callouts
Casing — any case should yield identical rendering
The remark plugin lowercases the bracketed type before matching, and resolveCalloutType() lowercases again. So Obsidian-style UPPERCASE, Title Case, and lowercase all resolve to the same canonical type. There is no enforcement of casing.
Column-escape positioning (desktop ≥1280px only)
Callouts can opt out of the article column in two ways. The bracket syntax can't take attributes, so escape/offset callouts use the directive form. Below 1280px, the position attribute is ignored and the callout flows normally in-column.
Full escape — entirely in the right margin
The next callout floats fully into the right gutter parallel to this paragraph. Its width is 80% of the available margin track (which scales with viewport width), so on a 1920px screen it'll be wider than on a 1280px screen. The callout sits visually next to the prose rather than between paragraphs, the way a print-magazine sidebar does. Surrounding paragraphs flow past it on the left side without being displaced — that's what float: right plus a negative margin-right gives us.
This paragraph continues normally in the article column. On wider viewports you should see this prose flowing past the callout's left edge. As soon as the prose runs longer than the callout's height, the column reflows back to its full width. On narrow screens (below 1280px) the callout snaps back into the column above this paragraph and reads inline.
Full escape — entirely in the left margin
Same recipe mirrored. The left-margin variant is rarer in Western reading layouts (left-to-right gutter is normally just whitespace), but it's useful for editorial/aside content that should clearly read as separate from the main argument.
Surrounding prose flows around the callout on the right side. The pattern shares CSS arithmetic with the YouTube playlist scroller — both use (100vw - 100%) / 2 to find the available margin, so they line up visually if both appear on the same page.
Offset right — partial overhang
The next callout extends 3rem past the right edge of the article column but most of its body still overlaps the column. Use this when you want the callout to read as in-flow but visually distinct from the main reader, without losing column width.
Offset left — partial overhang
Mirror of the above. Often paired with offset-right callouts in alternating sequence to give a page visual rhythm.
This paragraph closes the position section. The combination of in-column, escape-left, escape-right, offset-left, and offset-right gives five reading-rhythm positions for callouts — useful for long-form essays where uniform in-column callouts would feel monotonous.
Done
If every block above renders with a distinct accent color, the matching icon, and the right header text — and if toggling the theme switcher recolors them all without breaking contrast — the integration is working.