Content Blocks
Versatile content layouts for building engaging e-commerce pages
🎨 Content Block Demonstrations
Versatile content layouts for building engaging e-commerce pages
Hero Sections
Eye-catching hero sections for homepage and landing pages
Full Width Hero
Discover Premium Sparkles
Transform your projects with our exclusive collection
<div class="sparkles-hero-section relative overflow-hidden">
<div class="sparkles-hero-parallax-bg absolute inset-0 z-0">
<img src="hero-bg.jpg" alt="Hero Background" class="w-full h-full object-cover">
</div>
<div class="relative z-10 max-w-7xl mx-auto px-4 py-24 text-center">
<h1 class="sparkles-hero-title text-white mb-4" x-scroll-animate="fade-up">
Hero Title
</h1>
<p class="sparkles-hero-subtitle text-white/90 mb-8" x-scroll-animate="fade-up" x-scroll-delay="100">
Hero subtitle text
</p>
<button class="sparkles-btn sparkles-btn-primary sparkles-btn-lg">
Call to Action
</button>
</div>
</div>Split Hero Section
Crafted with Excellence
Experience the perfect blend of quality and elegance in every piece. Our collection is designed to bring brilliance to your creations.
<div class="sparkles-content-block sparkles-content-block-split">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-0">
<div class="sparkles-content-block-body p-12 flex items-center">
<div>
<h2 class="sparkles-content-block-title mb-4" x-scroll-animate="fade-right">
Title Here
</h2>
<p class="text-gray-600 mb-6">Description text</p>
<button class="sparkles-btn sparkles-btn-primary">CTA Button</button>
</div>
</div>
<div class="sparkles-hero-image relative overflow-hidden">
<img src="image.jpg" alt="Hero Image" class="w-full h-full object-cover">
</div>
</div>
</div>Feature Blocks
Highlight key features and benefits with engaging visual elements
Icon Feature Cards
Fast Delivery
Get your orders delivered within 24-48 hours with our express shipping service.
Secure Payment
Your transactions are protected with industry-leading encryption technology.
Quality Guarantee
100% satisfaction guaranteed or your money back within 30 days.
<div class="sparkles-feature-card" x-scroll-animate="fade-up">
<div class="sparkles-feature-icon">
<!-- SVG Icon -->
</div>
<h3 class="sparkles-feature-title">Feature Title</h3>
<p class="sparkles-feature-description">
Feature description text here.
</p>
</div>Feature Content Blocks
Premium Materials
Crafted from the finest sources
Our products are made from carefully selected materials that ensure durability and beauty. Each piece undergoes rigorous quality control.
<div class="sparkles-content-block" x-scroll-animate="fade-up">
<div class="sparkles-content-block-header">
<h3 class="sparkles-content-block-title">Title</h3>
<p class="sparkles-content-block-subtitle">Subtitle</p>
</div>
<div class="sparkles-content-block-body">
<p>Content text</p>
</div>
<div class="sparkles-content-block-footer">
<button class="sparkles-btn sparkles-btn-primary">CTA</button>
</div>
</div>Text & Image Layouts
Flexible layouts combining text content with imagery
Image Left Layout
Exceptional Craftsmanship
Every piece in our collection is handcrafted by skilled artisans who take pride in their work. The attention to detail ensures that each product meets our exacting standards.
- Hand-selected materials
- Expert craftsmanship
- Quality guaranteed
Alternating Image Layout
Design Excellence
Our design team creates timeless pieces that blend contemporary aesthetics with classic elegance.
Unmatched Quality
Each product undergoes rigorous testing to ensure it meets our high standards for durability and beauty.
Testimonials
Customer testimonials and reviews in various layouts
Testimonial Cards Grid
<div class="sparkles-testimonial-card" x-scroll-animate="fade-up">
<div class="sparkles-testimonial-quote">
"Customer testimonial text here..."
</div>
<div class="sparkles-testimonial-author">
<img src="avatar.jpg" alt="Customer" class="sparkles-testimonial-avatar">
<div>
<div class="sparkles-testimonial-name">Customer Name</div>
<div class="sparkles-testimonial-role">Role/Title</div>
</div>
</div>
</div>Call to Action Blocks
Compelling CTA sections to drive conversions
Simple CTA Block
Ready to Get Started?
Join thousands of satisfied customers who have transformed their projects with our premium collection.
Gradient CTA Block
Limited Time Offer
Get 20% off your first order when you sign up for our newsletter
Stats & Numbers
Display impressive numbers and statistics
Statistics Grid
<div class="sparkles-stat-card" x-scroll-animate="fade-up">
<div class="text-fluid-4xl font-bold text-primary mb-2"
x-data="{ count: 0 }"
x-init="setTimeout(() => { animateCounter($el, 0, 10000) }, 500)">
0
</div>
<div class="text-gray-600">Label</div>
</div>Progress Indicators
Process Steps
Show multi-step processes and workflows
Horizontal Process Steps
Browse
Explore our collection
Select
Choose your items
Checkout
Secure payment
Receive
Enjoy your order
<div class="sparkles-multi-step-horizontal">
<div class="sparkles-step sparkles-step-completed">
<div class="sparkles-step-indicator">1</div>
<div class="sparkles-step-content">
<h4 class="sparkles-step-title">Step Title</h4>
<p class="sparkles-step-description">Description</p>
</div>
</div>
<div class="sparkles-step-connector sparkles-step-connector-completed"></div>
<!-- More steps... -->
</div>Timeline Layout
Order Placed
Your order has been received
2 hours ago
Processing
We're preparing your items
1 hour ago
Shipping
On the way to you
Expected tomorrow
Content Variations
Different styles and layouts for content blocks
Overlapping Layout
Special Offer
Get exclusive access to our premium collection with member pricing.
Pattern Background Block
Crafted with Love
Every piece tells a story of dedication and artistry
📝 Usage Examples
⚡ Performance & Accessibility
Content Block Best Practices
- 🎯 Semantic HTML structure for better SEO and accessibility
- ⚡ Optimized scroll animations with reduced motion support
- ♿ Proper heading hierarchy and ARIA labels
- 📱 Responsive layouts tested across all device sizes