Umber Ecommerce Value Prop
An earthy, artisanal value proposition block for ecommerce and direct-to-consumer brands.
Features
- Eyebrow badge — Branded label above the heading
- 3 value cards — Large icon, heading, description, learn-more link
- Trust banner — 4 guarantee badges with icons and details
- Warm palette — Amber-800 text, cream backgrounds, stone accents
- Hover effects — Card shadow lift and icon scale
- Responsive — Single column mobile, 3-column desktop
- Dark mode — Full zinc-950 dark variant
Dependencies
@/components/vue-ui/card — Card, CardHeader, CardTitle, CardDescription, CardContent@/components/vue-ui/button — Button@/components/vue-ui/badge — Badge@/components/vue-ui/separator — Separatorlucide-vue-next — ShieldCheck, Truck, RefreshCw, Clock, Gift, Award, ArrowRight, Sparkles
Customization
- Value props: Edit the
valueProps array for your unique selling points
- Trust badges: Modify
trustBadges for your certifications and guarantees
- Colors: Swap amber/stone classes for your brand palette
- Icons: Replace Lucide icons with your preferred icon set
