56:I[473921,["/creators-assets/_next/static/immutable/chunks/1hsplt7jfjgnh.js","/creators-assets/_next/static/immutable/chunks/0ct7__d3eqq0r.js","/creators-assets/_next/static/immutable/chunks/0c-r9a3oxph1w.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/1co9epfn9jp6v.js","/creators-assets/_next/static/immutable/chunks/1zalsqf-ioaic.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/2e-sz6cfsc9_9.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/3or5zvywp1ubp.js","/creators-assets/_next/static/immutable/chunks/1k3rwcufrnywl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/0lx6ikbaymow8.js","/creators-assets/_next/static/immutable/chunks/15z5hu5cixks0.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/0ina8hhu8zfh2.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/1mpx4d_3k5had.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/3_ujmu63m88vf.js","/creators-assets/_next/static/immutable/chunks/25l6djez1lvts.js","/creators-assets/_next/static/immutable/chunks/3pe6luvwzbwnz.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3un-l23eued0s.js","/creators-assets/_next/static/immutable/chunks/3nzo9vld-4e3c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/31lxg3j13mof7.js"],"PostDetailCard"] 58:I[885856,["/creators-assets/_next/static/immutable/chunks/1hsplt7jfjgnh.js","/creators-assets/_next/static/immutable/chunks/0ct7__d3eqq0r.js","/creators-assets/_next/static/immutable/chunks/0c-r9a3oxph1w.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/1co9epfn9jp6v.js","/creators-assets/_next/static/immutable/chunks/1zalsqf-ioaic.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/2e-sz6cfsc9_9.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/3or5zvywp1ubp.js","/creators-assets/_next/static/immutable/chunks/1k3rwcufrnywl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/0lx6ikbaymow8.js","/creators-assets/_next/static/immutable/chunks/15z5hu5cixks0.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/0ina8hhu8zfh2.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/1mpx4d_3k5had.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/3_ujmu63m88vf.js","/creators-assets/_next/static/immutable/chunks/25l6djez1lvts.js","/creators-assets/_next/static/immutable/chunks/3pe6luvwzbwnz.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3un-l23eued0s.js","/creators-assets/_next/static/immutable/chunks/3nzo9vld-4e3c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/31lxg3j13mof7.js"],"CommentSection"] 57:T696,

Component Overview

A clean and flexible social-style card component designed for showcasing content such as reviews, posts, or product highlights.It supports multiple variants including compact, detailed, minimal, highlighted, and skeleton loading states, making it easy to adapt to different use cases.

Customizable Properties

Easily customize the component to match your design:

Multiple layout variants (Compact, Detailed, Minimal, Highlighted, Empty)
Adjustable typography (Title, Body, Meta)
Custom colors (Background, Text, Muted, Accent)
Optional elements (Avatar, Rating, Actions, Timestamp)
Layout controls (Padding, Spacing, Border radius)
Gradient background and hover effects
Skeleton loading state for placeholders

Why Choose This Component

This component is designed with both usability and performance in mind.It provides a balanced level of customization without overwhelming the user, ensuring a clean property panel and smooth editing experience.

Optimized for Framer Marketplace guidelines
Lightweight and easy to use
Responsive and visually consistent
Built-in states for real-world scenarios (loading, interaction)

Need Help?

If you have any questions or need assistance customizing the component, feel free to reach out.We’re happy to help you get the most out of it.

More Resources

Stay tuned for more components and updates.Additional resources, improvements, and new variations will be continuously added.

53:[["$","$L56",null,{"post":{"id":"019dbb27-f166-76dc-92b6-f80effc3dfa2","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"9f960dbe-12d3-4104-85ef-db1e935183ea","name":"Leah Cho","slug":"leah-cho","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"eQhQcmrh0ygVsmH7CH0L","resolved":true,"title":"Modern Social Card U","body":"$57","bodyJson":null,"introduction":"Modern social card UI for reviews, posts","slug":"modern-social-card-u","author":{"framerUserId":"9f960dbe-12d3-4104-85ef-db1e935183ea","name":"Leah Cho","slug":"leah-cho","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/eQhQcmrh0ygVsmH7CH0L/modern-social-card-u-xFdz8zlkm7fiVKqv84I4Wto7LIATrC","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-15T04:43:51.987Z","updatedAt":"2026-04-24T03:24:44.887Z","publishedAt":"2026-04-23T16:24:10.342Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/SocialCard-hnuklt.js@WDksT8fq6M26FOW0n0iR","previewUrl":"https://past-pomegranate-321467.framer.app","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"WDksT8fq6M26FOW0n0iR","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-04-23T16:24:10.342Z","updatedAt":"2026-04-23T16:24:10.342Z","reported":false,"type":"post"}}],["$","$L58",null,{"target":{"kind":"post","postId":"019dbb27-f166-76dc-92b6-f80effc3dfa2"},"postId":"019dbb27-f166-76dc-92b6-f80effc3dfa2","postAuthor":"$53:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you