[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Framp\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":51,"showcases":376,"links":377,"dates":411},"\u002Fexamples\u002Fapps\u002Framp\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Ramp product screens examples - Nicelydone","Browse Ramp screen design examples. Preview the interface screenshots and explore related UI patterns. The corporate card built for savings","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fbbc362e6-c2bf-4a18-8591-144e5a0016b3.png",[13,16,19,22],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":21},"Ramp design examples","\u002Fexamples\u002Fapps\u002Framp",{"label":23,"to":4},"Ramp product screens examples",{"title":23,"eyebrow":25,"description":10,"sections":26,"body":27},"SaaS app examples",[],[],{"title":29,"slug":30,"description":31,"logo":32,"url":33,"categories":34},"Ramp","ramp","The corporate card built for savings","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Framp-b0d4616e.png","https:\u002F\u002Framp.com",[35,39,43,47],{"id":36,"title":37,"slug":38},36,"Finance","finance",{"id":40,"title":41,"slug":42},39,"Payments","payments",{"id":44,"title":45,"slug":46},56,"Accounting","accounting",{"id":48,"title":49,"slug":50},80,"Artificial Intelligence","artificial-intelligence",[52,104,133,145,182,209,237,277,300,318,337,350],{"uuid":53,"title":54,"description":55,"canonical_path":4,"image":11,"width":56,"height":57,"image_alt":58,"kind":59,"patterns":60,"component_categories":85,"app":102},"bbc362e6-c2bf-4a18-8591-144e5a0016b3","Ramp Demo - Welcome To Ramp | Ramp","Interactive product demo landing page where the user must enter their work email address in a centered modal to unlock the tour.",3024,1778,"Ramp Demo - Welcome To Ramp | Ramp from Ramp","screen",[61,70,79],{"id":62,"label":63,"slug":64,"rank":65,"group":66},73,"Guided Tour","guided-tour",0,{"id":67,"label":68,"slug":69},7,"Onboarding & Education","onboarding-and-education",{"id":71,"label":72,"slug":73,"rank":74,"group":75},114,"Confirmation","confirmation",1,{"id":76,"label":77,"slug":78},12,"States & Feedback","states-and-feedback",{"id":80,"label":81,"slug":82,"rank":83,"group":84},77,"Welcome","welcome",2,{"id":67,"label":68,"slug":69},[86,90,94,98],{"id":87,"title":88,"slug":89},284,"Modal","modal",{"id":91,"title":92,"slug":93},175,"Button","button",{"id":95,"title":96,"slug":97},233,"Tabs","tabs",{"id":99,"title":100,"slug":101},260,"Badge","badge",{"slug":30,"title":29,"logo":32,"categories":103},[],{"uuid":105,"title":54,"description":106,"canonical_path":4,"image":107,"width":56,"height":57,"image_alt":58,"kind":59,"patterns":108,"component_categories":127,"app":131},"9f3a6943-9335-4783-b78b-ee0f217a39f5","Marketing demo page where the user must enter their work email address to unlock an interactive product tour of the reporting dashboard.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9f3a6943-9335-4783-b78b-ee0f217a39f5.png",[109,117,119],{"id":110,"label":111,"slug":112,"rank":65,"group":113},88,"Feature Gate","feature-gate",{"id":114,"label":115,"slug":116},9,"Plans & Limits","plans-and-limits",{"id":62,"label":63,"slug":64,"rank":74,"group":118},{"id":67,"label":68,"slug":69},{"id":120,"label":121,"slug":122,"rank":83,"group":123},108,"Leaderboard","leaderboard",{"id":124,"label":125,"slug":126},11,"Social & Collaboration","social-and-collaboration",[128,129,130],{"id":87,"title":88,"slug":89},{"id":91,"title":92,"slug":93},{"id":99,"title":100,"slug":101},{"slug":30,"title":29,"logo":32,"categories":132},[],{"uuid":134,"title":54,"description":135,"canonical_path":4,"image":136,"width":56,"height":57,"image_alt":58,"kind":59,"patterns":137,"component_categories":140,"app":143},"49975263-91c8-4b1a-b9f1-0a8829b7face","Interactive product demo where a welcome modal prompts the user to start exploring the reporting dashboard and finance automation features.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F49975263-91c8-4b1a-b9f1-0a8829b7face.png",[138],{"id":62,"label":63,"slug":64,"rank":65,"group":139},{"id":67,"label":68,"slug":69},[141,142],{"id":87,"title":88,"slug":89},{"id":99,"title":100,"slug":101},{"slug":30,"title":29,"logo":32,"categories":144},[],{"uuid":146,"title":54,"description":147,"canonical_path":4,"image":148,"width":56,"height":57,"image_alt":58,"kind":59,"patterns":149,"component_categories":176,"app":180},"cefa6753-1113-499f-99dd-dff13b12a2aa","Interactive demo of a corporate cards dashboard where a product tour popover guides the user through the virtual cards list.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcefa6753-1113-499f-99dd-dff13b12a2aa.png",[150,152,160,165,168],{"id":62,"label":63,"slug":64,"rank":65,"group":151},{"id":67,"label":68,"slug":69},{"id":153,"label":154,"slug":155,"rank":74,"group":156},41,"Dashboard","dashboard",{"id":157,"label":158,"slug":159},4,"Data & Analysis","data-and-analysis",{"id":161,"label":162,"slug":163,"rank":83,"group":164},47,"Table","table",{"id":157,"label":158,"slug":159},{"id":80,"label":81,"slug":82,"rank":166,"group":167},3,{"id":67,"label":68,"slug":69},{"id":169,"label":170,"slug":171,"rank":157,"group":172},65,"Navigation Menu","navigation-menu",{"id":173,"label":174,"slug":175},6,"Navigation & Commands","navigation-and-commands",[177,178,179],{"id":91,"title":92,"slug":93},{"id":95,"title":96,"slug":97},{"id":99,"title":100,"slug":101},{"slug":30,"title":29,"logo":32,"categories":181},[],{"uuid":183,"title":54,"description":184,"canonical_path":4,"image":185,"width":56,"height":57,"image_alt":58,"kind":59,"patterns":186,"component_categories":196,"app":207},"fd8f1afe-689e-4e9a-b34b-185d1c0c5dde","Interactive product tour demonstrating how to create virtual and physical cards with spend controls via a side drawer.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ffd8f1afe-689e-4e9a-b34b-185d1c0c5dde.png",[187,192,194],{"id":188,"label":189,"slug":190,"rank":65,"group":191},72,"Getting Started","getting-started",{"id":67,"label":68,"slug":69},{"id":62,"label":63,"slug":64,"rank":74,"group":193},{"id":67,"label":68,"slug":69},{"id":80,"label":81,"slug":82,"rank":83,"group":195},{"id":67,"label":68,"slug":69},[197,201,205,206],{"id":198,"title":199,"slug":200},258,"Header","header",{"id":202,"title":203,"slug":204},174,"Card","card",{"id":95,"title":96,"slug":97},{"id":99,"title":100,"slug":101},{"slug":30,"title":29,"logo":32,"categories":208},[],{"uuid":210,"title":54,"description":211,"canonical_path":4,"image":212,"width":56,"height":57,"image_alt":58,"kind":59,"patterns":213,"component_categories":227,"app":235},"d7d5aa23-7fb6-42a4-823f-a224e022ed53","List view of employee reimbursements during an interactive product tour, showing status, dates, and amounts for each expense.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fd7d5aa23-7fb6-42a4-823f-a224e022ed53.png",[214,216,218,220],{"id":153,"label":154,"slug":155,"rank":65,"group":215},{"id":157,"label":158,"slug":159},{"id":161,"label":162,"slug":163,"rank":74,"group":217},{"id":157,"label":158,"slug":159},{"id":62,"label":63,"slug":64,"rank":83,"group":219},{"id":67,"label":68,"slug":69},{"id":221,"label":222,"slug":223,"rank":166,"group":224},13,"Filter & Sort","filter-and-sort",{"id":83,"label":225,"slug":226},"Actions","actions",[228,232,233,234],{"id":229,"title":230,"slug":231},211,"Pagination","pagination",{"id":91,"title":92,"slug":93},{"id":95,"title":96,"slug":97},{"id":99,"title":100,"slug":101},{"slug":30,"title":29,"logo":32,"categories":236},[],{"uuid":238,"title":54,"description":239,"canonical_path":4,"image":240,"width":56,"height":57,"image_alt":58,"kind":59,"patterns":241,"component_categories":263,"app":275},"b16d2500-8181-4e84-83ee-a081209d49f2","List view where the user manages and reviews bills, currently showing a product tour step highlighting AI invoice extraction.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb16d2500-8181-4e84-83ee-a081209d49f2.png",[242,250,252,259,261],{"id":243,"label":244,"slug":245,"rank":65,"group":246},79,"Browse","browse",{"id":247,"label":248,"slug":249},8,"Pages & Content","pages-and-content",{"id":161,"label":162,"slug":163,"rank":74,"group":251},{"id":157,"label":158,"slug":159},{"id":253,"label":254,"slug":255,"rank":83,"group":256},28,"AI Chat","ai-chat",{"id":166,"label":257,"slug":258},"AI","ai",{"id":62,"label":63,"slug":64,"rank":166,"group":260},{"id":67,"label":68,"slug":69},{"id":221,"label":222,"slug":223,"rank":157,"group":262},{"id":83,"label":225,"slug":226},[264,268,272,273,274],{"id":265,"title":266,"slug":267},227,"Stepper","stepper",{"id":269,"title":270,"slug":271},169,"Avatar","avatar",{"id":91,"title":92,"slug":93},{"id":95,"title":96,"slug":97},{"id":99,"title":100,"slug":101},{"slug":30,"title":29,"logo":32,"categories":276},[],{"uuid":278,"title":54,"description":279,"canonical_path":4,"image":280,"width":56,"height":57,"image_alt":58,"kind":59,"patterns":281,"component_categories":293,"app":298},"adda4f23-2402-43e4-b0a5-4bee0fec4fe1","Interactive product tour step showing an accounting dashboard where the user views a filtered list of Ramp card transactions needing review.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fadda4f23-2402-43e4-b0a5-4bee0fec4fe1.png",[282,284,286,288,290],{"id":62,"label":63,"slug":64,"rank":65,"group":283},{"id":67,"label":68,"slug":69},{"id":153,"label":154,"slug":155,"rank":74,"group":285},{"id":157,"label":158,"slug":159},{"id":221,"label":222,"slug":223,"rank":83,"group":287},{"id":83,"label":225,"slug":226},{"id":161,"label":162,"slug":163,"rank":166,"group":289},{"id":157,"label":158,"slug":159},{"id":291,"label":96,"slug":97,"rank":157,"group":292},69,{"id":173,"label":174,"slug":175},[294,295,296,297],{"id":229,"title":230,"slug":231},{"id":91,"title":92,"slug":93},{"id":95,"title":96,"slug":97},{"id":99,"title":100,"slug":101},{"slug":30,"title":29,"logo":32,"categories":299},[],{"uuid":301,"title":54,"description":302,"canonical_path":4,"image":303,"width":56,"height":57,"image_alt":58,"kind":59,"patterns":304,"component_categories":311,"app":316},"094b9444-b424-49c8-adbe-ac8f77a58a44","Dashboard showing the user's cashback balance and redemption options like paying down the card balance, overlaid with an interactive product tour prompt.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F094b9444-b424-49c8-adbe-ac8f77a58a44.png",[305,307,309],{"id":153,"label":154,"slug":155,"rank":65,"group":306},{"id":157,"label":158,"slug":159},{"id":62,"label":63,"slug":64,"rank":74,"group":308},{"id":67,"label":68,"slug":69},{"id":291,"label":96,"slug":97,"rank":83,"group":310},{"id":173,"label":174,"slug":175},[312,313,314,315],{"id":202,"title":203,"slug":204},{"id":91,"title":92,"slug":93},{"id":95,"title":96,"slug":97},{"id":99,"title":100,"slug":101},{"slug":30,"title":29,"logo":32,"categories":317},[],{"uuid":319,"title":54,"description":320,"canonical_path":4,"image":321,"width":56,"height":57,"image_alt":58,"kind":59,"patterns":322,"component_categories":332,"app":335},"49a0fab6-a1ea-4320-8ac3-06cb11c77c34","Interactive product demo of a reporting dashboard featuring a modal that guides the user through different features like cards and expense management.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F49a0fab6-a1ea-4320-8ac3-06cb11c77c34.png",[323,325,327],{"id":62,"label":63,"slug":64,"rank":65,"group":324},{"id":67,"label":68,"slug":69},{"id":153,"label":154,"slug":155,"rank":74,"group":326},{"id":157,"label":158,"slug":159},{"id":328,"label":329,"slug":330,"rank":83,"group":331},76,"Tutorial","tutorial",{"id":67,"label":68,"slug":69},[333,334],{"id":87,"title":88,"slug":89},{"id":99,"title":100,"slug":101},{"slug":30,"title":29,"logo":32,"categories":336},[],{"uuid":338,"title":54,"description":339,"canonical_path":4,"image":340,"width":56,"height":57,"image_alt":58,"kind":59,"patterns":341,"component_categories":344,"app":348},"3421720a-5519-4aa4-9a81-5df879ffe46d","Interactive product demo showing a virtual cards overview with a modal prompting the user to start a vendor-specific card issuance flow.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F3421720a-5519-4aa4-9a81-5df879ffe46d.png",[342],{"id":62,"label":63,"slug":64,"rank":65,"group":343},{"id":67,"label":68,"slug":69},[345,346,347],{"id":87,"title":88,"slug":89},{"id":95,"title":96,"slug":97},{"id":99,"title":100,"slug":101},{"slug":30,"title":29,"logo":32,"categories":349},[],{"uuid":351,"title":54,"description":352,"canonical_path":4,"image":353,"width":56,"height":57,"image_alt":58,"kind":59,"patterns":354,"component_categories":365,"app":374},"a15700b5-0707-45a0-b127-bc12166ab0fb","Interactive product demo showing a virtual cards overview table with an onboarding tooltip guiding the user to issue spend.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fa15700b5-0707-45a0-b127-bc12166ab0fb.png",[355,357,359,361,363],{"id":153,"label":154,"slug":155,"rank":65,"group":356},{"id":157,"label":158,"slug":159},{"id":62,"label":63,"slug":64,"rank":74,"group":358},{"id":67,"label":68,"slug":69},{"id":161,"label":162,"slug":163,"rank":83,"group":360},{"id":157,"label":158,"slug":159},{"id":169,"label":170,"slug":171,"rank":166,"group":362},{"id":173,"label":174,"slug":175},{"id":80,"label":81,"slug":82,"rank":157,"group":364},{"id":67,"label":68,"slug":69},[366,370,371,372,373],{"id":367,"title":368,"slug":369},214,"Popover","popover",{"id":269,"title":270,"slug":271},{"id":91,"title":92,"slug":93},{"id":95,"title":96,"slug":97},{"id":99,"title":100,"slug":101},{"slug":30,"title":29,"logo":32,"categories":375},[],[],[378,380,382,384,386,388,390,392,394,396,398,400,402,405,408],{"label":63,"to":379},"\u002Fexamples\u002Fscreens\u002Fguided-tour",{"label":154,"to":381},"\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":162,"to":383},"\u002Fexamples\u002Fscreens\u002Ftable",{"label":81,"to":385},"\u002Fexamples\u002Fscreens\u002Fwelcome",{"label":222,"to":387,"count":166},"\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":170,"to":389,"count":83},"\u002Fexamples\u002Fscreens\u002Fnavigation-menu",{"label":96,"to":391,"count":83},"\u002Fexamples\u002Fscreens\u002Ftabs",{"label":254,"to":393,"count":74},"\u002Fexamples\u002Fscreens\u002Fai-chat",{"label":244,"to":395,"count":74},"\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":72,"to":397,"count":74},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":111,"to":399,"count":74},"\u002Fexamples\u002Fscreens\u002Ffeature-gate",{"label":189,"to":401,"count":74},"\u002Fexamples\u002Fscreens\u002Fgetting-started",{"label":403,"to":404},"Finance app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffinance",{"label":406,"to":407},"Payments app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fpayments",{"label":409,"to":410},"Accounting app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Faccounting",{"published_at":412,"updated_at":413},"2021-02-09T07:48:51.000Z","2026-09-13T13:02:39.000Z"]