[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fcard":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":350,"links":351,"dates":400},"\u002Fexamples\u002Fcomponents\u002Fcard","collection","components",true,{"example_count":9,"app_count":10},304,134,{"id":12,"title":13,"description":14},174,"Card","Explore how interfaces package an item into a compact preview. Look at how images, titles, supporting details, and actions are arranged within a card.",{"title":16,"description":17,"og_image":18},"Card UI examples - Nicelydone","Card UI design examples from SaaS apps. Explore how interfaces package an item into a compact preview. Look at how images, titles, supporting details, and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F739717dc-3826-4fe7-91da-5feea77f9be1.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Card UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Card UI design examples from SaaS apps. Explore how interfaces package an item into a compact preview. Look at how images, titles, supporting details, and actions are arranged within a card.",[32],{"title":33,"description":14,"links":34},"About Card",[],[36],"304 UI components",[38,72,105,131,161,184,213,236,254,278,304,326],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"88f85c75-496a-478b-90bf-e446fdf5e10f","Airbnb UI component","A product card displaying an apartment listing with an image, title, details, rating, and price.","\u002Fexamples\u002Fapps\u002Fairbnb\u002Fcomponents",781,829,"UI component from Airbnb","component",[48],{"id":12,"title":13,"slug":49},"card",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"airbnb","Airbnb","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fairbnb-2b8cc5d2.png","Book unique homes and experience a city like a local",[56,60,64,68],{"id":57,"title":58,"slug":59},5,"Travel","travel",{"id":61,"title":62,"slug":63},12,"Hospitality","hospitality",{"id":65,"title":66,"slug":67},17,"Peer to peer","peer-to-peer",{"id":69,"title":70,"slug":71},18,"Marketplace","marketplace",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"8243bacb-4ce6-49ce-882e-9b8e9f007673","Zaro UI component","A card displaying a preview of a support escalations dashboard.","\u002Fexamples\u002Fapps\u002Fzaro\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe4ce832d-b955-454d-b73b-3f44beab4c36.png",671,783,"UI component from Zaro",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"zaro","Zaro","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdcfeb606-2235-48bf-83e3-948e2ac20719.png","AI workspace with agents and apps for business automation",[89,93,97,101],{"id":90,"title":91,"slug":92},23,"Collaboration","collaboration",{"id":94,"title":95,"slug":96},80,"Artificial Intelligence","artificial-intelligence",{"id":98,"title":99,"slug":100},22,"Knowledge Management","knowledge-management",{"id":102,"title":103,"slug":104},46,"Analytics","analytics",{"uuid":106,"title":107,"description":108,"canonical_path":109,"image":110,"width":111,"height":112,"image_alt":113,"kind":46,"categories":114,"app":116},"a3d77f13-31de-4e7f-ae3a-ddea5e5cfa04","Usage Bar Chart Card","Displays a single metric count with date range and bar visualization for API usage analytics","\u002Fexamples\u002Fapps\u002Fexa\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F60286d72-8786-4557-8526-d3d29cd8b66b.jpg",1224,840,"Usage Bar Chart Card from Exa",[115],{"id":12,"title":13,"slug":49},{"slug":117,"title":118,"logo":119,"baseline":120,"categories":121},"exa","Exa","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F011e446a-087b-451e-b27d-63d67d92a42f.png","Real-time AI search engine with structured web search API and deep research tools",[122,126,127],{"id":123,"title":124,"slug":125},55,"Search engine","search-engine",{"id":94,"title":95,"slug":96},{"id":128,"title":129,"slug":130},37,"Developer APIs","developer-apis",{"uuid":132,"title":133,"description":134,"canonical_path":135,"image":136,"width":137,"height":138,"image_alt":139,"kind":46,"categories":140,"app":142},"b57a8ee9-e557-4cc4-867b-c085ae25fa3e","Feature demonstration cards","Displays three WhatsApp integration capabilities with icons, descriptions, and example interactions","\u002Fexamples\u002Fapps\u002Ftown\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0d546c1e-8f77-4244-b8ee-65994322bee1.png",3024,1337,"Feature demonstration cards from Town",[141],{"id":12,"title":13,"slug":49},{"slug":143,"title":144,"logo":145,"baseline":146,"categories":147},"town","Town","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fb6cf707d-df49-4190-b803-766b8914df89.png","The AI assistant that manages your inbox, schedules meetings, and handles busywork.",[148,149,153,157],{"id":94,"title":95,"slug":96},{"id":150,"title":151,"slug":152},30,"Productivity","productivity",{"id":154,"title":155,"slug":156},92,"Email","email",{"id":158,"title":159,"slug":160},101,"Calendar","calendar",{"uuid":162,"title":163,"description":164,"canonical_path":165,"image":166,"width":167,"height":168,"image_alt":169,"kind":46,"categories":170,"app":172},"f8d45364-4901-4361-82f3-32d0b99899b3","Liveblocks UI component","A minimalist user interface for an issue tracker application, presented within a card.","\u002Fexamples\u002Fapps\u002Fliveblocks\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F242ff376-bac1-4dbf-882b-c47a4ece8f91.png",891,804,"UI component from Liveblocks",[171],{"id":12,"title":13,"slug":49},{"slug":173,"title":174,"logo":175,"baseline":176,"categories":177},"liveblocks","Liveblocks","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F081e178d-2cab-4e0b-93f8-061e021783fa.png","Build amazing real‑time collaborative products",[178,182,183],{"id":179,"title":180,"slug":181},48,"Developer Tools","developer-tools",{"id":90,"title":91,"slug":92},{"id":128,"title":129,"slug":130},{"uuid":185,"title":186,"description":187,"canonical_path":188,"image":189,"width":190,"height":191,"image_alt":192,"kind":46,"categories":193,"app":195},"13560ed4-fa89-413c-bdf3-6b9c6337d855","Maze UI component","A card displaying a demo project with a status label and an action menu.","\u002Fexamples\u002Fapps\u002Fmaze\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fda12e328-edd9-402c-8288-bcc99e147a20.png",700,454,"UI component from Maze",[194],{"id":12,"title":13,"slug":49},{"slug":196,"title":197,"logo":198,"baseline":199,"categories":200},"maze","Maze","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F29732693-68cb-43d3-8a42-056936993f0f.png","Rapid testing for modern teams",[201,205,209],{"id":202,"title":203,"slug":204},8,"Design","design",{"id":206,"title":207,"slug":208},69,"Surveys","surveys",{"id":210,"title":211,"slug":212},104,"User Research","user-research",{"uuid":214,"title":215,"description":216,"canonical_path":217,"image":218,"width":219,"height":220,"image_alt":221,"kind":46,"categories":222,"app":224},"a8ca16a2-b0e7-4ebe-829f-a70665660782","Paper UI component","A card displaying a video thumbnail and description about syncing designs with code.","\u002Fexamples\u002Fapps\u002Fpaper\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcab19fd4-7ff4-4306-88a1-84d298fbec4b.png",907,739,"UI component from Paper",[223],{"id":12,"title":13,"slug":49},{"slug":225,"title":226,"logo":227,"baseline":228,"categories":229},"paper","Paper","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6406196d-df59-4e20-b60a-7d067ada271c.png","Design, share, ship",[230,234,235],{"id":231,"title":232,"slug":233},7,"Web Development","web-development",{"id":202,"title":203,"slug":204},{"id":90,"title":91,"slug":92},{"uuid":237,"title":238,"description":239,"canonical_path":240,"image":241,"width":242,"height":243,"image_alt":244,"kind":46,"categories":245,"app":247},"54fb8a87-91f2-4a37-aab1-b779cc15ff4d","Variant UI component","A note-taking application displaying a list of notes and the detailed content of a selected note, along with customization options.","\u002Fexamples\u002Fapps\u002Fvariant\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F786897a9-4fd6-4237-b083-a9246bb7f0e0.png",1696,1336,"UI component from Variant",[246],{"id":12,"title":13,"slug":49},{"slug":248,"title":249,"logo":250,"baseline":251,"categories":252},"variant","Variant","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F10aff1b7-1378-4835-8fd2-648e36381153.png","Endless designs for your ideas, just scroll",[253],{"id":202,"title":203,"slug":204},{"uuid":255,"title":256,"description":257,"canonical_path":258,"image":259,"width":260,"height":261,"image_alt":262,"kind":46,"categories":263,"app":265},"a1ba860f-5471-4ea7-91ad-5cd8dcc1864e","Dovetail UI component","A display of featured software integrations presented in a card-based layout.","\u002Fexamples\u002Fapps\u002Fdovetail\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe4a074f9-da8b-4b77-b725-31951ea6aff9.png",2192,945,"UI component from Dovetail",[264],{"id":12,"title":13,"slug":49},{"slug":266,"title":267,"logo":268,"baseline":269,"categories":270},"dovetail","Dovetail","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6b47c81d-b89f-43c4-9087-0c1e1df518d7.png","Helps you with the key steps of UX research",[271,272,273,277],{"id":202,"title":203,"slug":204},{"id":98,"title":99,"slug":100},{"id":274,"title":275,"slug":276},35,"Feedback","feedback",{"id":210,"title":211,"slug":212},{"uuid":279,"title":280,"description":281,"canonical_path":282,"image":283,"width":284,"height":285,"image_alt":286,"kind":46,"categories":287,"app":289},"e5c88fcf-a9e7-4b0d-9b20-2a433d282339","Chatbase UI component","A web page section showcasing features of an AI agent for customer support with a grid layout.","\u002Fexamples\u002Fapps\u002Fchatbase\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F239c0742-f484-4a60-bda1-feecce68f069.png",2720,1616,"UI component from Chatbase",[288],{"id":12,"title":13,"slug":49},{"slug":290,"title":291,"logo":292,"baseline":293,"categories":294},"chatbase","Chatbase","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F7f20904a-e719-4d66-8569-3859ea3fbf78.png","AI agents for magical customer experiences",[295,299,300],{"id":296,"title":297,"slug":298},47,"Customer Service","customer-service",{"id":94,"title":95,"slug":96},{"id":301,"title":302,"slug":303},96,"No code","no-code",{"uuid":305,"title":306,"description":307,"canonical_path":308,"image":309,"width":310,"height":311,"image_alt":312,"kind":46,"categories":313,"app":315},"886e0edf-21d1-454a-a824-7e1da018a253","Lightfield UI component","A card displaying lead information with various attributes and a status indicator.","\u002Fexamples\u002Fapps\u002Flightfield\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb631fc95-5f2e-419c-a2ea-3b0522424bea.png",596,521,"UI component from Lightfield",[314],{"id":12,"title":13,"slug":49},{"slug":316,"title":317,"logo":318,"baseline":319,"categories":320},"lightfield","Lightfield","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F3428fd96-b66c-4c23-a060-55858d095f59.png","A new kind of CRM",[321,325],{"id":322,"title":323,"slug":324},53,"CRM","crm",{"id":94,"title":95,"slug":96},{"uuid":327,"title":328,"description":329,"canonical_path":330,"image":331,"width":332,"height":333,"image_alt":334,"kind":46,"categories":335,"app":337},"df8c17c7-a0a2-49f5-b39e-b2b32d694ae4","Gumloop UI component","A configuration card for combining list items into a single piece of text.","\u002Fexamples\u002Fapps\u002Fgumloop\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7689950b-df04-46fe-92b2-d87055ea4585.png",1000,817,"UI component from Gumloop",[336],{"id":12,"title":13,"slug":49},{"slug":338,"title":339,"logo":340,"baseline":341,"categories":342},"gumloop","Gumloop","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fbb3b7d8d-2866-4949-a601-d6f8deba3b8f.png","The AI automation platform built for everyone",[343,344,345,346],{"id":150,"title":151,"slug":152},{"id":94,"title":95,"slug":96},{"id":301,"title":302,"slug":303},{"id":347,"title":348,"slug":349},105,"Workflow Automation","workflow-automation",[],[352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397],{"label":353,"to":354},"Browse","\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":356,"to":357},"Filter & Sort","\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":359,"to":360},"Use Case Page","\u002Fexamples\u002Fpages\u002Fuse-case-page",{"label":362,"to":363},"AI Assistant","\u002Fexamples\u002Fscreens\u002Fai-assistant",{"label":365,"to":366},"Airbnb design examples","\u002Fexamples\u002Fapps\u002Fairbnb",{"label":368,"to":369},"Zaro design examples","\u002Fexamples\u002Fapps\u002Fzaro",{"label":371,"to":372},"Exa design examples","\u002Fexamples\u002Fapps\u002Fexa",{"label":374,"to":375},"Town design examples","\u002Fexamples\u002Fapps\u002Ftown",{"label":377,"to":378},"Liveblocks design examples","\u002Fexamples\u002Fapps\u002Fliveblocks",{"label":380,"to":381},"Maze design examples","\u002Fexamples\u002Fapps\u002Fmaze",{"label":383,"to":384},"Paper design examples","\u002Fexamples\u002Fapps\u002Fpaper",{"label":386,"to":387},"Variant design examples","\u002Fexamples\u002Fapps\u002Fvariant",{"label":389,"to":390},"Dovetail design examples","\u002Fexamples\u002Fapps\u002Fdovetail",{"label":392,"to":393},"Chatbase design examples","\u002Fexamples\u002Fapps\u002Fchatbase",{"label":395,"to":396},"Lightfield design examples","\u002Fexamples\u002Fapps\u002Flightfield",{"label":398,"to":399},"Gumloop design examples","\u002Fexamples\u002Fapps\u002Fgumloop",{"published_at":401,"updated_at":402},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]