Loading Component...
Loading
Thank you! I'll update
this project ASAP.
this project ASAP.
Oops! Something went wrong while submitting the form.
How to enable Google authentication
How to enable Facebook authentication
How to enable Spotify authentication
How to enable Dribbble authentication
How to enable Github authentication
How to enable LinkedIn authentication
How to enable passwordless logins
How to configure password validation
How to show/hide password
How to work with profile images
How to add a forgot password flow
How to work with checkboxes
How to configure pricing tables
About the Stripe Customer Portal
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd30","type":"Block","tag":"div","classes":["b1ddd61e-7794-9da7-1d10-d271b7d23227"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd31","9da28881-0599-1d96-10e9-0b6edd63bd3c"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd31","type":"Block","tag":"div","classes":["e3b6b0e7-8852-65d1-28db-eded49bf4909"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd32","9da28881-0599-1d96-10e9-0b6edd63bd3a"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message","value":"success"}],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd32","type":"Block","tag":"div","classes":["9173597a-753d-9af4-8e57-d79e51f90063"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd34","9da28881-0599-1d96-10e9-0b6edd63bd33","9da28881-0599-1d96-10e9-0b6edd63bd35"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd34","type":"Block","tag":"div","classes":["0bbeba22-a7c6-01c3-dd1b-42d2cc71a5cf","21ace15b-f97a-7d58-9b6a-eb322d5cdf82"],"children":[],"data":{"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"text":false}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd33","type":"HtmlEmbed","tag":"div","classes":["97b2306a-86e8-620e-e65d-708dd9c64923"],"children":[],"v":"<svg width=\"30\" height=\"30\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM8 15L3 10L4.41 8.59L8 12.17L15.59 4.58L17 6L8 15Z\" fill=\"currentColor\"/>\n</svg>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<svg width=\"30\" height=\"30\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM8 15L3 10L4.41 8.59L8 12.17L15.59 4.58L17 6L8 15Z\" fill=\"currentColor\"/>\n</svg>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd35","type":"Block","tag":"div","classes":[],"children":["9da28881-0599-1d96-10e9-0b6edd63bd36","9da28881-0599-1d96-10e9-0b6edd63bd38"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd36","type":"Block","tag":"div","classes":["812eeff2-3692-774a-d4c6-cf21685bf47e","b07bf543-ce3d-22c7-58b6-59a3af491295"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd37"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd37","text":true,"v":"Yay! It worked"},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd38","type":"Block","tag":"div","classes":[],"children":["9da28881-0599-1d96-10e9-0b6edd63bd39"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-text","value":"true"}],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd39","text":true,"v":"This is a success message."},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd3a","type":"Link","tag":"a","classes":["28e328db-d17c-7dda-7254-a4ba9e0ead12","318234c7-ff30-88bc-80eb-626bd27fe13f"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd3b"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-close","value":"true"}],"block":"inline","displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd3b","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"0 0 24 24\" width=\"20\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"0 0 24 24\" width=\"20\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd3c","type":"Block","tag":"div","classes":["e3b6b0e7-8852-65d1-28db-eded49bf4909","3b82976d-13cb-882c-40fd-a80ffc382c20"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd3d","9da28881-0599-1d96-10e9-0b6edd63bd44"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message","value":"error"}],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd3d","type":"Block","tag":"div","classes":["9173597a-753d-9af4-8e57-d79e51f90063"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd46","9da28881-0599-1d96-10e9-0b6edd63bd3e","9da28881-0599-1d96-10e9-0b6edd63bd3f"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd46","type":"Block","tag":"div","classes":["0bbeba22-a7c6-01c3-dd1b-42d2cc71a5cf","21ace15b-f97a-7d58-9b6a-eb322d5cdf82","3c4b20d4-8a56-ddf7-3597-61f85c84197e"],"children":[],"data":{"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"text":false}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd3e","type":"HtmlEmbed","tag":"div","classes":["97b2306a-86e8-620e-e65d-708dd9c64923"],"children":[],"v":"<svg width=\"30\" height=\"30\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z\" fill=\"#E40023\"/>\n</svg>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<svg width=\"30\" height=\"30\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z\" fill=\"#E40023\"/>\n</svg>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd3f","type":"Block","tag":"div","classes":[],"children":["9da28881-0599-1d96-10e9-0b6edd63bd40","9da28881-0599-1d96-10e9-0b6edd63bd42"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd40","type":"Block","tag":"div","classes":["812eeff2-3692-774a-d4c6-cf21685bf47e","b07bf543-ce3d-22c7-58b6-59a3af491295"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd41"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd41","text":true,"v":"Uh oh, something went wrong"},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd42","type":"Block","tag":"div","classes":[],"children":["9da28881-0599-1d96-10e9-0b6edd63bd43"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-text","value":"true"}],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd43","text":true,"v":"This is an error message. "},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd44","type":"Link","tag":"a","classes":["28e328db-d17c-7dda-7254-a4ba9e0ead12","318234c7-ff30-88bc-80eb-626bd27fe13f"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd45"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-close","value":"true"}],"block":"inline","displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd45","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"0 0 24 24\" width=\"20\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"0 0 24 24\" width=\"20\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false}}}}],"styles":[{"_id":"e3b6b0e7-8852-65d1-28db-eded49bf4909","fake":false,"type":"class","name":"toast-box-d","namespace":"","comb":"","styleLess":"position: relative; margin-bottom: 1rem; padding-top: 0.9rem; padding-right: 0.9rem; padding-bottom: 0.9rem; padding-left: 1.7rem; border-top-style: solid; border-top-width: 0.5px; border-top-color: hsla(159.40298507462688, 67.00%, 39.22%, 1.00); border-right-style: solid; border-right-width: 0.5px; border-right-color: hsla(159.40298507462688, 67.00%, 39.22%, 1.00); border-bottom-style: solid; border-bottom-width: 0.5px; border-bottom-color: hsla(159.40298507462688, 67.00%, 39.22%, 1.00); border-left-style: solid; border-left-width: 0.5px; border-left-color: hsla(159.40298507462688, 67.00%, 39.22%, 1.00); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: white; box-shadow: 0 5px 15px 0 hsla(0, 0.00%, 0.00%, 0.10); color: #717477; font-size: 15px;","variants":{},"children":["3b82976d-13cb-882c-40fd-a80ffc382c20"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"9173597a-753d-9af4-8e57-d79e51f90063","fake":false,"type":"class","name":"toast-content","namespace":"","comb":"","styleLess":"display: flex; align-items: center;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"97b2306a-86e8-620e-e65d-708dd9c64923","fake":false,"type":"class","name":"toast-icon-d","namespace":"","comb":"","styleLess":"display: flex; width: 1.5rem; margin-right: 1rem; justify-content: center; align-items: center; color: hsla(159.55555555555554, 67.84%, 39.02%, 1.00);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"b07bf543-ce3d-22c7-58b6-59a3af491295","fake":false,"type":"class","name":"toast-header-d","namespace":"","comb":"","styleLess":"color: hsla(210, 0.00%, 0.00%, 1.00); font-size: 1.1em;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"318234c7-ff30-88bc-80eb-626bd27fe13f","fake":false,"type":"class","name":"grey","namespace":"","comb":"&","styleLess":"color: hsla(210, 2.52%, 45.52%, 1.00);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"3b82976d-13cb-882c-40fd-a80ffc382c20","fake":false,"type":"class","name":"red","namespace":"","comb":"&","styleLess":"border-top-color: hsla(350.7894736842105, 100.00%, 44.71%, 1.00); border-right-color: hsla(350.7894736842105, 100.00%, 44.71%, 1.00); border-bottom-color: hsla(350.7894736842105, 100.00%, 44.71%, 1.00); border-left-color: hsla(350.7894736842105, 100.00%, 44.71%, 1.00);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"b1ddd61e-7794-9da7-1d10-d271b7d23227","fake":false,"type":"class","name":"toast-wrapper","namespace":"","comb":"","styleLess":"position: fixed; left: 0px; top: auto; right: 0px; bottom: 0px; z-index: 2147483647; width: 50%; min-width: 50vh; margin-right: auto; margin-left: auto;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"28e328db-d17c-7dda-7254-a4ba9e0ead12","fake":false,"type":"class","name":"toast-close-black","namespace":"","comb":"","styleLess":"position: absolute; left: auto; top: 0%; right: 0%; bottom: 0px; display: flex; width: 4rem; padding-top: 6px; justify-content: center; align-items: center; color: black;","variants":{},"children":["318234c7-ff30-88bc-80eb-626bd27fe13f"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"21ace15b-f97a-7d58-9b6a-eb322d5cdf82","fake":false,"type":"class","name":"toast-color","namespace":"","comb":"","styleLess":"position: absolute; left: 0.5rem; top: 0.5rem; right: auto; bottom: 0.5rem; width: 4px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: #20a779;","variants":{},"children":["3c4b20d4-8a56-ddf7-3597-61f85c84197e"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"3c4b20d4-8a56-ddf7-3597-61f85c84197e","fake":false,"type":"class","name":"red","namespace":"","comb":"&","styleLess":"background-color: hsla(350.7894736842105, 100.00%, 44.71%, 1.00);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Clone in Webflow
Copy Component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd30","type":"Block","tag":"div","classes":["b1ddd61e-7794-9da7-1d10-d271b7d23227"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd31","9da28881-0599-1d96-10e9-0b6edd63bd3c"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd31","type":"Block","tag":"div","classes":["e3b6b0e7-8852-65d1-28db-eded49bf4909"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd32","9da28881-0599-1d96-10e9-0b6edd63bd3a"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message","value":"success"}],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd32","type":"Block","tag":"div","classes":["9173597a-753d-9af4-8e57-d79e51f90063"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd34","9da28881-0599-1d96-10e9-0b6edd63bd33","9da28881-0599-1d96-10e9-0b6edd63bd35"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd34","type":"Block","tag":"div","classes":["0bbeba22-a7c6-01c3-dd1b-42d2cc71a5cf","21ace15b-f97a-7d58-9b6a-eb322d5cdf82"],"children":[],"data":{"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"text":false}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd33","type":"HtmlEmbed","tag":"div","classes":["97b2306a-86e8-620e-e65d-708dd9c64923"],"children":[],"v":"<svg width=\"30\" height=\"30\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM8 15L3 10L4.41 8.59L8 12.17L15.59 4.58L17 6L8 15Z\" fill=\"currentColor\"/>\n</svg>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<svg width=\"30\" height=\"30\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM8 15L3 10L4.41 8.59L8 12.17L15.59 4.58L17 6L8 15Z\" fill=\"currentColor\"/>\n</svg>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd35","type":"Block","tag":"div","classes":[],"children":["9da28881-0599-1d96-10e9-0b6edd63bd36","9da28881-0599-1d96-10e9-0b6edd63bd38"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd36","type":"Block","tag":"div","classes":["812eeff2-3692-774a-d4c6-cf21685bf47e","b07bf543-ce3d-22c7-58b6-59a3af491295"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd37"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd37","text":true,"v":"Yay! It worked"},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd38","type":"Block","tag":"div","classes":[],"children":["9da28881-0599-1d96-10e9-0b6edd63bd39"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-text","value":"true"}],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd39","text":true,"v":"This is a success message."},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd3a","type":"Link","tag":"a","classes":["28e328db-d17c-7dda-7254-a4ba9e0ead12","318234c7-ff30-88bc-80eb-626bd27fe13f"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd3b"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-close","value":"true"}],"block":"inline","displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd3b","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"0 0 24 24\" width=\"20\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"0 0 24 24\" width=\"20\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd3c","type":"Block","tag":"div","classes":["e3b6b0e7-8852-65d1-28db-eded49bf4909","3b82976d-13cb-882c-40fd-a80ffc382c20"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd3d","9da28881-0599-1d96-10e9-0b6edd63bd44"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message","value":"error"}],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd3d","type":"Block","tag":"div","classes":["9173597a-753d-9af4-8e57-d79e51f90063"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd46","9da28881-0599-1d96-10e9-0b6edd63bd3e","9da28881-0599-1d96-10e9-0b6edd63bd3f"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd46","type":"Block","tag":"div","classes":["0bbeba22-a7c6-01c3-dd1b-42d2cc71a5cf","21ace15b-f97a-7d58-9b6a-eb322d5cdf82","3c4b20d4-8a56-ddf7-3597-61f85c84197e"],"children":[],"data":{"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"text":false}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd3e","type":"HtmlEmbed","tag":"div","classes":["97b2306a-86e8-620e-e65d-708dd9c64923"],"children":[],"v":"<svg width=\"30\" height=\"30\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z\" fill=\"#E40023\"/>\n</svg>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<svg width=\"30\" height=\"30\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z\" fill=\"#E40023\"/>\n</svg>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd3f","type":"Block","tag":"div","classes":[],"children":["9da28881-0599-1d96-10e9-0b6edd63bd40","9da28881-0599-1d96-10e9-0b6edd63bd42"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd40","type":"Block","tag":"div","classes":["812eeff2-3692-774a-d4c6-cf21685bf47e","b07bf543-ce3d-22c7-58b6-59a3af491295"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd41"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd41","text":true,"v":"Uh oh, something went wrong"},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd42","type":"Block","tag":"div","classes":[],"children":["9da28881-0599-1d96-10e9-0b6edd63bd43"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-text","value":"true"}],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd43","text":true,"v":"This is an error message. "},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd44","type":"Link","tag":"a","classes":["28e328db-d17c-7dda-7254-a4ba9e0ead12","318234c7-ff30-88bc-80eb-626bd27fe13f"],"children":["9da28881-0599-1d96-10e9-0b6edd63bd45"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-close","value":"true"}],"block":"inline","displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"9da28881-0599-1d96-10e9-0b6edd63bd45","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"0 0 24 24\" width=\"20\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"0 0 24 24\" width=\"20\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false}}}}],"styles":[{"_id":"e3b6b0e7-8852-65d1-28db-eded49bf4909","fake":false,"type":"class","name":"toast-box-d","namespace":"","comb":"","styleLess":"position: relative; margin-bottom: 1rem; padding-top: 0.9rem; padding-right: 0.9rem; padding-bottom: 0.9rem; padding-left: 1.7rem; border-top-style: solid; border-top-width: 0.5px; border-top-color: hsla(159.40298507462688, 67.00%, 39.22%, 1.00); border-right-style: solid; border-right-width: 0.5px; border-right-color: hsla(159.40298507462688, 67.00%, 39.22%, 1.00); border-bottom-style: solid; border-bottom-width: 0.5px; border-bottom-color: hsla(159.40298507462688, 67.00%, 39.22%, 1.00); border-left-style: solid; border-left-width: 0.5px; border-left-color: hsla(159.40298507462688, 67.00%, 39.22%, 1.00); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: white; box-shadow: 0 5px 15px 0 hsla(0, 0.00%, 0.00%, 0.10); color: #717477; font-size: 15px;","variants":{},"children":["3b82976d-13cb-882c-40fd-a80ffc382c20"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"9173597a-753d-9af4-8e57-d79e51f90063","fake":false,"type":"class","name":"toast-content","namespace":"","comb":"","styleLess":"display: flex; align-items: center;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"97b2306a-86e8-620e-e65d-708dd9c64923","fake":false,"type":"class","name":"toast-icon-d","namespace":"","comb":"","styleLess":"display: flex; width: 1.5rem; margin-right: 1rem; justify-content: center; align-items: center; color: hsla(159.55555555555554, 67.84%, 39.02%, 1.00);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"b07bf543-ce3d-22c7-58b6-59a3af491295","fake":false,"type":"class","name":"toast-header-d","namespace":"","comb":"","styleLess":"color: hsla(210, 0.00%, 0.00%, 1.00); font-size: 1.1em;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"318234c7-ff30-88bc-80eb-626bd27fe13f","fake":false,"type":"class","name":"grey","namespace":"","comb":"&","styleLess":"color: hsla(210, 2.52%, 45.52%, 1.00);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"3b82976d-13cb-882c-40fd-a80ffc382c20","fake":false,"type":"class","name":"red","namespace":"","comb":"&","styleLess":"border-top-color: hsla(350.7894736842105, 100.00%, 44.71%, 1.00); border-right-color: hsla(350.7894736842105, 100.00%, 44.71%, 1.00); border-bottom-color: hsla(350.7894736842105, 100.00%, 44.71%, 1.00); border-left-color: hsla(350.7894736842105, 100.00%, 44.71%, 1.00);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"b1ddd61e-7794-9da7-1d10-d271b7d23227","fake":false,"type":"class","name":"toast-wrapper","namespace":"","comb":"","styleLess":"position: fixed; left: 0px; top: auto; right: 0px; bottom: 0px; z-index: 2147483647; width: 50%; min-width: 50vh; margin-right: auto; margin-left: auto;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"28e328db-d17c-7dda-7254-a4ba9e0ead12","fake":false,"type":"class","name":"toast-close-black","namespace":"","comb":"","styleLess":"position: absolute; left: auto; top: 0%; right: 0%; bottom: 0px; display: flex; width: 4rem; padding-top: 6px; justify-content: center; align-items: center; color: black;","variants":{},"children":["318234c7-ff30-88bc-80eb-626bd27fe13f"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"21ace15b-f97a-7d58-9b6a-eb322d5cdf82","fake":false,"type":"class","name":"toast-color","namespace":"","comb":"","styleLess":"position: absolute; left: 0.5rem; top: 0.5rem; right: auto; bottom: 0.5rem; width: 4px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: #20a779;","variants":{},"children":["3c4b20d4-8a56-ddf7-3597-61f85c84197e"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"3c4b20d4-8a56-ddf7-3597-61f85c84197e","fake":false,"type":"class","name":"red","namespace":"","comb":"&","styleLess":"background-color: hsla(350.7894736842105, 100.00%, 44.71%, 1.00);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser not supported. Use
Chrome or Safari.
Chrome or Safari.
About this component
AI Generated
Component Description (Generated by AI)
The Error and Success Boxes component provides a visually appealing way to display feedback messages to users, indicating success or error states in a web application.
Key Features:
- Customizable success and error messages
- Includes icons for visual representation
- Responsive design suitable for various screen sizes
- Fixed position for consistent visibility
- Easy to integrate with forms and user interactions
Design Elements:
- Clean and modern aesthetic
- Color-coded borders for success (green) and error (red) messages
- Rounded corners and shadow effects for depth
- Flexbox layout for easy alignment of content
Potential Use Cases:
- Web applications requiring user feedback on form submissions
- E-commerce sites to confirm order success or notify of errors
- Content management systems for alerting users of status changes
- Customer support portals for displaying ticket status updates
Conclusion: The Error and Success Boxes component is versatile and user-friendly, making it an essential tool for enhancing user experience through clear feedback mechanisms.
Start building
Start building your dreams
Memberstack is 100% free until you're ready to launch - so, what are you waiting for? Create your first app and start building today.