[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Framp":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":40,"examples":63,"showcases":64,"links":401,"dates":419},"\u002Fexamples\u002Fapps\u002Framp","detail","apps",true,{"title":9,"description":10,"og_image":11},"Ramp design examples - Nicelydone","Explore Ramp UI design examples. The corporate card built for savings","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fbbc362e6-c2bf-4a18-8591-144e5a0016b3.png",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"Ramp design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":39},"SaaS app examples",[24],{"title":25,"links":26},"Explore Ramp",[27,30,33,36],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Framp\u002Fscreens",{"label":31,"to":32},"user flows","\u002Fexamples\u002Fapps\u002Framp\u002Fflows",{"label":34,"to":35},"UI components","\u002Fexamples\u002Fapps\u002Framp\u002Fcomponents",{"label":37,"to":38},"marketing pages","\u002Fexamples\u002Fapps\u002Framp\u002Fmarketing",[],{"title":41,"slug":42,"description":43,"logo":44,"url":45,"categories":46},"Ramp","ramp","The corporate card built for savings","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Framp-b0d4616e.png","https:\u002F\u002Framp.com",[47,51,55,59],{"id":48,"title":49,"slug":50},36,"Finance","finance",{"id":52,"title":53,"slug":54},39,"Payments","payments",{"id":56,"title":57,"slug":58},56,"Accounting","accounting",{"id":60,"title":61,"slug":62},80,"Artificial Intelligence","artificial-intelligence",[],[65,392,395,398],{"family":66,"examples":67},"screens",[68,120,149,161,198,225,253,293,316,334,353,366],{"uuid":69,"title":70,"description":71,"canonical_path":29,"image":11,"width":72,"height":73,"image_alt":74,"kind":75,"patterns":76,"component_categories":101,"app":118},"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",[77,86,95],{"id":78,"label":79,"slug":80,"rank":81,"group":82},73,"Guided Tour","guided-tour",0,{"id":83,"label":84,"slug":85},7,"Onboarding & Education","onboarding-and-education",{"id":87,"label":88,"slug":89,"rank":90,"group":91},114,"Confirmation","confirmation",1,{"id":92,"label":93,"slug":94},12,"States & Feedback","states-and-feedback",{"id":96,"label":97,"slug":98,"rank":99,"group":100},77,"Welcome","welcome",2,{"id":83,"label":84,"slug":85},[102,106,110,114],{"id":103,"title":104,"slug":105},284,"Modal","modal",{"id":107,"title":108,"slug":109},175,"Button","button",{"id":111,"title":112,"slug":113},233,"Tabs","tabs",{"id":115,"title":116,"slug":117},260,"Badge","badge",{"slug":42,"title":41,"logo":44,"categories":119},[],{"uuid":121,"title":70,"description":122,"canonical_path":29,"image":123,"width":72,"height":73,"image_alt":74,"kind":75,"patterns":124,"component_categories":143,"app":147},"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",[125,133,135],{"id":126,"label":127,"slug":128,"rank":81,"group":129},88,"Feature Gate","feature-gate",{"id":130,"label":131,"slug":132},9,"Plans & Limits","plans-and-limits",{"id":78,"label":79,"slug":80,"rank":90,"group":134},{"id":83,"label":84,"slug":85},{"id":136,"label":137,"slug":138,"rank":99,"group":139},108,"Leaderboard","leaderboard",{"id":140,"label":141,"slug":142},11,"Social & Collaboration","social-and-collaboration",[144,145,146],{"id":103,"title":104,"slug":105},{"id":107,"title":108,"slug":109},{"id":115,"title":116,"slug":117},{"slug":42,"title":41,"logo":44,"categories":148},[],{"uuid":150,"title":70,"description":151,"canonical_path":29,"image":152,"width":72,"height":73,"image_alt":74,"kind":75,"patterns":153,"component_categories":156,"app":159},"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",[154],{"id":78,"label":79,"slug":80,"rank":81,"group":155},{"id":83,"label":84,"slug":85},[157,158],{"id":103,"title":104,"slug":105},{"id":115,"title":116,"slug":117},{"slug":42,"title":41,"logo":44,"categories":160},[],{"uuid":162,"title":70,"description":163,"canonical_path":29,"image":164,"width":72,"height":73,"image_alt":74,"kind":75,"patterns":165,"component_categories":192,"app":196},"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",[166,168,176,181,184],{"id":78,"label":79,"slug":80,"rank":81,"group":167},{"id":83,"label":84,"slug":85},{"id":169,"label":170,"slug":171,"rank":90,"group":172},41,"Dashboard","dashboard",{"id":173,"label":174,"slug":175},4,"Data & Analysis","data-and-analysis",{"id":177,"label":178,"slug":179,"rank":99,"group":180},47,"Table","table",{"id":173,"label":174,"slug":175},{"id":96,"label":97,"slug":98,"rank":182,"group":183},3,{"id":83,"label":84,"slug":85},{"id":185,"label":186,"slug":187,"rank":173,"group":188},65,"Navigation Menu","navigation-menu",{"id":189,"label":190,"slug":191},6,"Navigation & Commands","navigation-and-commands",[193,194,195],{"id":107,"title":108,"slug":109},{"id":111,"title":112,"slug":113},{"id":115,"title":116,"slug":117},{"slug":42,"title":41,"logo":44,"categories":197},[],{"uuid":199,"title":70,"description":200,"canonical_path":29,"image":201,"width":72,"height":73,"image_alt":74,"kind":75,"patterns":202,"component_categories":212,"app":223},"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",[203,208,210],{"id":204,"label":205,"slug":206,"rank":81,"group":207},72,"Getting Started","getting-started",{"id":83,"label":84,"slug":85},{"id":78,"label":79,"slug":80,"rank":90,"group":209},{"id":83,"label":84,"slug":85},{"id":96,"label":97,"slug":98,"rank":99,"group":211},{"id":83,"label":84,"slug":85},[213,217,221,222],{"id":214,"title":215,"slug":216},258,"Header","header",{"id":218,"title":219,"slug":220},174,"Card","card",{"id":111,"title":112,"slug":113},{"id":115,"title":116,"slug":117},{"slug":42,"title":41,"logo":44,"categories":224},[],{"uuid":226,"title":70,"description":227,"canonical_path":29,"image":228,"width":72,"height":73,"image_alt":74,"kind":75,"patterns":229,"component_categories":243,"app":251},"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",[230,232,234,236],{"id":169,"label":170,"slug":171,"rank":81,"group":231},{"id":173,"label":174,"slug":175},{"id":177,"label":178,"slug":179,"rank":90,"group":233},{"id":173,"label":174,"slug":175},{"id":78,"label":79,"slug":80,"rank":99,"group":235},{"id":83,"label":84,"slug":85},{"id":237,"label":238,"slug":239,"rank":182,"group":240},13,"Filter & Sort","filter-and-sort",{"id":99,"label":241,"slug":242},"Actions","actions",[244,248,249,250],{"id":245,"title":246,"slug":247},211,"Pagination","pagination",{"id":107,"title":108,"slug":109},{"id":111,"title":112,"slug":113},{"id":115,"title":116,"slug":117},{"slug":42,"title":41,"logo":44,"categories":252},[],{"uuid":254,"title":70,"description":255,"canonical_path":29,"image":256,"width":72,"height":73,"image_alt":74,"kind":75,"patterns":257,"component_categories":279,"app":291},"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",[258,266,268,275,277],{"id":259,"label":260,"slug":261,"rank":81,"group":262},79,"Browse","browse",{"id":263,"label":264,"slug":265},8,"Pages & Content","pages-and-content",{"id":177,"label":178,"slug":179,"rank":90,"group":267},{"id":173,"label":174,"slug":175},{"id":269,"label":270,"slug":271,"rank":99,"group":272},28,"AI Chat","ai-chat",{"id":182,"label":273,"slug":274},"AI","ai",{"id":78,"label":79,"slug":80,"rank":182,"group":276},{"id":83,"label":84,"slug":85},{"id":237,"label":238,"slug":239,"rank":173,"group":278},{"id":99,"label":241,"slug":242},[280,284,288,289,290],{"id":281,"title":282,"slug":283},227,"Stepper","stepper",{"id":285,"title":286,"slug":287},169,"Avatar","avatar",{"id":107,"title":108,"slug":109},{"id":111,"title":112,"slug":113},{"id":115,"title":116,"slug":117},{"slug":42,"title":41,"logo":44,"categories":292},[],{"uuid":294,"title":70,"description":295,"canonical_path":29,"image":296,"width":72,"height":73,"image_alt":74,"kind":75,"patterns":297,"component_categories":309,"app":314},"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",[298,300,302,304,306],{"id":78,"label":79,"slug":80,"rank":81,"group":299},{"id":83,"label":84,"slug":85},{"id":169,"label":170,"slug":171,"rank":90,"group":301},{"id":173,"label":174,"slug":175},{"id":237,"label":238,"slug":239,"rank":99,"group":303},{"id":99,"label":241,"slug":242},{"id":177,"label":178,"slug":179,"rank":182,"group":305},{"id":173,"label":174,"slug":175},{"id":307,"label":112,"slug":113,"rank":173,"group":308},69,{"id":189,"label":190,"slug":191},[310,311,312,313],{"id":245,"title":246,"slug":247},{"id":107,"title":108,"slug":109},{"id":111,"title":112,"slug":113},{"id":115,"title":116,"slug":117},{"slug":42,"title":41,"logo":44,"categories":315},[],{"uuid":317,"title":70,"description":318,"canonical_path":29,"image":319,"width":72,"height":73,"image_alt":74,"kind":75,"patterns":320,"component_categories":327,"app":332},"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",[321,323,325],{"id":169,"label":170,"slug":171,"rank":81,"group":322},{"id":173,"label":174,"slug":175},{"id":78,"label":79,"slug":80,"rank":90,"group":324},{"id":83,"label":84,"slug":85},{"id":307,"label":112,"slug":113,"rank":99,"group":326},{"id":189,"label":190,"slug":191},[328,329,330,331],{"id":218,"title":219,"slug":220},{"id":107,"title":108,"slug":109},{"id":111,"title":112,"slug":113},{"id":115,"title":116,"slug":117},{"slug":42,"title":41,"logo":44,"categories":333},[],{"uuid":335,"title":70,"description":336,"canonical_path":29,"image":337,"width":72,"height":73,"image_alt":74,"kind":75,"patterns":338,"component_categories":348,"app":351},"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",[339,341,343],{"id":78,"label":79,"slug":80,"rank":81,"group":340},{"id":83,"label":84,"slug":85},{"id":169,"label":170,"slug":171,"rank":90,"group":342},{"id":173,"label":174,"slug":175},{"id":344,"label":345,"slug":346,"rank":99,"group":347},76,"Tutorial","tutorial",{"id":83,"label":84,"slug":85},[349,350],{"id":103,"title":104,"slug":105},{"id":115,"title":116,"slug":117},{"slug":42,"title":41,"logo":44,"categories":352},[],{"uuid":354,"title":70,"description":355,"canonical_path":29,"image":356,"width":72,"height":73,"image_alt":74,"kind":75,"patterns":357,"component_categories":360,"app":364},"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",[358],{"id":78,"label":79,"slug":80,"rank":81,"group":359},{"id":83,"label":84,"slug":85},[361,362,363],{"id":103,"title":104,"slug":105},{"id":111,"title":112,"slug":113},{"id":115,"title":116,"slug":117},{"slug":42,"title":41,"logo":44,"categories":365},[],{"uuid":367,"title":70,"description":368,"canonical_path":29,"image":369,"width":72,"height":73,"image_alt":74,"kind":75,"patterns":370,"component_categories":381,"app":390},"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",[371,373,375,377,379],{"id":169,"label":170,"slug":171,"rank":81,"group":372},{"id":173,"label":174,"slug":175},{"id":78,"label":79,"slug":80,"rank":90,"group":374},{"id":83,"label":84,"slug":85},{"id":177,"label":178,"slug":179,"rank":99,"group":376},{"id":173,"label":174,"slug":175},{"id":185,"label":186,"slug":187,"rank":182,"group":378},{"id":189,"label":190,"slug":191},{"id":96,"label":97,"slug":98,"rank":173,"group":380},{"id":83,"label":84,"slug":85},[382,386,387,388,389],{"id":383,"title":384,"slug":385},214,"Popover","popover",{"id":285,"title":286,"slug":287},{"id":107,"title":108,"slug":109},{"id":111,"title":112,"slug":113},{"id":115,"title":116,"slug":117},{"slug":42,"title":41,"logo":44,"categories":391},[],{"family":393,"examples":394},"flows",[],{"family":396,"examples":397},"components",[],{"family":399,"examples":400},"pages",[],[402,404,406,408,410,413,416],{"label":403,"to":29},"Ramp product screens",{"label":405,"to":38},"Ramp marketing pages",{"label":407,"to":32},"Ramp user flows",{"label":409,"to":35},"Ramp UI components",{"label":411,"to":412},"Finance app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffinance",{"label":414,"to":415},"Payments app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fpayments",{"label":417,"to":418},"Accounting app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Faccounting",{"published_at":420,"updated_at":421},"2021-02-09T07:48:51.000Z","2026-09-13T13:02:39.000Z"]