Made with 💙 by Memberstack

Free Online Course UI for Bricks Builder

Explore our gallery of free, community-created Online Course UI for Bricks Builder. Copy & paste them to your website with just one click.

Search

Categories

Profile Picture
Julian Galluzzo

Log In Form (Red & Beige)

Memberstack-powered login form with working Google Auth from our 2025 Online Course Template.
View now
Copy now
{"content":[{"id":"ccfhme","name":"section","parent":0,"children":["xzuswg"],"settings":{},"label":"Auth"},{"id":"xzuswg","name":"container","parent":"ccfhme","children":["yelrtm"],"settings":{}},{"id":"yelrtm","name":"block","parent":"xzuswg","children":["pmijpp","bfgzkm","yqaihj"],"settings":{"_cssGlobalClasses":["lhfzbg"]}},{"id":"pmijpp","name":"heading","parent":"yelrtm","children":[],"settings":{"text":"Log in","_cssGlobalClasses":["ziixdz"]}},{"id":"bfgzkm","name":"text-basic","parent":"yelrtm","children":[],"settings":{"text":"If you don't have an account, you can click here to sign up. If you forgot your password, you can click here to reset your password.","_cssGlobalClasses":["lxltzy"]},"label":"Paragraph"},{"id":"yqaihj","name":"ms-brcks-form","parent":"yelrtm","children":[],"settings":{"formType":"login","planAction":"add","fields":[{"type":"email","placeholder":"Enter your email","required":true,"customFieldId":"email","width":"full","maxLength":"","value":"","id":"lqtjqj"},{"type":"password","placeholder":"Enter your password","required":true,"customFieldId":"password","width":"full","maxLength":"","value":"","id":"ehrbua"}],"_cssGlobalClasses":["idrdai"],"socialAuth":[{"id":"okkrso","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"padding":{"bottom":"17","top":"17","left":"20","right":"20"},"border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"style":"solid","width":{"top":"1","right":"1","bottom":"1","left":"1"},"color":{"raw":"var(--border-base)"}}}],"fieldsLayout":"column"},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"lhfzbg","name":"auth__block","settings":{"_width":"100%","_widthMax":"500","_margin":{"left":"auto","right":"auto"},"_background":{"color":{"hex":"#ffffff"}},"_padding":{"left":"30","right":"30","bottom":"20","top":"45"},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"},"radius":{"top":"40","right":"40","bottom":"40","left":"40"}},"_alignItems":"flex-start"}},{"id":"ziixdz","name":"auth__heading","settings":{"_margin":{"bottom":"20"},"_typography":{"font-size":"40","line-height":"1"}},"modified":1745235104,"user_id":1},{"id":"lxltzy","name":"auth__paragraph","settings":{"_margin":{"bottom":"40"},"_cssCustom":".link {\n text-decoration: underline;\n}","_typography":{"color":{"hex":"#696969"}}},"modified":1745235104,"user_id":1},{"id":"idrdai","name":"auth__form","settings":{"_width":"100%","buttonWidth":"100%","buttonTypography":{"text-align":"center","color":{"hex":"#ffffff"},"font-size":"18"},"buttonBackground":{"raw":"var(--brand-color)"},"buttonPadding":{"bottom":"16","top":"16","left":"20","right":"20"},"buttonMargin":{"top":"15"},"buttonBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"inputBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid"},"inputPadding":{"left":"20","right":"20","bottom":"6","top":"6"},"fieldsLayout":"column","fieldsGap":"15"},"modified":1745235104,"user_id":1}],"globalElements":[]}
Download JSON
Profile Picture
Julian Galluzzo

Create Account Form (Red & Beige)

Memberstack-powered sign up form from our 2025 Online Course Template.
View now
Copy now
{"content":[{"id":"56c33c","name":"section","parent":0,"children":["fd3a93"],"settings":{},"label":"Auth"},{"id":"fd3a93","name":"container","parent":"56c33c","children":["9a9986"],"settings":{}},{"id":"9a9986","name":"block","parent":"fd3a93","children":["22379b","eef3b4","a7ec9a"],"settings":{"_cssGlobalClasses":["lhfzbg"]}},{"id":"22379b","name":"heading","parent":"9a9986","children":[],"settings":{"text":"Create an account","_cssGlobalClasses":["ziixdz"]}},{"id":"eef3b4","name":"text-basic","parent":"9a9986","children":[],"settings":{"text":"If you already have an account, you can click here to log in.","_cssGlobalClasses":["lxltzy"]},"label":"Paragraph"},{"id":"a7ec9a","name":"ms-brcks-form","parent":"9a9986","children":[],"settings":{"formType":"signup","planAction":"add","fields":[{"type":"email","placeholder":"Enter your email","required":true,"customFieldId":"email","width":"full","maxLength":"","value":"","id":"lqtjqj"},{"type":"password","placeholder":"Enter your password","required":true,"customFieldId":"password","width":"full","maxLength":"","value":"","id":"ehrbua"}],"_cssGlobalClasses":["idrdai"],"socialAuth":[{"id":"okkrso","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"padding":{"bottom":"17","top":"17","left":"20","right":"20"},"border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"style":"solid","width":{"top":"1","right":"1","bottom":"1","left":"1"},"color":{"raw":"var(--border-base)"}}}],"fieldsLayout":"column"},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"lhfzbg","name":"auth__block","settings":{"_width":"100%","_widthMax":"500","_margin":{"left":"auto","right":"auto"},"_background":{"color":{"hex":"#ffffff"}},"_padding":{"left":"30","right":"30","bottom":"20","top":"45"},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"},"radius":{"top":"40","right":"40","bottom":"40","left":"40"}},"_alignItems":"flex-start"}},{"id":"ziixdz","name":"auth__heading","settings":{"_margin":{"bottom":"20"},"_typography":{"font-size":"40","line-height":"1"}},"modified":1745235104,"user_id":1},{"id":"lxltzy","name":"auth__paragraph","settings":{"_margin":{"bottom":"40"},"_cssCustom":".link {\n text-decoration: underline;\n}","_typography":{"color":{"hex":"#696969"}}},"modified":1745235104,"user_id":1},{"id":"idrdai","name":"auth__form","settings":{"_width":"100%","buttonWidth":"100%","buttonTypography":{"text-align":"center","color":{"hex":"#ffffff"},"font-size":"18"},"buttonBackground":{"raw":"var(--brand-color)"},"buttonPadding":{"bottom":"16","top":"16","left":"20","right":"20"},"buttonMargin":{"top":"15"},"buttonBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"inputBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid"},"inputPadding":{"left":"20","right":"20","bottom":"6","top":"6"},"fieldsLayout":"column","fieldsGap":"15"},"modified":1745235104,"user_id":1}],"globalElements":[]}
Download JSON
Profile Picture
Julian Galluzzo

Reset Password Form (Red & Beige)

Memberstack-powered reset password form from our 2025 Online Course Template.
View now
Copy now
{"content":[{"id":"8842ff","name":"section","parent":0,"children":["c17d95"],"settings":{},"label":"Auth"},{"id":"c17d95","name":"container","parent":"8842ff","children":["85369c"],"settings":{}},{"id":"85369c","name":"block","parent":"c17d95","children":["30b86e","97175c","acffa4"],"settings":{"_cssGlobalClasses":["lhfzbg"],"_padding":{"bottom":"30"}}},{"id":"30b86e","name":"heading","parent":"85369c","children":[],"settings":{"text":"Reset password","_cssGlobalClasses":["ziixdz"]}},{"id":"97175c","name":"text-basic","parent":"85369c","children":[],"settings":{"text":"Check your email inbox to get the 6-digit code, and then enter it here along with your new password. Once your password has been changed you will be redirected to the login page.","_cssGlobalClasses":["lxltzy"]},"label":"Paragraph"},{"id":"acffa4","name":"ms-brcks-form","parent":"85369c","children":[],"settings":{"formType":"reset-password","planAction":"add","fields":[{"type":"number","placeholder":"6 Digit Code","required":true,"customFieldId":"token","width":"full","maxLength":"","value":"","id":"lqtjqj"},{"type":"password","placeholder":"Enter your new password","required":true,"customFieldId":"password","width":"full","maxLength":"","value":"","id":"fubymb"}],"_cssGlobalClasses":["idrdai"],"socialAuth":[{"id":"okkrso","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"padding":{"bottom":"17","top":"17","left":"20","right":"20"},"border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"style":"solid","width":{"top":"1","right":"1","bottom":"1","left":"1"},"color":{"raw":"var(--border-base)"}}}],"fieldsLayout":"column","redirectUrl":"/reset-password","buttonText":"Reset password"},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"lhfzbg","name":"auth__block","settings":{"_width":"100%","_widthMax":"500","_margin":{"left":"auto","right":"auto"},"_background":{"color":{"hex":"#ffffff"}},"_padding":{"left":"30","right":"30","bottom":"20","top":"45"},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"},"radius":{"top":"40","right":"40","bottom":"40","left":"40"}},"_alignItems":"flex-start"}},{"id":"ziixdz","name":"auth__heading","settings":{"_margin":{"bottom":"20"},"_typography":{"font-size":"40","line-height":"1"}},"modified":1745235104,"user_id":1},{"id":"lxltzy","name":"auth__paragraph","settings":{"_margin":{"bottom":"40"},"_cssCustom":".link {\n text-decoration: underline;\n}","_typography":{"color":{"hex":"#696969"}}},"modified":1745235104,"user_id":1},{"id":"idrdai","name":"auth__form","settings":{"_width":"100%","buttonWidth":"100%","buttonTypography":{"text-align":"center","color":{"hex":"#ffffff"},"font-size":"18"},"buttonBackground":{"raw":"var(--brand-color)"},"buttonPadding":{"bottom":"16","top":"16","left":"20","right":"20"},"buttonMargin":{"top":"15"},"buttonBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"inputBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid"},"inputPadding":{"left":"20","right":"20","bottom":"6","top":"6"},"fieldsLayout":"column","fieldsGap":"15"},"modified":1745235104,"user_id":1}],"globalElements":[]}
Download JSON
Profile Picture
Julian Galluzzo

Forgot Password Form (Red & Beige)

Memberstack-powered forgot password form for our Online Course template.
View now
Copy now
{"content":[{"id":"a4401e","name":"section","parent":0,"children":["f7a7ad"],"settings":{},"label":"Auth"},{"id":"f7a7ad","name":"container","parent":"a4401e","children":["447f5d"],"settings":{}},{"id":"447f5d","name":"block","parent":"f7a7ad","children":["fc745c","3cd600","650b99"],"settings":{"_cssGlobalClasses":["lhfzbg"],"_padding":{"bottom":"30"}}},{"id":"fc745c","name":"heading","parent":"447f5d","children":[],"settings":{"text":"Forgot your password?","_cssGlobalClasses":["ziixdz"]}},{"id":"3cd600","name":"text-basic","parent":"447f5d","children":[],"settings":{"text":"Let us know your email and we'll send you a reset code. In case you remembered it, you can click here to log in.","_cssGlobalClasses":["lxltzy"]},"label":"Paragraph"},{"id":"650b99","name":"ms-brcks-form","parent":"447f5d","children":[],"settings":{"formType":"forgot-password","planAction":"add","fields":[{"type":"email","placeholder":"Enter your email","required":true,"customFieldId":"email","width":"full","maxLength":"","value":"","id":"lqtjqj"}],"_cssGlobalClasses":["idrdai"],"socialAuth":[{"id":"okkrso","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"padding":{"bottom":"17","top":"17","left":"20","right":"20"},"border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"style":"solid","width":{"top":"1","right":"1","bottom":"1","left":"1"},"color":{"raw":"var(--border-base)"}}}],"fieldsLayout":"column","redirectUrl":"/reset-password"},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"lhfzbg","name":"auth__block","settings":{"_width":"100%","_widthMax":"500","_margin":{"left":"auto","right":"auto"},"_background":{"color":{"hex":"#ffffff"}},"_padding":{"left":"30","right":"30","bottom":"20","top":"45"},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"},"radius":{"top":"40","right":"40","bottom":"40","left":"40"}},"_alignItems":"flex-start"}},{"id":"ziixdz","name":"auth__heading","settings":{"_margin":{"bottom":"20"},"_typography":{"font-size":"40","line-height":"1"}},"modified":1745235104,"user_id":1},{"id":"lxltzy","name":"auth__paragraph","settings":{"_margin":{"bottom":"40"},"_cssCustom":".link {\n text-decoration: underline;\n}","_typography":{"color":{"hex":"#696969"}}},"modified":1745235104,"user_id":1},{"id":"idrdai","name":"auth__form","settings":{"_width":"100%","buttonWidth":"100%","buttonTypography":{"text-align":"center","color":{"hex":"#ffffff"},"font-size":"18"},"buttonBackground":{"raw":"var(--brand-color)"},"buttonPadding":{"bottom":"16","top":"16","left":"20","right":"20"},"buttonMargin":{"top":"15"},"buttonBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"inputBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid"},"inputPadding":{"left":"20","right":"20","bottom":"6","top":"6"},"fieldsLayout":"column","fieldsGap":"15"},"modified":1745235104,"user_id":1}],"globalElements":[]}
Download JSON
Profile Picture
Julian Galluzzo

Course Module Cards

Already used as a Bricks query loop - hook it up to your CPT and you're good to go!
View now
Copy now
{"content":[{"id":"kuvvux","name":"block","parent":"hfvluj","children":["rdsybz"],"settings":{"_display":"grid","_gridGap":"15","_gridTemplateColumns":"1fr 1fr 1fr","_gridTemplateColumns:mobile_portrait":"1fr"},"label":"Module Grid"},{"id":"rdsybz","name":"block","parent":"kuvvux","children":["ptfsok","jzjuhr"],"settings":{"_cssGlobalClasses":["gsxxte"],"query":{"objectType":"term","taxonomy":["module"],"orderby":"meta_value_num","meta_key":"number","order":"asc","number":"3"},"hasLoop":true},"label":"Card"},{"id":"ptfsok","name":"image","parent":"rdsybz","children":[],"settings":{"_cssGlobalClasses":["xnoddo"],"image":{"useDynamicData":"{acf_image}","size":"large"}},"themeStyles":[]},{"id":"jzjuhr","name":"block","parent":"rdsybz","children":["hfxmuu","dnpgvy","eajkhv"],"settings":{"_cssGlobalClasses":["hhdfkt"]},"label":"Content Wrap"},{"id":"hfxmuu","name":"heading","parent":"jzjuhr","children":[],"settings":{"_cssGlobalClasses":["tgitva"],"text":"{acf_number} - ","tag":"h3"}},{"id":"dnpgvy","name":"text-basic","parent":"jzjuhr","children":[],"settings":{"_cssGlobalClasses":["jlbyvt"],"text":""}},{"id":"eajkhv","name":"button","parent":"jzjuhr","children":[],"settings":{"text":"View lessons","_cssGlobalClasses":["xruzrw","qzejao"],"style":"primary","_width":"100%","link":{"type":"external","url":"/app/module/"}}}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"gsxxte","name":"mcard","settings":{"_background":{"color":{"hex":"#ffffff"}},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"},"radius":{"top":"40","right":"40","bottom":"40","left":"40"}},"_padding":{"bottom":"25","top":"20","left":"20","right":"20"}}},{"id":"xnoddo","name":"mcard__image","settings":{"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"},"radius":{"top":"25","right":"25","bottom":"25","left":"25"}}}},{"id":"hhdfkt","name":"mcard__content-wrap","settings":{"_padding":{"top":"20"},"_rowGap":"10"}},{"id":"tgitva","name":"mcard__heading","settings":{"_cssCustom":".red {\n color: var(--brand-color)\n}","_typography":{"font-weight":"600"}}},{"id":"jlbyvt","name":"mcard__text","settings":{"_margin":{"bottom":"10"}}},{"id":"xruzrw","name":"button","settings":{"_background":{"color":{"hex":"#f44336","raw":"var(--brand-color)"}},"_typography":{"color":{"hex":"#ffffff"},"font-size":"18"},"_padding":{"top":"13","bottom":"13","left":"25","right":"25"},"_boxShadow":{"values":{"offsetY":"5","blur":"0"},"color":{"hex":"#c21a0a"}},"_border":{"radius":{"top":"100","right":"100","bottom":"100","left":"100"}},"_background:hover":{"color":{"hex":"#e52c0b"}},"_cssTransition":"0.2s","_cursor":"pointer"},"modified":1747125364,"user_id":1},{"id":"qzejao","name":"button--secondary","settings":{"_background":{"color":{"hex":"#ffffff"}},"_typography":{"color":{"hex":"#000000"}},"_boxShadow":{"color":{"hex":"#ffc2c2","raw":"var(--shadow-fake)"},"values":{"offsetY":"5","blur":"0"}},"_border":{"width":{"bottom":"1","top":"1","left":"1","right":"1"},"style":"solid","color":{"raw":"var(--border-base)"}},"_background:hover":{"color":{"hex":"#f5f5f5"}}}}],"globalElements":[]}
Download JSON
Profile Picture
Julian Galluzzo

New Feature Callout

Tell your members about what's new on your site/course with this callout.
View now
Copy now
{"content":[{"id":"bbuuir","name":"block","parent":"hfvluj","children":["nqxxkk","tuaeah"],"settings":{"_cssGlobalClasses":["xaaank"],"_background":{"color":{"hex":"#13e600","rgb":"rgba(19, 230, 0, 0.2)","hsl":"hsla(115, 100%, 45%, 0.2)"}}},"label":"Callout"},{"id":"nqxxkk","name":"icon","parent":"bbuuir","children":[],"settings":{"_cssGlobalClasses":["whxgvq"],"icon":{"library":"ionicons","icon":"ion-ios-flash"}}},{"id":"tuaeah","name":"text-basic","parent":"bbuuir","children":[],"settings":{"_cssGlobalClasses":["qqmjko"],"text":"NEW: Cupidatat nostrud labore cupidatat magna nisi duis. Lorem irure veniam ex nostrud laborum mollit excepteur in. Consectetur eu dolor nisi incididunt et mollit magna. Amet exercitation et enim do laborum sint magna anim ipsum magna eiusmod. Consectetur laboris aute elit nisi laborum voluptate. Id enim dolore nisi."},"label":"Text"}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"xaaank","name":"callout","settings":{"_direction":"row","_alignItems":"center","_justifyContent":"flex-start","_columnGap":"20","_rowGap":"20","_padding":{"bottom":"20","top":"20","left":"20","right":"20"},"_background":{"color":{"hex":"#ebdf00","rgb":"rgba(235, 223, 0, 0.2)","hsl":"hsla(57, 100%, 46%, 0.2)"}},"_border":{"radius":{"top":"15","right":"15","bottom":"15","left":"15"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"}}}},{"id":"whxgvq","name":"callout__icon","settings":{"iconSize":"40"}},{"id":"qqmjko","name":"callout__text","settings":{"_typography":{"font-weight":"500"}}}],"globalElements":[]}
Download JSON
Profile Picture
Julian Galluzzo

Verify Email Callout

Tell your users to verify their email, and allow them to click to have the verification email resent. Powered by the Memberstack plugin.
View now
Copy now
{"content":[{"id":"qkcwyt","name":"block","parent":"hfvluj","children":["teahpq","kjlzee"],"settings":{"_cssGlobalClasses":["xaaank"],"_attributes":[{"id":"evsqij","name":"data-ms-content","value":"!verified"},{"id":"mtnzmw","name":"data-ms-action","value":"resend-verification-email"}],"_cursor":"pointer"},"label":"Callout"},{"id":"teahpq","name":"icon","parent":"qkcwyt","children":[],"settings":{"_cssGlobalClasses":["whxgvq"],"icon":{"library":"ionicons","icon":"ion-ios-warning"}}},{"id":"kjlzee","name":"text-basic","parent":"qkcwyt","children":[],"settings":{"_cssGlobalClasses":["qqmjko"],"text":"It looks like you still haven't verified your email! To keep unrestricted access to your account, please verify it. If you want us to send another email, please click here."},"label":"Text"}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"xaaank","name":"callout","settings":{"_direction":"row","_alignItems":"center","_justifyContent":"flex-start","_columnGap":"20","_rowGap":"20","_padding":{"bottom":"20","top":"20","left":"20","right":"20"},"_background":{"color":{"hex":"#ebdf00","rgb":"rgba(235, 223, 0, 0.2)","hsl":"hsla(57, 100%, 46%, 0.2)"}},"_border":{"radius":{"top":"15","right":"15","bottom":"15","left":"15"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"}}}},{"id":"whxgvq","name":"callout__icon","settings":{"iconSize":"40"}},{"id":"qqmjko","name":"callout__text","settings":{"_typography":{"font-weight":"500"}}}],"globalElements":[]}
Download JSON