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)
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;
/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
Use a theme prefix for classes?
e.g. dark | light
vivid | pastel
.sa5-callout.is-info-pastel
Last updated