Callouts Cheat Sheet

These examples are meant to be copied directly into a note.

Figure caption

> [!figure] Photo by Mike at the Austin offsite
> ![[your-image.jpg]]

Use the callout title as the caption.

Aside callout

> [!aside] Quick context
> This is a general side note or pull quote.

Float left

> [!aside|left] Quick context
> This callout floats left beside the next paragraph.

Float right

> [!aside|right] Takeaway
> This callout floats right beside the next paragraph.

Float sizes

> [!aside|left small] Small aside
> Narrower float.

> [!aside|right large] Larger aside
> Wider float.

Clear floats

> [!clear]

Add that after a floated callout when the next section should start below it.

Hero block

> [!hero] Beyond Automating Bottlenecks
> ![[your-hero-image.jpg]]
>
> A bigger, more editorial opening section.

Banner block

> [!banner] Strategy Offsite
> ![[your-banner-image.jpg]]

Cards wrapper

> [!cards]
> > [!card] Field Notes
> > ![[your-image.jpg]]
> >
> > Short summary text.
>
> > [!card] Another Card
> > ![[another-image.jpg]]
> >
> > Another summary.

Single card

> [!card] Field Notes
> ![[your-image.jpg]]
>
> Short summary text.

Panel callout

> [!panel] Default panel
> Standard branded panel.

Panel flavors

> [!panel|paper] Paper panel
> Soft neutral treatment.

> [!panel|sage] Sage panel
> Green-tinted treatment.

> [!panel|gold] Gold panel
> Warmer highlight treatment.

> [!panel|berry] Berry panel
> More vivid accent treatment.

> [!panel|storm] Storm panel
> Cooler blue treatment.

> [!panel|ink] Ink panel
> Dark, high-contrast treatment.

> [!panel|outline] Outline panel
> Dashed, lighter-weight treatment.

Tagline

> [!tagline]
> Short, quiet, centered text.

Transcript

Use a transcript for a short, intentionally structured human-and-AI exchange. The title names the exchange; inner callouts name the speaker. Use only human and ai roles. The published site renders human turns on the right and AI turns on the left, while the Markdown remains readable in Obsidian.

> [!transcript] Finding Intent
>
> > [!human] Mike
> > Climate change.
>
> > [!ai] Zai
> > *Produces a fluent explanation about climate change...*

transcript names the presentation pattern. When an exchange is reconstructed, illustrative, or condensed, say so in the surrounding prose rather than presenting it as a verbatim record.

Extending the system

To add your own flavor, copy an existing panel metadata rule from:

• .obsidian/snippets/Besso Brand Components.css

Then create a new metadata keyword such as clay, signal, or ocean.