Call-Outs

Convert any Webflow blockquote to a stylized callout

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)

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;

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

Use a theme prefix for classes?

e.g. dark | light

vivid | pastel

.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);
    }
});

Last updated