# Call-Outs

Convert any Webflow blockquote to a stylized callout including an icon, font and background color

* **Information**: ℹ️ (Information Symbol)
* **Warning**: ⚠️ (Warning Symbol)
* **Success**: ✅ (Check Mark)
* **Caution**: ⚠️ (Triangle Warning)
* **Error**: ❌ (Cross Mark)
* **Note**: 📝 (Memo) 
* **Tips**: 💡 (Light Bulb)
* **FAQs**: ❓ (Question Mark)
* **Quotes**: 🗣️ (Speaking Head)

## Recommended Icons

Default

Custom

Styling by color

Create classes

( paste from cloneable ) 

`.sa5-callout-info` 

Background color, image, side border 

, background icon 

font, etc. 

border-levt

Prefixes; 

|            |      | Default styling  |
| ---------- | ---- | ---------------- |
| `/info`    | `i`  | Info. Blue.      |
| `/warning` | `!!` | Danger. Red.     |
| `/caution` | `!`  | Caution. Orange. |
| `/note`    |      |                  |
| `/faq`     | `?`  |                  |
| `/feature` | `$`  | Success. Green.  |
|            |      | Yellow           |
|            |      | Purple           |

Optional first line of text, e.g. "did you know?" 

Control with CSS and `::before` styling 

* **Information**: `i`
* **Warning**: `!`
* **Success**: `+`
* **Caution**: `*`
* **Error**: `x`
* **Note**: `n`

<https://codepen.io/memetican/pen/BaeJPwY/6eb9010c97458d0c708ac20b44fb2c39>

<https://codepen.io/memetican/pen/abrqvpe/17a1a0ec34b7dbfa470b32a4d80ec090>

Sygnal Style Guide | Main&#x20;

Use a theme prefix for classes?&#x20;

e.g. dark | light&#x20;

vivid | pastel&#x20;

.sa5-callout.is-info-pastel

```
blockquote.callout {
    padding: 1em;
    margin: 1em 0;
    border-radius: 5px;
    position: relative;
    padding-left: 2em;
    font-style: italic;
}

.callout-info {
    background-color: #e7f3fe;
    border-left: 5px solid #2196F3;
}

.callout-warning {
    background-color: #fff3cd;
    border-left: 5px solid #ffc107;
}

.callout-success {
    background-color: #d4edda;
    border-left: 5px solid #28a745;
}

.callout-error {
    background-color: #f8d7da;
    border-left: 5px solid #dc3545;
}

.callout-note {
    background-color: #e2e3e5;
    border-left: 5px solid #6c757d;
}

.callout-icon {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.5em;
}

```

```
document.querySelectorAll('blockquote.callout').forEach(blockquote => {
    const text = blockquote.textContent.trim();
    let icon = '';
    let typeClass = '';

    if (text.startsWith('ℹ️')) {
        typeClass = 'callout-info';
        icon = 'ℹ️';
    } else if (text.startsWith('⚠️')) {
        typeClass = 'callout-warning';
        icon = '⚠️';
    } else if (text.startsWith('✅')) {
        typeClass = 'callout-success';
        icon = '✅';
    } else if (text.startsWith('❌')) {
        typeClass = 'callout-error';
        icon = '❌';
    } else if (text.startsWith('📝')) {
        typeClass = 'callout-note';
        icon = '📝';
    }

    if (typeClass) {
        blockquote.classList.add(typeClass);
        blockquote.innerHTML = `<span class="callout-icon">${icon}</span>` + blockquote.innerHTML.slice(icon.length);
    }
});

```