Playground

MediaCard

media

container

High-level card combining media (image/video) with positioned content

Flattens Surface + MediaFrame + Layer into a single ergonomic component

Two layouts: overlay (content on image) and stacked (content below image)

import { MediaCard } from "@everydayos/ui";

Usage

Product image card with bottom-left text overlay

Climate System

Air^ 1.0

Wellness

The quiet comfort of clean air

Why air quality matters for daily focus.

API

overlay

Default: none

nonetopFadebottomFadedarkVignettelightGlassbottomGlass

defaultpreferredrare

aspect

video4/33/25/41/116/921/9114/5519/253/42/34/543/5016/18herotall

radius

Default: sm

nonesmmdlgxl2xl

defaultpreferredrare

contentPosition

Default: bottom-left

centertop-lefttop-centertop-rightbottom-leftbottom-centerbottom-right

defaultpreferredrare

layout

Default: overlay

overlaystacked

defaultpreferred

tone

Default: muted

defaultmuteddark

Prop	Type	Default
`media`	`React.ReactNode`	—
`interactive`	`boolean`	`false`
`className`	`string`	—
`children`	`React.ReactNode`	—

Examples

Wide Hero Card

Cinematic wide card with overlay content and CTA

A beautiful take on home climate

One seamless solution for heating, cooling, and purification.

Stacked Card

Image on top, content below — for blog posts and listings

<MediaCard
  layout="stacked"
  aspect="3/2"
  tone="muted"
  interactive
  className="w-full"
  media={<Image src="/blog.jpg" fill className="object-cover" alt="" />}
>
  <Stack spacing="xs">
    <Text size="s" className="opacity-40">Category</Text>
    <Heading as="h3" size="s">Article title goes here</Heading>
    <Text size="s" variant="muted">Brief description of the article content.</Text>
  </Stack>
</MediaCard>

Interactive Feature Card

Clickable card with hover lift for feature grids

<MediaCard
  aspect="4/3"
  overlay="bottomFade"
  contentPosition="bottom-left"
  interactive
  className="w-full"
  media={<Image src="/feature.jpg" fill className="object-cover" alt="" />}
>
  <Stack spacing="xs">
    <Text size="s" className="text-white/40 uppercase tracking-wider">Step 1</Text>
    <Heading as="h4" size="s" className="text-white">Explore</Heading>
  </Stack>
</MediaCard>

Composition

Pairs well with

Stack

Heading

Text

Button

GlassPill

Badge

Grid

When to avoid

Need complex multi-layer composition — use MediaFrame + Layer directly
No media — use Card or Surface instead
Need custom overlay positioning — use MediaFrame + Layer

Patterns

Feature Grid

Grid

MediaCard

Stack

Heading

Text

Grid of media cards for feature showcases or product categories

<Section>
  <Stack spacing="lg">
    <Heading as="h2" size="xl">Features</Heading>
    <Grid cols={3} gap="md">
      <MediaCard
        aspect="4/3"
        overlay="bottomFade"
        contentPosition="bottom-left"
        interactive
        media={<Image src="/feature-1.jpg" fill className="object-cover" alt="" />}
      >
        <Heading as="h3" size="s" className="text-white">Heating</Heading>
      </MediaCard>
      <MediaCard
        aspect="4/3"
        overlay="bottomFade"
        contentPosition="bottom-left"
        interactive
        media={<Image src="/feature-2.jpg" fill className="object-cover" alt="" />}
      >
        <Heading as="h3" size="s" className="text-white">Cooling</Heading>
      </MediaCard>
      <MediaCard
        aspect="4/3"
        overlay="bottomFade"
        contentPosition="bottom-left"
        interactive
        media={<Image src="/feature-3.jpg" fill className="object-cover" alt="" />}
      >
        <Heading as="h3" size="s" className="text-white">Purification</Heading>
      </MediaCard>
    </Grid>
  </Stack>
</Section>

Blog / Article Listing

Grid

MediaCard

Stack

Heading

Text

Grid of stacked media cards for content listings

<Grid cols={3} gap="md">
  <MediaCard layout="stacked" aspect="3/2" tone="muted" interactive
    media={<Image src="/blog-1.jpg" fill className="object-cover" alt="" />}>
    <Stack spacing="xs">
      <Text size="s" variant="muted">Design</Text>
      <Heading as="h3" size="s">Article Title</Heading>
    </Stack>
  </MediaCard>
  <MediaCard layout="stacked" aspect="3/2" tone="muted" interactive
    media={<Image src="/blog-2.jpg" fill className="object-cover" alt="" />}>
    <Stack spacing="xs">
      <Text size="s" variant="muted">Engineering</Text>
      <Heading as="h3" size="s">Another Article</Heading>
    </Stack>
  </MediaCard>
</Grid>

Video Hero Card

Section

MediaCard

Stack

Heading

Text

Button

Full-width hero with autoplay video background and CTA

<Section spacing="none">
  <MediaCard
    overlay="darkVignette"
    contentPosition="bottom-left"
    radius="sm"
    className="h-[80vh]"
    media={
      <video autoPlay muted loop playsInline
        className="absolute inset-0 w-full h-full object-cover"
        src="/hero.mp4"
      />
    }
  >
    <Stack spacing="md" className="max-w-xl">
      <Heading as="h1" size="display" className="text-white">
        Air 1
      </Heading>
      <Text size="l" className="text-white/80">
        Designed to belong in your home.
      </Text>
      <Inline spacing="md">
        <Button size="xl">Get Started</Button>
        <Button size="xl" variant="outline" className="text-white border-white/30">
          Learn More
        </Button>
      </Inline>
    </Stack>
  </MediaCard>
</Section>