[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fscreens\u002Fdb67ca7b-f21f-4411-9a25-2bb76f67e183":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"examples":26,"showcases":91,"links":92,"dates":103},"\u002Fexamples\u002Fscreens\u002Fdb67ca7b-f21f-4411-9a25-2bb76f67e183","detail","screens",true,{"title":9,"description":10,"og_image":11},"Checkout - Nicelydone","Screen UI design example from Treehouse. Signup and checkout page where the user selects a billing cycle, enters personal details, and provides payment…","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ftreehouse_checkout_d67965b8_nicelydone.jpg",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS screen examples","\u002Fexamples\u002Fscreens",{"label":20,"to":4},"Checkout",{"title":20,"eyebrow":22,"description":23,"sections":24,"body":25},"Screen design","Screen UI design example from Treehouse. Signup and checkout page where the user selects a billing cycle, enters personal details, and provides payment information to start a free trial.",[],[],[27],{"uuid":28,"title":20,"description":29,"canonical_path":30,"image":11,"width":31,"height":32,"image_alt":33,"published_at":34,"kind":35,"patterns":36,"component_categories":60,"app":77},"db67ca7b-f21f-4411-9a25-2bb76f67e183","Signup and checkout page where the user selects a billing cycle, enters personal details, and provides payment information to start a free trial.","\u002Fexamples\u002Fapps\u002Ftreehouse\u002Fscreens",2770,3414,"Checkout from Treehouse","2016-06-21T08:41:58.000Z","screen",[37,45,51],{"id":38,"label":20,"slug":39,"rank":40,"group":41},130,"checkout",0,{"id":42,"label":43,"slug":44},14,"Payments & Checkout","payments-and-checkout",{"id":46,"label":47,"slug":48,"rank":49,"group":50},131,"Payment Form","payment-form",1,{"id":42,"label":43,"slug":44},{"id":52,"label":53,"slug":54,"rank":55,"group":56},91,"Trial","trial",2,{"id":57,"label":58,"slug":59},9,"Plans & Limits","plans-and-limits",[61,65,69,73],{"id":62,"title":63,"slug":64},240,"Horizontal navigation","horizontal-navigation",{"id":66,"title":67,"slug":68},174,"Card","card",{"id":70,"title":71,"slug":72},260,"Badge","badge",{"id":74,"title":75,"slug":76},175,"Button","button",{"slug":78,"title":79,"logo":80,"baseline":81,"categories":82},"treehouse","Treehouse","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftreehouse-79f84fed.png","Effective, affordable tech education",[83,87],{"id":84,"title":85,"slug":86},32,"Education","education",{"id":88,"title":89,"slug":90},33,"E-Learning","e-learning",[],[93,95,97,99,101],{"label":20,"to":94},"\u002Fexamples\u002Fscreens\u002Fcheckout",{"label":47,"to":96},"\u002Fexamples\u002Fscreens\u002Fpayment-form",{"label":53,"to":98},"\u002Fexamples\u002Fscreens\u002Ftrial",{"label":100,"to":30},"Treehouse screen designs",{"label":102,"to":18},"All screen examples",{"published_at":34,"updated_at":104},"2026-09-05T20:19:05.362Z"]