📢 Callouts

📢 Callouts Reference

Callout reference code.

Debug Callout

🕷️

Bug found! Squash it now!

<div class="callout debug">
    <span class="callout-icon">🕷️</span>
    <div class="callout-content">
        Bug found! Squash it now!
    </div>
</div>

Error Callout

❌

An error occurred. Check logs.

<div class="callout error">
    <span class="callout-icon">❌</span>
    <div class="callout-content">
        An error occurred. Check logs.
    </div>
</div>

Info Callout

ℹ️

This is an informational callout.

<div class="callout info">
    <span class="callout-icon">ℹ️</span>
    <div class="callout-content">
        This is an informational callout.
    </div>
</div>

Success Callout

✅

Task completed successfully!

<div class="callout success">
    <span class="callout-icon">✅</span>
    <div class="callout-content">
        Task completed successfully!
    </div>
</div>

Todo Callout

📌

Pending task: needs attention soon.

<div class="callout todo">
    <span class="callout-icon">📌</span>
    <div class="callout-content">
        Pending task: needs attention soon.
    </div>
</div>

Warning Callout

⚠️

Proceed with caution!

<div class="callout warning">
    <span class="callout-icon">⚠️</span>
    <div class="callout-content">
        Proceed with caution!
    </div>
</div>

Quote Callout

💬

“Reality oscillates.” - Clear Maxim

<div class="callout quote">
    <span class="callout-icon">💬</span>
    <div class="callout-content">
        “Reality oscillates.” - Clear Maxim
    </div>
</div>