Horizontal Card

Media on the left, content on the right — stacks to media-on-top below a configurable breakpoint.

cards
card
structural
media
row
responsive

Mira Odaka

Product design, six years.

Quick usage

usage

import { HorizontalCard } from "@pinky-ui/components";

<HorizontalCard
  media={<img src="/avatar.jpg" alt="" />}
  title="Mira Odaka"
  description="Product design, six years."
/>

Presets

Default

Row above sm, stacked below.

Wide media

More room for the image.

mediaWidth={"lg"}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell

npm install @pinky-ui/components

shell

pnpm add @pinky-ui/components

shell

yarn add @pinky-ui/components

shell — copies source into your project

npx pinky-ui add horizontal-card

Prefer to run the whole repository locally instead?

repository

git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

Prop	Type	Default	Description
media	ReactNode	—	Required.
title	ReactNode	—	Required.
description	ReactNode	—	Optional.
footer	ReactNode	—	Optional.
mediaWidth	"sm" \| "md" \| "lg"	"md"	Width of the media column once the layout is a row.
stackBelow	"sm" \| "md"	"sm"	Breakpoint below which media stacks on top of a full-width content block instead of sitting beside it.
radius	"md" \| "lg" \| "xl" \| "2xl"	"xl"	Corner radius from the shape scale.
padded	boolean	true	Inner content padding.
shadow	"neutral" \| "pink"	"neutral"	Shadow token pair.

Accessibility

Same focus-visible rule as Basic Card once onClick/href is present.

Reduced motion

No transform-based motion; the hover shadow is a colour/opacity change only.

When to use

Profile rows, search results, list items that need a thumbnail beside text

When not to use

Media that's the point of the card, not an accent — use Media Card