50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 51:T770,

Showcase your work like real files in a folder.

Folder Projects is an interactive portfolio component for Framer. On hover, the folder flap tilts open and a project card rises out with an image, a title, a description and a call to action. Each of the 4 tabs is its own project, and hovering a tab switches the card instantly.

It is designed Arabic-first, with native RTL layout, and switches to LTR in one click. It fits Arabic, English and bilingual websites.

Features

4 projects, each with its own image, title, description, button text, link and tab color
The whole card is clickable and opens the project, with an optional new tab
Smooth hover animation: the flap tilts, the inner folder rises, the card slides out
Native RTL / LTR switch, where tabs, notch, label and arrow all mirror correctly
Custom fonts for title, description, button and label, with Arabic fonts like IBM Plex Sans Arabic, Cairo, Tajawal, Almarai and Noto Kufi
Every color is a control and can be bound to your Framer color styles: background, folder front, inner folder, back panel, paper and card
Option for the inner folder to take the active tab's color
Responsive on desktop, tablet and mobile, with tap support on touch devices
Accessible: semantic HTML, keyboard navigation, Escape to close, focus rings and alt text
Canvas preview mode to edit any project's open card directly
Static-render safe for the canvas and exports, and respects reduced motion
Lightweight, with no extra dependencies

Perfect for: portfolios, design agencies, architecture studios, case studies, creative showcases and Arabic or Gulf/MENA websites.

52:T4bf,

Here is a detailed description of the UI component card based on the image:

Layout & Structure: A close-up view of a single UI component card with rounded corners.
Top Section: Features a dark, grainy vignette showing a texture of a laptop keyboard or a music production desk.
Bottom Section: A solid charcoal-colored overlay panel that rounds into the vignette above.
Typography: Centered Arabic text inside the dark panel, featuring "سهل وبسيط الاستخدام" (larger and bold at the top) and "خصصه بالكامل ليناسب احتياجاتك" (smaller and lighter below).
Icons: An arrow icon pointing up and to the right in the top-left corner of the dark panel, and a vertical slider icon in the top-right corner. All text and icons are in crisp white.
Lighting: Dramatic lighting that accentuates the texture of the upper background.

Would you like to adjust or format this description for a specific use case?

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-78114275-25ca-4e06-b3b8-93730419ff8a-all:/unified/creator/78114275-25ca-4e06-b3b8-93730419ff8a/activity/":[{"data":[{"id":"01a11197-0b11-72cf-b68a-a4f141e5e558","type":"component.created","target":{"type":"component","id":"keEuLhWzVz5AIovzKAKe","preview":"Folder Showcase – Ar","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/78114275-25ca-4e06-b3b8-93730419ff8a/01a11196-70e4-71ac-880b-3ca0a47dcdef.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"78114275-25ca-4e06-b3b8-93730419ff8a","name":"Mourad Mazouz","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/78114275-25ca-4e06-b3b8-93730419ff8a/vn8m81wl","slug":"mourad-business","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-06T14:21:13.873Z","latestAt":"2026-10-06T14:21:13.873Z"},{"id":"01a10c00-8506-7058-87c6-96820b4484eb","type":"component.created","target":{"type":"component","id":"I5GNAJiHvTI7WMClunqs","preview":"UI Component Card","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/78114275-25ca-4e06-b3b8-93730419ff8a/01a10bfe-c703-73c8-add1-20b3371bb23d.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"78114275-25ca-4e06-b3b8-93730419ff8a","name":"Mourad Mazouz","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/78114275-25ca-4e06-b3b8-93730419ff8a/vn8m81wl","slug":"mourad-business","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-05T12:18:43.077Z","latestAt":"2026-10-05T12:18:43.077Z"},{"id":"01a1080f-ee60-7575-bba7-a6d028d845c2","type":"creator.followed","target":{"type":"creator","id":"d84b3af4-cf3a-4f8c-a330-137560bb6207","preview":"Russet Supply","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d84b3af4-cf3a-4f8c-a330-137560bb6207/ftknkw3u","slug":"russetsupply","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"78114275-25ca-4e06-b3b8-93730419ff8a","name":"Mourad Mazouz","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/78114275-25ca-4e06-b3b8-93730419ff8a/vn8m81wl","slug":"mourad-business","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-04T17:57:04.213Z","latestAt":"2026-10-04T17:57:04.213Z"},{"id":"01a02a75-f47a-72ec-89fe-a0bd7d88e4e5","type":"post.liked","target":{"type":"post","id":"01a022e9-5b17-72b8-9ba6-067d07d1ef40","preview":"Back-to-back #1 on the Framer Marketplace \n My section just reached the #1 spot today. \n Grateful for the support. More to come.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Back-to-back #1 on the Framer Marketplace "}]},{"type":"paragraph","content":[{"type":"text","text":" My section just reached the #1 spot today. "}]},{"type":"paragraph","content":[{"type":"text","text":" Grateful for the support. More to come."}]}]},"thumbnail":"https://image.mux.com/JRQLHKWhaDDH1FWe00mJwVCfHqwt00RQGQZJ7aFr6TPYI/thumbnail.webp?time=19.852","targetDeleted":false,"owned":false,"actions":{"postId":"01a022e9-5b17-72b8-9ba6-067d07d1ef40","like":{"count":36,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"78114275-25ca-4e06-b3b8-93730419ff8a","name":"Mourad Mazouz","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/78114275-25ca-4e06-b3b8-93730419ff8a/vn8m81wl","slug":"mourad-business","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-22T17:12:48.494Z","latestAt":"2026-08-22T17:12:48.494Z"},{"id":"01a02a75-ea74-742a-904a-a221ee39cccf","type":"post.liked","target":{"type":"post","id":"01a028c9-7e7f-7529-b07c-c9d4746574c0","preview":"It’s always great to see people appreciating the quality of Flipbook 3D and other products built for Framer.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"It’s always great to see people appreciating the quality of "},{"type":"text","text":"Flipbook 3D","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/8ns2t4f","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" and other products built for Framer."}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/94772ad7-baad-4763-bd35-365704374dc3/01a028c8-1dc7-771d-a7df-81bc33c2880c.png","targetDeleted":false,"owned":false,"actions":{"postId":"01a028c9-7e7f-7529-b07c-c9d4746574c0","like":{"count":35,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"78114275-25ca-4e06-b3b8-93730419ff8a","name":"Mourad Mazouz","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/78114275-25ca-4e06-b3b8-93730419ff8a/vn8m81wl","slug":"mourad-business","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-22T17:12:45.935Z","latestAt":"2026-08-22T17:12:45.935Z"},{"id":"019ef933-e2a0-7303-8d59-cc2f50ff7d39","type":"template.liked","target":{"type":"template","id":"65551","preview":"Kirk","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/65551/kirk-pjbtb3lUj21PNTHD036MQX7OX0f5nB","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"78114275-25ca-4e06-b3b8-93730419ff8a","name":"Mourad Mazouz","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/78114275-25ca-4e06-b3b8-93730419ff8a/vn8m81wl","slug":"mourad-business","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-06-24T10:36:27.673Z","latestAt":"2026-06-24T10:36:27.673Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:78114275-25ca-4e06-b3b8-93730419ff8a:/unified/posts/?creator=78114275-25ca-4e06-b3b8-93730419ff8a&with=reposts":[{"data":[{"id":"01a11197-0847-7780-858f-da1bead961a4","title":null,"body":"

New Framer component 📁Folder Projects: an animated portfolio folder with 4 project cards.Hover a tab and the project slides out. Click and you're on the case study.✦ Arabic-first, RTL and LTR✦ Custom fonts and color variables✦ Responsive and accessible

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New Framer component "},{"type":"emoji","attrs":{"name":"file_folder","emoji":"📁"}},{"type":"text","text":"Folder Projects","marks":[{"type":"bold"}]},{"type":"text","text":": an animated portfolio folder with 4 project cards.Hover a tab and the project slides out. Click and you're on the case study.✦ Arabic-first, RTL and LTR✦ Custom fonts and color variables✦ Responsive and accessible"}]}]},"author":{"framerUserId":"78114275-25ca-4e06-b3b8-93730419ff8a","name":"Mourad Mazouz","slug":"mourad-business","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/78114275-25ca-4e06-b3b8-93730419ff8a/vn8m81wl","followed":false,"followsYou":false},"media":[],"resources":[{"id":"keEuLhWzVz5AIovzKAKe","resolved":true,"title":"Folder Showcase – Ar","body":"$51","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Showcase your work like real files in a folder.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Folder Projects is an interactive portfolio component for Framer. On hover, the folder flap tilts open and a project card rises out with an image, a title, a description and a call to action. Each of the 4 tabs is its own project, and hovering a tab switches the card instantly."}]},{"type":"paragraph","content":[{"type":"text","text":"It is designed "},{"type":"text","text":"Arabic-first","marks":[{"type":"bold"}]},{"type":"text","text":", with native RTL layout, and switches to LTR in one click. It fits Arabic, English and bilingual websites."}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"4 projects, each with its own image, title, description, button text, link and tab color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The whole card is clickable and opens the project, with an optional new tab"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth hover animation: the flap tilts, the inner folder rises, the card slides out"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native RTL / LTR switch, where tabs, notch, label and arrow all mirror correctly"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom fonts for title, description, button and label, with Arabic fonts like IBM Plex Sans Arabic, Cairo, Tajawal, Almarai and Noto Kufi"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Every color is a control and can be bound to your Framer color styles: background, folder front, inner folder, back panel, paper and card"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Option for the inner folder to take the active tab's color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive on desktop, tablet and mobile, with tap support on touch devices"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessible: semantic HTML, keyboard navigation, Escape to close, focus rings and alt text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas preview mode to edit any project's open card directly"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-render safe for the canvas and exports, and respects reduced motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight, with no extra dependencies"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for:","marks":[{"type":"bold"}]},{"type":"text","text":" portfolios, design agencies, architecture studios, case studies, creative showcases and Arabic or Gulf/MENA websites."}]}]},"introduction":"An animated portfolio folder with","slug":"folder-showcase-ar","author":{"framerUserId":"78114275-25ca-4e06-b3b8-93730419ff8a","name":"Mourad Mazouz","slug":"mourad-business","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/78114275-25ca-4e06-b3b8-93730419ff8a/vn8m81wl","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/78114275-25ca-4e06-b3b8-93730419ff8a/01a11196-70e4-71ac-880b-3ca0a47dcdef.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-06T14:21:11.108Z","updatedAt":"2026-10-06T14:29:06.309Z","publishedAt":"2026-10-06T14:21:11.106Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Portfolio-Folders-yvvOZk.js@m1NIjpbjpqcBXN66yjUn","previewUrl":"https://technical-garlic-338302.framer.app","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"m1NIjpbjpqcBXN66yjUn","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-06T14:21:13.159Z","updatedAt":"2026-10-06T14:21:13.159Z"},{"id":"01a10c00-8286-769f-9bc9-e60dd0536926","title":null,"body":"

First flexible Arabic UI component! 🎉

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"First flexible Arabic UI component!","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"emoji","attrs":{"name":"tada","emoji":"🎉"}}]}]},"author":{"framerUserId":"78114275-25ca-4e06-b3b8-93730419ff8a","name":"Mourad Mazouz","slug":"mourad-business","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/78114275-25ca-4e06-b3b8-93730419ff8a/vn8m81wl","followed":false,"followsYou":false},"media":[],"resources":[{"id":"I5GNAJiHvTI7WMClunqs","resolved":true,"title":"UI Component Card","body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Here is a detailed description of the UI component card based on the image:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout & Structure","marks":[{"type":"bold"}]},{"type":"text","text":": A close-up view of a single UI component card with rounded corners."}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Top Section","marks":[{"type":"bold"}]},{"type":"text","text":": Features a dark, grainy vignette showing a texture of a laptop keyboard or a music production desk."}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bottom Section","marks":[{"type":"bold"}]},{"type":"text","text":": A solid charcoal-colored overlay panel that rounds into the vignette above."}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography","marks":[{"type":"bold"}]},{"type":"text","text":": Centered Arabic text inside the dark panel, featuring \"سهل وبسيط الاستخدام\" (larger and bold at the top) and \"خصصه بالكامل ليناسب احتياجاتك\" (smaller and lighter below)."}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Icons","marks":[{"type":"bold"}]},{"type":"text","text":": An arrow icon pointing up and to the right in the top-left corner of the dark panel, and a vertical slider icon in the top-right corner. All text and icons are in crisp white."}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lighting","marks":[{"type":"bold"}]},{"type":"text","text":": Dramatic lighting that accentuates the texture of the upper background."}]},{"type":"paragraph"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Would you like to adjust or format this description for a specific use case?"}]}]},"introduction":"Easy to use and fully customizable","slug":"ui-component-card","author":{"framerUserId":"78114275-25ca-4e06-b3b8-93730419ff8a","name":"Mourad Mazouz","slug":"mourad-business","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/78114275-25ca-4e06-b3b8-93730419ff8a/vn8m81wl","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/78114275-25ca-4e06-b3b8-93730419ff8a/01a10bfe-c703-73c8-add1-20b3371bb23d.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":2400,"height":1216}}],"post":null,"createdAt":"2026-10-05T12:18:41.780Z","updatedAt":"2026-10-05T15:56:56.075Z","publishedAt":"2026-10-05T12:18:41.774Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Folder-animation-PIROYS.js@E5vopncauRse4T9Y6zIC","previewUrl":"https://neat-functions-715801.framer.app","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"E5vopncauRse4T9Y6zIC","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-05T12:18:42.438Z","updatedAt":"2026-10-05T12:18:42.438Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L53"}]