5d:I[333483,["/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/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T8b8,

What it does

PortfolioCard gives your Framer site a polished portfolio-style card for showcasing projects, case studies, campaigns, products, or creative work. It displays a full-bleed image with a bottom gradient overlay, project title, category text, optional tag, and an animated “View project” pill that appears on hover or keyboard focus.

Features

Responsive image support with lazy loading, srcSet, and object-cover display. Full-card optional link with new-tab support. Hover and focus states scale the image, deepen the overlay, lift the caption, and reveal a centered view pill. Optional tag badge can show a year, industry, service, or project type. Editable title, category, tag text, and view pill label. SEO and accessibility-friendly title tag control lets you choose H2, H3, H4, P, or Div. Keyboard focus triggers the same active state as hover, with a visible focus outline. Reduced-motion support disables animations for users who prefer less motion. Static rendering support avoids animation issues in Framer’s static context. Includes token-safe color parsing for connected Framer color styles. Full styling controls for title font, category font, tag font, pill font, title color, muted category color, tag background, tag text, pill background, pill text, overlay color, fallback background, radius, content padding, and shadow.

How to use

Add PortfolioCard to your Framer canvas and choose a responsive image. Set the project title, category, and optional tag. Add a link if the card should open a project page or case study. Customize the “View project” pill, title heading level, fonts, colors, overlay, border radius, padding, and shadow. Place multiple cards in a grid or stack to create a portfolio, work archive, case study section, or agency project gallery.

Ideal for

Agency portfolios, design studio websites, freelancer portfolios, case study grids, creative directories, product showcases, startup project pages, architecture portfolios, branding case studies, web design galleries, photography projects, campaign archives, and any Framer site that needs a premium interactive project preview card.

5a:[["$","$L5d",null,{"post":{"id":"019e98a7-4867-77b4-8d0d-a4f62c1805ed","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2aa1c8b3-7537-46a8-a900-110c4e9d5ea9","name":"Spyridon Merkouris","slug":"spyridon-merkouris","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2109501/avatar-cFtiy7MwEgg752DMyUE5kNTlTumFuR.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"nilVVmP7K6S7aMvvM6u3","resolved":true,"title":"PortfolioCard","body":"$5e","bodyJson":null,"introduction":"Interactive portfolio project card","slug":"portfoliocard","author":{"framerUserId":"2aa1c8b3-7537-46a8-a900-110c4e9d5ea9","name":"Spyridon Merkouris","slug":"spyridon-merkouris","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2109501/avatar-cFtiy7MwEgg752DMyUE5kNTlTumFuR.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/nilVVmP7K6S7aMvvM6u3/portfoliocard-h5F9UzXCILJ4KjPaY9hzEuFhgsBsxB","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-01T08:24:13.340Z","updatedAt":"2026-06-05T16:25:57.583Z","publishedAt":"2026-06-05T16:39:20.423Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/Projectcard-IslrzO.js@fYFQffCPNMqbpzOyJJOK","previewUrl":"https://flowing-audience-115502.framer.app","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"fYFQffCPNMqbpzOyJJOK","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":93,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-05T16:39:20.423Z","updatedAt":"2026-06-05T16:39:20.423Z","reported":false}}],"$L5f"]

Suggested for you