Competition: Build a SaaS app between May 29 - June 14 and get a chance to win cash prizes, free plans & more!
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":"f3b998b7-f0fe-922c-5922-c8ba77f468db","type":"Block","tag":"div","classes":["b1ddd61e-7794-9da7-1d10-d271b7d23227"],"children":["9b8826af-9e1c-36b4-ed3c-ffcd8e8f0e8e","eaff6e94-492b-6ce1-37a4-88b80eedf459"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9b8826af-9e1c-36b4-ed3c-ffcd8e8f0e8e","type":"Block","tag":"div","classes":["94d2d684-821d-ce77-be45-35df54b29452"],"children":["95c8fb57-86f8-edff-5af1-40e6c3c84c25","813a7593-d935-7362-c320-5fa849e9d9b0"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message","value":"success"}],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"95c8fb57-86f8-edff-5af1-40e6c3c84c25","type":"Block","tag":"div","classes":["9173597a-753d-9af4-8e57-d79e51f90063"],"children":["ee8d371b-09c2-7e32-8669-a1e87262f1c8","bdd4270f-00d1-b891-11ac-e020786e1b6e"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ee8d371b-09c2-7e32-8669-a1e87262f1c8","type":"HtmlEmbed","tag":"div","classes":["7371e9cf-7daf-a261-8c9c-0704d39c79c1"],"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":"bdd4270f-00d1-b891-11ac-e020786e1b6e","type":"Block","tag":"div","classes":[],"children":["bdd4270f-00d1-b891-11ac-e020786e1b6f"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-text","value":"true"}],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"bdd4270f-00d1-b891-11ac-e020786e1b6f","text":true,"v":"This is a success message."},{"_id":"813a7593-d935-7362-c320-5fa849e9d9b0","type":"Link","tag":"a","classes":["2b8a97bd-1872-691e-0514-cd953b015d28"],"children":["813a7593-d935-7362-c320-5fa849e9d9b1"],"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":"813a7593-d935-7362-c320-5fa849e9d9b1","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":"eaff6e94-492b-6ce1-37a4-88b80eedf459","type":"Block","tag":"div","classes":["94d2d684-821d-ce77-be45-35df54b29452"],"children":["a9e656d0-bfc1-c14c-a055-9267efa3282d","eaff6e94-492b-6ce1-37a4-88b80eedf45b"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message","value":"error"}],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a9e656d0-bfc1-c14c-a055-9267efa3282d","type":"Block","tag":"div","classes":["9173597a-753d-9af4-8e57-d79e51f90063"],"children":["eaff6e94-492b-6ce1-37a4-88b80eedf45a","eaff6e94-492b-6ce1-37a4-88b80eedf45d"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"eaff6e94-492b-6ce1-37a4-88b80eedf45a","type":"HtmlEmbed","tag":"div","classes":["7371e9cf-7daf-a261-8c9c-0704d39c79c1"],"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":"eaff6e94-492b-6ce1-37a4-88b80eedf45d","type":"Block","tag":"div","classes":[],"children":["eaff6e94-492b-6ce1-37a4-88b80eedf45e"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-text","value":"true"}],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"eaff6e94-492b-6ce1-37a4-88b80eedf45e","text":true,"v":"This is an error message. "},{"_id":"eaff6e94-492b-6ce1-37a4-88b80eedf45b","type":"Link","tag":"a","classes":["2b8a97bd-1872-691e-0514-cd953b015d28"],"children":["eaff6e94-492b-6ce1-37a4-88b80eedf45c"],"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":"eaff6e94-492b-6ce1-37a4-88b80eedf45c","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":"94d2d684-821d-ce77-be45-35df54b29452","fake":false,"type":"class","name":"toast-box","namespace":"","comb":"","styleLess":"position: relative; margin-bottom: 1rem; padding-top: 0.8rem; padding-right: 1rem; padding-bottom: 0.8rem; padding-left: 1rem; border-top-style: solid; border-top-width: 1px; border-top-color: white; border-right-style: solid; border-right-width: 1px; border-right-color: white; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: white; border-left-style: solid; border-left-width: 1px; border-left-color: white; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: black; color: white;","variants":{},"children":[],"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":"7371e9cf-7daf-a261-8c9c-0704d39c79c1","fake":false,"type":"class","name":"toast-icon","namespace":"","comb":"","styleLess":"display: flex; width: 1.5rem; height: 1.5rem; margin-right: 0.8rem; justify-content: center; align-items: center;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2b8a97bd-1872-691e-0514-cd953b015d28","fake":false,"type":"class","name":"toast-close-white","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: hsla(0, 0.00%, 100.00%, 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":"f3b998b7-f0fe-922c-5922-c8ba77f468db","type":"Block","tag":"div","classes":["b1ddd61e-7794-9da7-1d10-d271b7d23227"],"children":["9b8826af-9e1c-36b4-ed3c-ffcd8e8f0e8e","eaff6e94-492b-6ce1-37a4-88b80eedf459"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9b8826af-9e1c-36b4-ed3c-ffcd8e8f0e8e","type":"Block","tag":"div","classes":["94d2d684-821d-ce77-be45-35df54b29452"],"children":["95c8fb57-86f8-edff-5af1-40e6c3c84c25","813a7593-d935-7362-c320-5fa849e9d9b0"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message","value":"success"}],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"95c8fb57-86f8-edff-5af1-40e6c3c84c25","type":"Block","tag":"div","classes":["9173597a-753d-9af4-8e57-d79e51f90063"],"children":["ee8d371b-09c2-7e32-8669-a1e87262f1c8","bdd4270f-00d1-b891-11ac-e020786e1b6e"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ee8d371b-09c2-7e32-8669-a1e87262f1c8","type":"HtmlEmbed","tag":"div","classes":["7371e9cf-7daf-a261-8c9c-0704d39c79c1"],"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":"bdd4270f-00d1-b891-11ac-e020786e1b6e","type":"Block","tag":"div","classes":[],"children":["bdd4270f-00d1-b891-11ac-e020786e1b6f"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-text","value":"true"}],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"bdd4270f-00d1-b891-11ac-e020786e1b6f","text":true,"v":"This is a success message."},{"_id":"813a7593-d935-7362-c320-5fa849e9d9b0","type":"Link","tag":"a","classes":["2b8a97bd-1872-691e-0514-cd953b015d28"],"children":["813a7593-d935-7362-c320-5fa849e9d9b1"],"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":"813a7593-d935-7362-c320-5fa849e9d9b1","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":"eaff6e94-492b-6ce1-37a4-88b80eedf459","type":"Block","tag":"div","classes":["94d2d684-821d-ce77-be45-35df54b29452"],"children":["a9e656d0-bfc1-c14c-a055-9267efa3282d","eaff6e94-492b-6ce1-37a4-88b80eedf45b"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message","value":"error"}],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a9e656d0-bfc1-c14c-a055-9267efa3282d","type":"Block","tag":"div","classes":["9173597a-753d-9af4-8e57-d79e51f90063"],"children":["eaff6e94-492b-6ce1-37a4-88b80eedf45a","eaff6e94-492b-6ce1-37a4-88b80eedf45d"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"eaff6e94-492b-6ce1-37a4-88b80eedf45a","type":"HtmlEmbed","tag":"div","classes":["7371e9cf-7daf-a261-8c9c-0704d39c79c1"],"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":"eaff6e94-492b-6ce1-37a4-88b80eedf45d","type":"Block","tag":"div","classes":[],"children":["eaff6e94-492b-6ce1-37a4-88b80eedf45e"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-message-text","value":"true"}],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"eaff6e94-492b-6ce1-37a4-88b80eedf45e","text":true,"v":"This is an error message. "},{"_id":"eaff6e94-492b-6ce1-37a4-88b80eedf45b","type":"Link","tag":"a","classes":["2b8a97bd-1872-691e-0514-cd953b015d28"],"children":["eaff6e94-492b-6ce1-37a4-88b80eedf45c"],"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":"eaff6e94-492b-6ce1-37a4-88b80eedf45c","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":"94d2d684-821d-ce77-be45-35df54b29452","fake":false,"type":"class","name":"toast-box","namespace":"","comb":"","styleLess":"position: relative; margin-bottom: 1rem; padding-top: 0.8rem; padding-right: 1rem; padding-bottom: 0.8rem; padding-left: 1rem; border-top-style: solid; border-top-width: 1px; border-top-color: white; border-right-style: solid; border-right-width: 1px; border-right-color: white; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: white; border-left-style: solid; border-left-width: 1px; border-left-color: white; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: black; color: white;","variants":{},"children":[],"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":"7371e9cf-7daf-a261-8c9c-0704d39c79c1","fake":false,"type":"class","name":"toast-icon","namespace":"","comb":"","styleLess":"display: flex; width: 1.5rem; height: 1.5rem; margin-right: 0.8rem; justify-content: center; align-items: center;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2b8a97bd-1872-691e-0514-cd953b015d28","fake":false,"type":"class","name":"toast-close-white","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: hsla(0, 0.00%, 100.00%, 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)
Dark Toast Messages is a notification component designed to display success and error messages in a visually appealing manner. It features a clean, dark design that enhances readability and user engagement.
Key Features:
- Displays success and error messages
- Customizable close button for user interaction
- Responsive design suitable for various screen sizes
- Fixed position for visibility across the page
- Includes icons for visual representation of message types
Design Elements:
- Dark background with white text for high contrast
- Rounded corners for a modern look
- Flexbox layout for easy alignment of content and icons
- Icons for success and error messages
Potential Use Cases:
- Web applications needing user feedback on actions
- E-commerce sites for transaction notifications
- Content management systems for alerting users
- SaaS platforms for system status updates
- Blogs or news sites for alerting readers to important updates
Conclusion: Dark Toast Messages is a versatile and visually appealing component that effectively communicates important information to users, making it an excellent addition to any web project.
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.
.avif)
.png)
