FullStack VC

Design System · Markdown · Callouts

Callouts

Every type below is rendered through the production LFM pipeline — parseMarkdown() → AstroMarkdown → Callout.astro. Toggle the mode to see light / dark / vibrant adaptations.

Canonical: packages/lfm-astro/components/Callout.astro · See also Markdown components index.

Mode
Theme

All ten callout types

Header-less variants

Some authors want the colored container without a label. Use [!info]- (Obsidian's foldable-empty syntax) or supply an explicit empty title:

Lists, paragraphs, and code inside callouts

Tailwind v4 preflight zeros out <p> margins and list bullets globally. The callout stylesheet restores prose flow scoped to the callout body so multi-paragraph + bulleted content renders correctly:

Aliases

Authors don't have to remember canonical names. The callout-types registry maps:

  • warn, caution, attention → warning

  • fail, failure, error, bug → danger

  • hint → tip

  • check, done → success

  • todo → note

  • abstract, summary, tldr → info

  • faq, help → question

Anything unrecognized falls back to note.

Authoring syntax

> [!info] Optional title
> Body content. Supports **markdown**, lists, code, multiple paragraphs.
>
> - bullet
> - bullet
>
> Trailing paragraph works too.

Adding a new type

  1. Add an entry to CALLOUT_TYPES in callout-types.ts (label + iconPaths).
  2. Add a .ak-callout--{type} rule in callout.css setting --callout-accent to a Tier-1 named color from theme.css.
  3. Add light-mode and (if a loud color) dark-mode overrides in the same file.
  4. Optionally add aliases in the ALIASES map.