Matthew Kudija

Home About Notes Reading Notes

Obsidian Callouts

Obsidian-themed callouts (also known as alerts or admonitions).

Note

Rendered

HTML

<div class="note">
    <p>Here is an alert</p>
</div>

Espanso

    - trigger: ";note"
    replace: "<div class=\"note\">
      <p>$|$</p>
    </div>
    "

Info

Rendered

HTML

<div class="info">
    <p>Here is an alert</p>
</div>

Espanso

    - trigger: ";info"
    replace: "<div class=\"info\">
      <p>$|$</p>
    </div>
    "

Warning

Rendered

HTML

<div class="warning">
    <p>Here is an alert</p>
</div>

Espanso

    - trigger: ";warn"
    replace: "<div class=\"warning\">
      <p>$|$</p>
    </div>
    "

Error

Rendered

HTML

<div class="error">
    <p>Here is an alert</p>
</div>

Espanso

    - trigger: ";err"
    replace: "<div class=\"error\">
      <p>$|$</p>
    </div>
    "

Success

Rendered

HTML

<div class="success">
    <p>Here is an alert</p>
</div>

Espanso

    - trigger: ";suc"
    replace: "<div class=\"success\">
      <p>$|$</p>
    </div>
    "

CSS

Add this CSS to your Obsidian CSS Snippets:

/*Bootstrap style alerts: */
.note, .info, .success, .warning, .error {
margin: 10px 0px;
padding:12px;

}
.note {
    color: #63666a;
    background-color: #whitesmoke;
    border-radius: 4px;
    border: .5px solid #63666a;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
    border-radius: 4px;
    border: .5px solid #00529B;
}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;
    border-radius: 4px;
    border: .5px solid #4F8A10;
}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    border-radius: 4px;
    border: .5px solid #9F6000;
}
.error {
    color: #D8000C;
    background-color: #FFD2D2;
    border-radius: 4px;
    border: .5px solid #D8000C;
}
.info i, .success i, .warning i, .error i {
    margin:15px 22px;
    font-size:2em;
    vertical-align:middle;
}

---

Survey

A quick survey of some callout / alert styles. Note: images may not render on published version.

Obsidian (rendered 2023-01-14)

Obsidian will render callouts with this syntax ( Use callouts - Obsidian Help):

> [!INFO]
> Here's a callout block.

[!INFO]
Here's a callout block.

[!NOTE]
Here's a callout block.

[!WARNING]
Here's a callout block.

[!DANGER]
Here's a callout block.

[!SUCCESS]
Here's a callout block.

Obsidian (docs)

Link
!Pasted image 20230114215926.png

Confluence

!Pasted image 20230114215300.png

Bootstrap v4

Link
!Pasted image 20230114215519.png

Bootstrap v5

Link
!Pasted image 20230114220031.png

---

Created: 2023-01-14-Sat
Updated: 2023-01-16-Mon