Browse components

Compact Card

Editorial card with a full-bleed image, story metadata, and optional link wrapper.

Add to your project

1Connect the Uniquel MCP

Connect Uniquel to your coding agent before using the component ID.

Connect MCP

2Copy the component ID

MCP ID
component:cards/compact-card

Works with your AI tools

ClaudeClaude*
CodexCodex*
LovableLovable
Base44Base44
Figma MakeFigma Make
ReplitReplit*
CursorCursor*
v0v0

* Compatible with most projects that use the default React/Next.js framework.

Built With

ReactTailwind CSS

Props

PropTypeDescription
imagestringImage URL
imageAltstringImage alt text
eyebrowstringSmall category label
titlestringCard headline
descriptionstringSupporting copy
authorstringAuthor name
readTimestringReading-time label
hrefstringOptional link wrapper URL
classNamestringStyles for the outer card

More Cards Components

Horizontal Card preview

Horizontal Card

Side-by-side card with image, title, description, and a clear action.

Metric Card preview

Metric Card

Compact dashboard metric with a trend badge and inline sparkline.

Card Stack preview

Card Stack

Layered testimonial cards that cycle forward with a spring stack. Click the front card to advance.