Media Post Card

A media-first card component with overlay content, perfect for artist posts, live streams, and content feeds. Features proper flexbox layout with background media and gradient overlays.

Live Stream Card

@POSTY$345,451

Chris Stapleton

Live Tonight on OXGN

<MediaPostCard
  artist={{
    name: "Chris Stapleton",
    username: "POSTY", 
    avatar: "profile.jpg"
  }}
  title="Chris Stapleton"
  subtitle="Live Tonight on OXGN"
  media={{
    type: "image",
    url: "concert.jpg"
  }}
  badges={[
    { text: "$345,451", variant: "secondary" }
  ]}
/>

Concert Performance

@JELLYJUVENILE JUSTICE REFORM77 POSTS

Jelly Roll

Live from Nashville

<MediaPostCard
  artist={{
    name: "Jelly Roll",
    username: "JELLY",
    avatar: "profile.jpg"
  }}
  title="Jelly Roll" 
  subtitle="Live from Nashville"
  media={{
    type: "image",
    url: "stage.jpg"
  }}
  badges={[
    { text: "JUVENILE JUSTICE REFORM", variant: "secondary" },
    { text: "77 POSTS", variant: "primary" }
  ]}
/>

Video Content

@TAYLORNEW ALBUM

Behind the Scenes

Studio Session Recording

<MediaPostCard
  artist={{
    name: "Taylor Swift",
    username: "TAYLOR",
    avatar: "profile.jpg"
  }}
  title="Behind the Scenes"
  subtitle="Studio Session Recording"
  media={{
    type: "video",
    url: "session.mp4",
    thumbnail: "session-thumb.jpg"
  }}
  badges={[
    { text: "NEW ALBUM", variant: "success" }
  ]}
  isLiked={true}
/>

Grid Layout

@POSTY$125,890

Post Malone

Live from Austin

@BILLIEWORLD TOURSOLD OUT

Billie Eilish

World Tour 2024

@WEEKNDFINALE SHOW

The Weeknd

After Hours Tour

Props Reference

Prop	Type	Default	Description
artist	object	required	Artist info with name, username, avatar
title	string	required	Main title text
subtitle	string	undefined	Optional subtitle
media	object	required	Media object with type, url, thumbnail
badges	array	[]	Badge objects with text and variant
isLiked	boolean	false	Like state
isBookmarked	boolean	false	Bookmark state