COMPONENT TYPE: Section within Home Screen LOCATION: Home Tab - Below banner carousel
WIREFRAME LAYOUT
┌─────────────────────────────────────┐ │ │ │ Trending Now [See All]│ ← Section header │ │ 16sp bold + 14sp link │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ ┌──────┐ │ │ ┌──────┐ │ │ ┌──────┐ │ │ ┌──────┐ │ ← Horizontal scrollable │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ IMG │ │ │ │ IMG │ │ │ │ IMG │ │ │ │ IMG │ │ Card size: │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ 140w x 200h dp │ │ └──────┘ │ │ └──────┘ │ │ └──────┘ │ │ └──────┘ │ │ │ │ │ │ │ │ │ │ │ │ Samsung │ │ iPhone │ │ OnePlus │ │ Pixel │ ← Product name │ │ Galaxy │ │ 15 Pro │ │ 12 │ │ 8 Pro │ 14sp, bold │ │ S24 │ │ Max │ │ │ │ │ Max 2 lines │ │ │ │ │ │ │ │ │ │ │ ⭐ 4.5 │ │ ⭐ 4.7 │ │ ⭐ 4.4 │ │ ⭐ 4.6 │ ← Rating │ │ 127 rev │ │ 89 rev │ │ 156 rev │ │ 67 rev │ 12sp, gray │ │ │ │ │ │ │ │ │ │ │ ✓ Verified│ │ ✓ Verified│ │ ✓ Verified│ │ ✓ Verified│ ← Badge │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ 10sp, green │ │ │ ←───────── Scroll indicator ─────→ │ ← Fade/shadow on edges │ │ └─────────────────────────────────────┘
COMPONENT SPECIFICATIONS
Section Header
| Property | Value |
|---|---|
| Title | "Trending Now" — 16sp, bold, dark gray |
| Link | "See All" — 14sp, brand color, right-aligned |
| Padding | 16dp horizontal, 12dp vertical |
Product Card
| Property | Value |
|---|---|
| Width | 140dp |
| Height | 200dp |
| Corner radius | 12dp |
| Shadow | Elevation 2dp |
| Background | White |
| Margin between cards | 12dp |
| First card margin-left | 16dp |
| Last card margin-right | 16dp |
Card Content
| Property | Value |
|---|---|
| Image | 140x100dp, top, cover fit, rounded top corners |
| Product name | 14sp, bold, max 2 lines, ellipsis |
| Rating | Star icon (12dp) + "4.5" (12sp, bold) |
| Review count | "127 reviews" — 12sp, gray |
| Verified badge | "✓ Verified" — 10sp, green, optional |
| Padding inside card | 8dp |
Scroll Behavior
| Property | Value |
|---|---|
| Type | Horizontal scroll with momentum |
| Peek | Show partial next card to indicate scrollability |
| Edge | Optional fade gradient on right edge |
| Snap | Snap to card edges (optional) |
STATES
| State | Behaviour |
|---|---|
| Default | Cards displayed with content |
| Loading | Skeleton shimmer cards |
| Empty | Section hidden if no trending products |
| Error | "Couldn't load" with retry |
INTERACTIONS
| Trigger | Action |
|---|---|
| Tap card | Navigate to Product Detail (PR-001) |
| Tap "See All" | Navigate to full trending list |
| Swipe | Scroll horizontally through cards |
| Long press | Show quick preview (optional) |
PROMPT FOR DESIGNER "Design a trending products horizontal scroll section for home screen. Section header with 'Trending Now' title and 'See All' link. Cards show product image (top half), product name (max 2 lines), star rating with number, review count, and small 'Verified' badge. Cards have white background, subtle shadow, rounded corners. Horizontal scroll shows partial next card to indicate more content. Clean, modern e-commerce card style."