Callout Extras 🛠️

Extends Obsidian Callout functionality via CSS Snippet

Features ⭐

• Card with image and text
• Card with title and text
• Card with only text
• Group of cards
• Image aligned
• Compatible with Obsidian Style Settings Plugin

Note

Alignment left and right can be only seen in Reading Mode

Preview 🔍

You can see a demo here or some previews in the images folder

Installation 🚀

1. Download callout-extras.css from this repo.
2. Open Obsidian and go to Settings > Appearance.
3. Scroll down to CSS Snippets and click on Open snippets folder button.
4. Drop callout-extras.css into the folder.
5. Back in Obsidian, click on Reload snippets button.
6. Toggle the switch to enable the snippet.
7. Enjoy!

Usage 📄

Important

The callout should be added before the text

Image card with text & Card with title and text

Identifier	Description
figure	centered aligned card with image or title and a description
figure-right	right aligned card with image or title and a description
figure-left	left aligned card with image or title and a description

> [!figure] ![alt-text](link)
> Description

> [!figure-right] ![alt-text](link)
> Description

> [!figure-left] ![alt-text](link)
> Description

> [!figure] Title
> Description

> [!figure-right] Title
> Description

> [!figure-left] Title
> Description

Image with alignment

Identifier	Description
figure-img	centered image
figure-img-right	right aligned
figure-img-left	left aligned

> [!figure-img] ![alt-text](link)

> [!figure-img-right] ![alt-text](link)

> [!figure-img-left] ![alt-text](link)

Cards without title

Identifier	Description
figure-note	centered card with description
figure-note-right	right aligned card with description
figure-note-right	left aligned card with description

> [!figure-note]
> Description

> [!figure-note-right]
> Description

> [!figure-note-left]
> Description

Card group

Identifier	Description
figure-group	Group cards in the same line, up to 3 cards

> [!figure-group]
>
> > [!figure] ![alt_text](link)
> > Description
>
> > [!figure] ![alt_text](link)
> > Description
>
> ...

Extra 🎁

This snippet is compatible with obsidian-completr plugin. You can add the following snippet in .obsidian\plugins\obsidian-completr\callouts_suggestions.json to autocomplete the callout:

{
  "displayName": "Figure",
  "replacement": "figure",
  "icon": "gallery-thumbnails",
  "color": "#ffa500"
},
{
  "displayName": "Figure right",
  "replacement": "figure-right",
  "icon": "gallery-thumbnails",
  "color": "#ffa500"
},
{
  "displayName": "Figure left",
  "replacement": "figure-left",
  "icon": "gallery-thumbnails",
  "color": "#ffa500"
},
{
  "displayName": "Figure image",
  "replacement": "figure-img",
  "icon": "image",
  "color": "#ffa500"
},
{
  "displayName": "Figure image right",
  "replacement": "figure-img-right",
  "icon": "image",
  "color": "#ffa500"
},
{
  "displayName": "Figure image left",
  "replacement": "figure-img-left",
  "icon": "image",
  "color": "#ffa500"
},
{
  "displayName": "Figure note",
  "replacement": "figure-note",
  "icon": "sticky-note",
  "color": "#ffa500"
},
{
  "displayName": "Figure note right",
  "replacement": "figure-note-right",
  "icon": "sticky-note",
  "color": "#ffa500"
},
{
  "displayName": "Figure note left",
  "replacement": "figure-note-left",
  "icon": "sticky-note",
  "color": "#ffa500"
},
{
  "displayName": "Figure group",
  "replacement": "figure-group",
  "icon": "layout-grid",
  "color": "#ffa500"
}