Shortcodes
What are shortcodes
Shortcodes are special blocks in your markdown that create layouts and components beyond what standard markdown offers — grids, galleries, hero images, and more. They use ::: block syntax.
:::grid 2
Column one content.
---
Column two content.
:::
Hero
A full-width hero section with a background image or video and optional overlay text.
:::hero
![[panorama.jpg]]
# Welcome to my site
A personal corner of the web.
:::
The first line inside the block is the media reference (wikilink, markdown image, or bare filename). Everything after it becomes overlay content.
Use pipe syntax for display control:
:::hero
![[mountains.jpg|contain top]]
:::
Grid
A multi-column layout. Specify the number of columns and optionally a ratio.
:::grid 3
First column.
---
Second column.
---
Third column.
:::
Cells are separated by ---. The number after grid sets the column count.
With ratio control:
:::grid 2 1:2
Narrow sidebar.
---
Wide main content area.
:::
With custom classes:
:::grid 3 {.profiles .featured}
Team member one.
---
Team member two.
---
Team member three.
:::
Grid cell content
Cells automatically recognize and render:
- Wikilinks:
[[folder_name]]or[[Article Title]]— rendered as cards with covers - Markdown links:
[text](url) - Images:
or![[photo.jpg]] - Bare URLs:
https://example.com— auto-converted to links
Gallery
An image grid for photo galleries.
:::gallery
:::
Optionally specify a column count:
:::gallery 3
:::
Table of contents
Insert a table of contents generated from the page's headings.
<!--MOSS_TOC_PLACEHOLDER-->
:::
Buttons
A styled row of buttons from markdown links. The first link becomes the primary button; the rest are secondary.
:::buttons
[Download](https://example.com/download)
[View source](https://github.com/example)
:::
Callouts
Highlighted blocks for notes, warnings, and tips. Uses Obsidian-compatible syntax:
> [!note]
> This is a note callout.
> [!warning] Careful
> This action cannot be undone.
> [!tip] Pro tip
> You can nest markdown inside callouts.
The word after [! sets the type. An optional title follows on the same line.
All callout types:
note, tip, warning, caution, important, info, abstract, todo, success, question, failure, danger, bug, example, quote
Callouts can span multiple paragraphs — use > on empty lines:
> [!note] Long callout
> First paragraph.
>
> Second paragraph with **formatting**.
Attributes
Add custom CSS classes to any shortcode block using {.class} syntax:
:::grid 2 {.comparison}
Before
---
After
:::
This adds the comparison class to the grid container, which you can target in your style.css.