Browse components

Horizontal Card

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

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/horizontal-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
imagestringProduct image URL
imageAltstringProduct image alt text
labelstringSmall category label
titlestringProduct name
descriptionstringProduct description
pricestringPrice label
actionLabelstringAction button text
hrefstringAction URL
classNamestringStyles for the outer card

More Cards Components

Compact Card preview

Compact Card

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

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.