🎨 Banner Components
Promotional banners, hero sections, and announcement displays
🎭 Component Demonstrations
Hero Banners
✨ Sparkle & Shine Collection
Discover the latest trends in rhinestones and accessories
💎 Premium Collection
Hand-selected crystals and rhinestones for your next project
🔥 Hot Deals
Up to 50% off on selected items. Limited time offer!
Promotional Banners
🎉 Free Shipping on Orders Over $50
Shop now and save on delivery. Limited time offer!
New Arrivals Every Week
Check back regularly for the latest additions to our catalog
✨ Your order has been successfully placed!
Category Banners
✨ Rhinestones
Premium quality crystals
💎 Accessories
Chains, findings & tools
🎨 Craft Kits
Complete project bundles
Announcement Banners
🎁 Use code SPARKLE20 for 20% off your first order
✨ Holiday Sale - Up to 60% Off!
Ends midnight Sunday. Shop while stocks last!
📝 Usage Examples
<div class="bg-gradient-to-r from-yellow-400 to-orange-500 rounded-lg p-6">
<h4 class="text-fluid-2xl font-bold text-white">Promo Title</h4>
<p class="text-yellow-100">Promo description</p>
<button class="px-6 py-3 bg-white text-orange-600 rounded-lg">Action</button>
</div>
⚡ Performance & Accessibility
Banner Best Practices
- 🎯 Use semantic HTML with proper heading hierarchy and ARIA labels
- ⚡ Optimize banner images with responsive srcset and lazy loading
- 📱 Ensure touch-friendly CTAs with minimum 44px tap targets
- 🎨 Maintain WCAG AA contrast ratios for text on backgrounds