Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Card

Horizontal Card Layout Skeleton for React

A horizontal card placeholder with a square image beside a title, two lines of text and two tags.

Framework
UI library

A loading card laid out in a row: a square image block on the start side, and a column with a title, two lines of text and two tags pushed to the bottom. The blocks are Skeleton elements in a flex row.

Use it for search results, news lists or playlists, where a row shows more per screen than a stacked card.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the card split?

flex w-full max-w-lg gap-4 rounded-md border p-4. A size-24 shrink-0 image sits beside a flex-1 column with gap-2.

What is in the text column?

An h-5 w-3/4 title, then h-4 w-full and h-4 w-5/6. The shorter line reads as the end of the description.

Where do the two tags sit?

mt-auto flex items-center gap-2 pushes them to the bottom of the column. The bars are h-6 w-16 and h-6 w-20.

Why is the image shrink-0?

shrink-0 keeps the size-24 block square while the text column is flex-1. The image keeps the style's default radius.

How do I match the real horizontal card?

Keep the image at size-24 and the column at flex-1 with gap-2. Match h-5 to the title and h-6 to the tags you render.

Should this card skeleton be announced?

Set aria-hidden on the bars when a status already says the card is loading. The pulse is decorative.

All 30 skeleton examples