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)
Caution: β οΈ (Triangle Warning)
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;
Optional first line of text, e.g. "did you know?"
Control with CSS and ::before
styling
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