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":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f0","type":"Block","tag":"div","classes":["b1ddd61e-7794-9da7-1d10-d271b7d23227"],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f1","15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fa"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f1","type":"Block","tag":"div","classes":["f82bc4ff-e129-f8a3-c437-d6c37d9f887f"],"children":["d50e556f-bd21-c139-fb7d-4426323fff28","15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f8"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message","value":"success"}],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"d50e556f-bd21-c139-fb7d-4426323fff28","type":"Block","tag":"div","classes":["9173597a-753d-9af4-8e57-d79e51f90063"],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f2","15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f3"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f2","type":"HtmlEmbed","tag":"div","classes":["5532ce8e-d0c1-fcb5-573e-c4512c792d04"],"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=\"#2EC862\"/>\n</svg>","data":{"search":{"exclude":true},"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=\"#2EC862\"/>\n</svg>","div":false,"iframe":false,"script":false,"compilable":false}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"insideRTE":false}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f3","type":"Block","tag":"div","classes":[],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f4","15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f6"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f4","type":"Block","tag":"div","classes":["4bd02306-1597-a36e-55b2-d143a42df6d1"],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f5"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f5","text":true,"v":"Success!"},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f6","type":"Block","tag":"div","classes":[],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f7"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-text","value":"true"}],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f7","text":true,"v":"This is a success message."},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f8","type":"Link","tag":"a","classes":["28e328db-d17c-7dda-7254-a4ba9e0ead12"],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f9"],"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":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f9","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":{"search":{"exclude":true},"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}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"insideRTE":false}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fa","type":"Block","tag":"div","classes":["f82bc4ff-e129-f8a3-c437-d6c37d9f887f","54b59652-47aa-1f03-e460-50a85e50e77d"],"children":["56e55c0f-e325-2899-956a-9aab80cadc81","15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fc"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message","value":"error"}],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"56e55c0f-e325-2899-956a-9aab80cadc81","type":"Block","tag":"div","classes":["9173597a-753d-9af4-8e57-d79e51f90063"],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fb","15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fe"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fb","type":"HtmlEmbed","tag":"div","classes":["5532ce8e-d0c1-fcb5-573e-c4512c792d04","8eb037b9-5bec-9845-7b55-777efdb7c902"],"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":{"search":{"exclude":true},"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}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"insideRTE":false}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fe","type":"Block","tag":"div","classes":[],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5ff","15eb20dc-ffa6-cb8b-ea49-1724ea1ea601"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5ff","type":"Block","tag":"div","classes":["4bd02306-1597-a36e-55b2-d143a42df6d1"],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea600"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea600","text":true,"v":"Error"},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea601","type":"Block","tag":"div","classes":[],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea602"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-text","value":"true"}],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea602","text":true,"v":"This is an error message. "},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fc","type":"Link","tag":"a","classes":["28e328db-d17c-7dda-7254-a4ba9e0ead12"],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fd"],"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":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fd","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":{"search":{"exclude":true},"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}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"insideRTE":false}}],"styles":[{"_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":"f82bc4ff-e129-f8a3-c437-d6c37d9f887f","fake":false,"type":"class","name":"toast-box-b","namespace":"","comb":"","styleLess":"position: relative; margin-bottom: 1rem; padding-top: 0.4rem; padding-right: 0.4rem; padding-bottom: 0.4rem; padding-left: 0.4rem; border-top-style: solid; border-top-width: 0.5px; border-top-color: hsla(140.25974025974025, 62.60%, 48.24%, 1.00); border-right-style: solid; border-right-width: 0.5px; border-right-color: hsla(140.25974025974025, 62.60%, 48.24%, 1.00); border-bottom-style: solid; border-bottom-width: 0.5px; border-bottom-color: hsla(140.25974025974025, 62.60%, 48.24%, 1.00); border-left-style: solid; border-left-width: 0.5px; border-left-color: hsla(140.25974025974025, 62.60%, 48.24%, 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 10px -5px hsla(0, 0.00%, 0.00%, 0.10); color: black;","variants":{},"children":["54b59652-47aa-1f03-e460-50a85e50e77d"],"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":"5532ce8e-d0c1-fcb5-573e-c4512c792d04","fake":false,"type":"class","name":"toast-icon-b","namespace":"","comb":"","styleLess":"display: flex; width: 3rem; height: 3rem; margin-right: 0.8rem; padding-top: 0.8rem; padding-right: 0.8rem; padding-bottom: 0.8rem; padding-left: 0.8rem; justify-content: center; align-items: center; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: rgba(46, 200, 98, 0.15);","variants":{},"children":["8eb037b9-5bec-9845-7b55-777efdb7c902"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"4bd02306-1597-a36e-55b2-d143a42df6d1","fake":false,"type":"class","name":"toast-header","namespace":"","comb":"","styleLess":"margin-bottom: -0.25rem; font-weight: 700;","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":"54b59652-47aa-1f03-e460-50a85e50e77d","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":"8eb037b9-5bec-9845-7b55-777efdb7c902","fake":false,"type":"class","name":"red","namespace":"","comb":"&","styleLess":"background-color: hsla(350.7894736842105, 100.00%, 44.71%, 0.15);","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":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f0","type":"Block","tag":"div","classes":["b1ddd61e-7794-9da7-1d10-d271b7d23227"],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f1","15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fa"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f1","type":"Block","tag":"div","classes":["f82bc4ff-e129-f8a3-c437-d6c37d9f887f"],"children":["d50e556f-bd21-c139-fb7d-4426323fff28","15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f8"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message","value":"success"}],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"d50e556f-bd21-c139-fb7d-4426323fff28","type":"Block","tag":"div","classes":["9173597a-753d-9af4-8e57-d79e51f90063"],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f2","15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f3"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f2","type":"HtmlEmbed","tag":"div","classes":["5532ce8e-d0c1-fcb5-573e-c4512c792d04"],"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=\"#2EC862\"/>\n</svg>","data":{"search":{"exclude":true},"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=\"#2EC862\"/>\n</svg>","div":false,"iframe":false,"script":false,"compilable":false}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"insideRTE":false}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f3","type":"Block","tag":"div","classes":[],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f4","15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f6"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f4","type":"Block","tag":"div","classes":["4bd02306-1597-a36e-55b2-d143a42df6d1"],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f5"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f5","text":true,"v":"Success!"},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f6","type":"Block","tag":"div","classes":[],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f7"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-text","value":"true"}],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f7","text":true,"v":"This is a success message."},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f8","type":"Link","tag":"a","classes":["28e328db-d17c-7dda-7254-a4ba9e0ead12"],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f9"],"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":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5f9","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":{"search":{"exclude":true},"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}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"insideRTE":false}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fa","type":"Block","tag":"div","classes":["f82bc4ff-e129-f8a3-c437-d6c37d9f887f","54b59652-47aa-1f03-e460-50a85e50e77d"],"children":["56e55c0f-e325-2899-956a-9aab80cadc81","15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fc"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message","value":"error"}],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"56e55c0f-e325-2899-956a-9aab80cadc81","type":"Block","tag":"div","classes":["9173597a-753d-9af4-8e57-d79e51f90063"],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fb","15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fe"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fb","type":"HtmlEmbed","tag":"div","classes":["5532ce8e-d0c1-fcb5-573e-c4512c792d04","8eb037b9-5bec-9845-7b55-777efdb7c902"],"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":{"search":{"exclude":true},"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}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"insideRTE":false}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fe","type":"Block","tag":"div","classes":[],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5ff","15eb20dc-ffa6-cb8b-ea49-1724ea1ea601"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5ff","type":"Block","tag":"div","classes":["4bd02306-1597-a36e-55b2-d143a42df6d1"],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea600"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea600","text":true,"v":"Error"},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea601","type":"Block","tag":"div","classes":[],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea602"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-text","value":"true"}],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea602","text":true,"v":"This is an error message. "},{"_id":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fc","type":"Link","tag":"a","classes":["28e328db-d17c-7dda-7254-a4ba9e0ead12"],"children":["15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fd"],"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":"15eb20dc-ffa6-cb8b-ea49-1724ea1ea5fd","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":{"search":{"exclude":true},"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}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"insideRTE":false}}],"styles":[{"_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":"f82bc4ff-e129-f8a3-c437-d6c37d9f887f","fake":false,"type":"class","name":"toast-box-b","namespace":"","comb":"","styleLess":"position: relative; margin-bottom: 1rem; padding-top: 0.4rem; padding-right: 0.4rem; padding-bottom: 0.4rem; padding-left: 0.4rem; border-top-style: solid; border-top-width: 0.5px; border-top-color: hsla(140.25974025974025, 62.60%, 48.24%, 1.00); border-right-style: solid; border-right-width: 0.5px; border-right-color: hsla(140.25974025974025, 62.60%, 48.24%, 1.00); border-bottom-style: solid; border-bottom-width: 0.5px; border-bottom-color: hsla(140.25974025974025, 62.60%, 48.24%, 1.00); border-left-style: solid; border-left-width: 0.5px; border-left-color: hsla(140.25974025974025, 62.60%, 48.24%, 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 10px -5px hsla(0, 0.00%, 0.00%, 0.10); color: black;","variants":{},"children":["54b59652-47aa-1f03-e460-50a85e50e77d"],"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":"5532ce8e-d0c1-fcb5-573e-c4512c792d04","fake":false,"type":"class","name":"toast-icon-b","namespace":"","comb":"","styleLess":"display: flex; width: 3rem; height: 3rem; margin-right: 0.8rem; padding-top: 0.8rem; padding-right: 0.8rem; padding-bottom: 0.8rem; padding-left: 0.8rem; justify-content: center; align-items: center; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: rgba(46, 200, 98, 0.15);","variants":{},"children":["8eb037b9-5bec-9845-7b55-777efdb7c902"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"4bd02306-1597-a36e-55b2-d143a42df6d1","fake":false,"type":"class","name":"toast-header","namespace":"","comb":"","styleLess":"margin-bottom: -0.25rem; font-weight: 700;","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":"54b59652-47aa-1f03-e460-50a85e50e77d","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":"8eb037b9-5bec-9845-7b55-777efdb7c902","fake":false,"type":"class","name":"red","namespace":"","comb":"&","styleLess":"background-color: hsla(350.7894736842105, 100.00%, 44.71%, 0.15);","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)
Toast Notifications provide customizable success and error messages that can be integrated with Memberstack 2.0, allowing users to override default messages for a more personalized experience.
Key Features:
- Customizable success and error messages
- Integration with Memberstack 2.0
- Override default notifications
- Responsive design suitable for various screen sizes
Design Elements:
- Fixed position notifications
- Color-coded borders for success (green) and error (red) messages
- Rounded corners and shadow effects for a modern look
- Icons accompanying messages for visual clarity
Potential Use Cases:
- E-commerce websites for transaction confirmations
- Membership platforms for user actions feedback
- SaaS applications for alerting users about system statuses
- Event registration sites for success/error notifications
- Portfolio websites to showcase project submission results
Conclusion: Toast Notifications are a versatile and visually appealing solution for providing immediate feedback to users, enhancing the overall user experience on any web platform.
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.