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:T716,

A team grid for Framer whose bios open in place. Press a face, or tab to it and press Enter, and that person's bio, a detail line and up to two links open in a panel under their row, with a pointer at their photo. Press it again, Close or Escape to shut it, and focus goes back to the card.

The panel always lands under the right row. Columns follow the component's own width at three tiers you set, placed by CSS, so the page's HTML and the first paint agree and nothing jumps on load. Every name, role and bio is in the HTML, open or not.

Photos that were never shot to match still line up. Every photo shares one shape, portrait, square or tall, and each person has their own face position and face zoom, so a waist-up shot and a close headshot sit side by side at the same size. Anyone without a photo gets a monogram.

Turn on Group by team for a heading per team, in the order you list them, and add a hiring card at the end. Links can go to a profile, an email address or a page of your own site: page links resolve like any Framer link, and mail links stay in the tab.

Photos in colour, greyscale, or greyscale until hovered or opened; zoom on hover, rounding, gaps, fonts and every colour are controls. Reduced motion is honoured. The faces in the demo and the gallery are Unsplash photographs used as placeholders: the component ships none.

After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it.

Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev

5a:[["$","$L5d",null,{"post":{"id":"01a0d31f-c9d1-7067-aa0f-3c647d99326f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2a3b7013-68f9-4044-aeeb-2e017c0907e5","name":"Majed Monem","slug":"majed-monem","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2a3b7013-68f9-4044-aeeb-2e017c0907e5/rz7b98pc","followed":false,"followsYou":false},"media":[],"resources":[{"id":"16gnbl5MBdckDU9hA5dt","resolved":true,"title":"Roll Call","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A team grid for Framer whose bios open in place. Press a face, or tab to it and press Enter, and that person's bio, a detail line and up to two links open in a panel under their row, with a pointer at their photo. Press it again, Close or Escape to shut it, and focus goes back to the card."}]},{"type":"paragraph","content":[{"type":"text","text":"The panel always lands under the right row. Columns follow the component's own width at three tiers you set, placed by CSS, so the page's HTML and the first paint agree and nothing jumps on load. Every name, role and bio is in the HTML, open or not."}]},{"type":"paragraph","content":[{"type":"text","text":"Photos that were never shot to match still line up. Every photo shares one shape, portrait, square or tall, and each person has their own face position and face zoom, so a waist-up shot and a close headshot sit side by side at the same size. Anyone without a photo gets a monogram."}]},{"type":"paragraph","content":[{"type":"text","text":"Turn on Group by team for a heading per team, in the order you list them, and add a hiring card at the end. Links can go to a profile, an email address or a page of your own site: page links resolve like any Framer link, and mail links stay in the tab."}]},{"type":"paragraph","content":[{"type":"text","text":"Photos in colour, greyscale, or greyscale until hovered or opened; zoom on hover, rounding, gaps, fonts and every colour are controls. Reduced motion is honoured. The faces in the demo and the gallery are Unsplash photographs used as placeholders: the component ships none."}]},{"type":"paragraph","content":[{"type":"text","text":"After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it."}]},{"type":"paragraph","content":[{"type":"text","text":"Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev"}]}]},"introduction":"Team grid, bios open in place","slug":"roll-call","author":{"framerUserId":"2a3b7013-68f9-4044-aeeb-2e017c0907e5","name":"Majed Monem","slug":"majed-monem","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2a3b7013-68f9-4044-aeeb-2e017c0907e5/rz7b98pc","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2a3b7013-68f9-4044-aeeb-2e017c0907e5/01a0d31f-3073-77cf-beb1-7d9cfcaf0222.jpg","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-24T11:14:30.424Z","updatedAt":"2026-09-24T11:14:30.424Z","publishedAt":"2026-09-24T11:14:30.420Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://safe-book-192450.framer.app/roll-call","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_EMWdHCkvQ7QIs1xlcoGnpxAnY7oDrJW3LIPTK3PPx1p","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"msfFH3WCtKUKPDQeMcn0","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-24T11:14:30.994Z","updatedAt":"2026-09-24T11:14:30.994Z","reported":false}}],"$L5f"]

Suggested for you