Warning This guide is outdated, check out the new updated guide for more accurate information about the callout snippet.
| Type | Description |
|---|---|
[!infobox] |
Wikipedia-like infoboxes: How to Format |
[!captions] |
Displays text around image in the style of a caption |
[!kanban] |
Displays a (functionally limited) kanban board: How to Format |
[!grid] |
Display images in a grid/masonry style: How to Format |
[!recite] |
A D&D styled popout |
[!metadata] |
Styled callout that colors **bold** words, table headers, and inline dataview keys blue |
[!cards] |
Style images and dataview tables like notion's gallery view: How to Format |
[!table] |
Prevent table from wrapping |
[!aside] |
Add asides to the side of notes |
[!timeline] |
Style callout as a vertical Timeline How to Format |
[!column] |
Style inner callouts as columns: How to Format |
Format Syntax:
> [!callout-type|adjustment adjustment2]
> [!kanban|n-t]
> [!kanban|no-title txt-c]
> [!caption|left]
Callouts uses the same parameters as the images for resizing (width-wise) and moving it.
| Abbr. | Full Title | Description |
|---|---|---|
no-t |
no-title |
Hides callout title |
s-t |
show-title |
|
n-th |
no-table-header |
Hides table header in callouts |
no-i |
no-icon |
Hide callout icon |
txt-c |
text-Center |
Center callout text |
ttl-c |
title-Center |
Center callout title text |
embed |
Remove callout padding to expand embed | |
nmg |
no-margin |
Remove callout margins |
clean |
Remove callout Styling | |
alt-co |
Alternate Callout styling for individual callouts | |
alt-line |
Minimalistic callout style with only title underlined | |
dim |
Dim collapsible (+/-) callouts unless hovered and opened |
|
dim-hvr |
Dim callout unless hovered | |
collapse |
Remove all padding and margins for ultra compact look | |
t-w |
table-wide |
Widen table to edges of callout |
tbl-cln |
table-clean |
Remove most table styling: lines, background colors |
Yaml css classes to style different on per page basis
| cssclass | Description |
|---|---|
alt-co |
Alternate Callout Styling, use callout color as background color |
co-ttl-ctr |
Center callout titles |
| Abbr. | Full Title | Description |
|---|---|---|
c- |
color- |
Change callout title/border color |
bg- |
background- |
Change callout background color |
bg-c- |
background-color- |
Change callout title and background color |
- Colors:
- purple
- blue
- green
- red
- pink
- orange
- yellow
- gray
Syntax:
> [!recite|color-blue]
> [!recite|background-blue]
> [!recite|background-color-blue]> [!recite|c-purple]
> [!recite|bg-purple]
> [!recite|bg-c-purple]Text Color: 
Background Color: 
Text & Background Colors: 
> [!infobox]
> # Name
> ![[Image.png|cover hsmall]]
> ###### Stats
> | Type | Stat |
> | ---- | ---- |
> | Test | Testing |
> | Test | Testing |
>
> ##### Stats 2
> | Type | Stat |
> | ---- | ---- |
> | Test | Testing |
> | Test | Testing |> [!infobox]+ Collapsible Infobox
> # Name
> ![[Image.png|cover hsmall]]
> ###### Stats
> | Type | Stat |
> | ---- | ---- |
> | Test | Testing |
> | Test | Testing |
>
> ###### Stats 2
> | Type | Stat |
> | ---- | ---- |
> | Test | Testing |
> | Test | Testing |> [!infobox|left]
> # Name
> ![[Image.png|cover hsmall]]
> ###### Stats
> | Type | Stat |
> | ---- | ---- |
> | Test | Testing |
> | Test | Testing |
>
> ###### Stats 2
> | Type | Stat |
> | ---- | ---- |
> | Test | Testing |
> | Test | Testing |
[!grid] |
Best type for internally linked images |
[!grid|masonry] |
Best type for externally linked images |
> [!grid]
> ![[Internal Image.png]]
> ![[Internal Image 2.png]]
>
> ![[Internal Image 3 on New Row.png]]
> [!grid|masonry]
> 
> 
>
> 
> [!kanban]+
> - [[Link|Lane 1 Title]]
> - ![[Image.png]]
> - [[Link|Card]]
> - [[Link|Lane 2 Title]]
> ![[Image without background card styling.png]]
> - [[Link|Card]]
> - Text
> - [ ] Text
Might want to install the Image Adjustments snippet to control the images sizing
- Blank Line
>separated **Bold**syntax will center text and and a background color (no background color for dataview tables)
| Adjustment | Description |
|---|---|
2, 4, 5 |
Change number of columns; 3 is default |
dataview |
Style dataview table and lists as cards |
dvl |
Style dataview list |
External and Internal Images:
> [!cards]
> **[[Link]]**
> 
>
> **[[Link]]**
> ![[Image Link.png|sban htiny ctr]]Add More Columns:
> [!cards|4]
> **[[Link]]**
> 
>
> **[[Link]]**
> ![[Image Link.png|sban htiny ctr]]
>
> **[[Link]]**
> 
>
> **[[Link]]**
> ![[Image Link.png|sban htiny ctr]]Style Dataview Table:
> [!cards|dataview]
> ```dataview
> TABLE WITHOUT ID
> "![|sban cover hmicro](" + image + ")" as Image,
> "**"+ file.link + "**" AS "Column Name",
> FROM "folder"
> SORT file.name
> LIMIT 10
> ```
| Adjustment | Description |
|---|---|
flex |
Wrap column on smaller width screens |
3, 4 |
Add more columns; Default is 2 |
dataview |
Styles dataview LISTs into columns (column numbers work with this as well) |
> [!column]
>> [!info] Column 1
>> - Use another callout for columns
>
>> [!note] Column 2
>> Need that singular blockquote `>` as separation between columns> [!column|flex 3]
>> [!info|no-t]
>> Column 1
>
>> [!important]+ Current Topics
>> Column 2> [!column|dataview 3] 3 Columns for Dataview List
> ```dataview
> LIST
> FROM ""
> LIMIT 20
> ```
| Adjustment | Description |
|---|---|
t-l |
Timeline callout left side |
t-r |
Timeline callout right side |
t-1 to t-10 |
Add some spacing above the timeline callout to simulate how close events are in time |
> [!timeline|t-l] **Title** _Subtitle_
> Left aligned timeline piece
> [!timeline|t-r t-4] **Title** *Subtitle*
> Right aligned timeline piece
> [!timeline|t-r t-10] **Title** *Subtitle*
> Spaced timeline piece
| Adjustment | Description |
|---|---|
show-title |
Brings back callout title for Asides |
clean |
Remove Aside styling |
tufte |
Tufte Aside styling (WIP, somewhat buggy) |
left |
Move aside left |
right |
Move aside right |
> [!aside|clean right]
> Removes styling from aside
> [!aside|tufte]+
> Tufte styled aside callout
> [!aside|tufte title]
> Show callout title for asides