Block Reference

Complete reference for all 22 SkunkPages blocks with examples and customization options.

Hero Sections

Hero Simple

A clean hero section with headline, subheading, and CTA button.

Best for: Landing pages, product pages

Features:

• Customizable headline and subheading
• CTA button with link
• Background color or gradient
• Optional background image

Hero With Image

Hero section with content on one side and image on the other.

Best for: Product showcases, service pages

Features:

• Left/right layout options
• Image upload or URL
• Multiple CTA buttons
• Responsive stacking on mobile

Hero Split

Full-width hero with split layout design.

Best for: Bold landing pages, campaigns

Features:

• Dual-tone backgrounds
• Large typography
• Multiple CTAs
• Icon support

Feature Sections

Features Grid

Display features in a responsive grid layout.

Best for: Product features, benefits, services

Features:

• 2, 3, or 4 column layouts
• Icon or image for each feature
• Customizable spacing
• Hover effects

Features List

Vertical list of features with icons.

Best for: Feature comparisons, detailed lists

Features:

• Checkmark or custom icons
• Alternating layouts
• Expandable descriptions
• Icon position control

Features Comparison

Side-by-side feature comparison table.

Best for: Plan comparisons, vs. competitors

Features:

• Unlimited comparison columns
• Checkmarks and X marks
• Highlighted recommended option
• Mobile-responsive

Testimonial Blocks

Testimonial Single

Single testimonial with quote and author.

Best for: Homepage quotes, key testimonials

Features:

• Author photo
• Company and role
• Star ratings
• Quote styling options

Testimonials Grid

Multiple testimonials in grid layout.

Best for: Social proof sections

Features:

• 2 or 3 column layout
• Uniform card styling
• Author details
• Rating display

Testimonials Carousel

Rotating testimonial slider.

Best for: Multiple testimonials in limited space

Features:

• Auto-play options
• Navigation arrows
• Dot indicators
• Transition effects

Pricing Blocks

Pricing Table

Professional pricing table with multiple plans.

Best for: SaaS pricing, subscription plans

Features:

• Unlimited plans
• Feature lists
• Highlighted plan
• Monthly/yearly toggle

Pricing Comparison

Detailed pricing comparison with features.

Best for: Complex pricing structures

Features:

• Feature-by-feature comparison
• Checkmarks for included features
• Tooltip explanations
• Mobile-responsive

CTA Blocks

CTA Simple

Clean call-to-action with button.

Best for: Page endings, key actions

Features:

• Headline and description
• Primary CTA button
• Background options
• Border styling

CTA Banner

Full-width banner CTA.

Best for: Attention-grabbing CTAs

Features:

• Large typography
• Gradient backgrounds
• Multiple buttons
• Icon support

CTA Box

Boxed CTA with border and shadow.

Best for: Inline CTAs, form submissions

Features:

• Card-style design
• Shadow effects
• Hover animations
• Icon/image support

Form Blocks

Contact Form

Simple contact form with validation.

Best for: Contact pages, inquiries

Features:

• Name, email, message fields
• Custom field labels
• Success message
• Form styling options

Newsletter Signup

Email capture form for newsletters.

Best for: Newsletter signups, lead generation

Features:

• Email validation
• Integration ready
• Inline or stacked layout
• GDPR checkbox

Content Blocks

Content With Image

Text content with accompanying image.

Best for: About sections, explanations

Features:

• Left/right image placement
• Rich text editor
• Button support
• Image zoom on hover

Stats Counter

Animated statistics counter.

Best for: Achievements, metrics, social proof

Features:

• Count-up animation
• Custom labels
• Icon support
• Grid layout

Logo Grid

Grid of client or partner logos.

Best for: Social proof, partners, clients

Features:

• Responsive grid
• Grayscale filter option
• Hover effects
• Link support

FAQ Accordion

Expandable FAQ section.

Best for: FAQ pages, help sections

Features:

• Unlimited questions
• Smooth animations
• Search functionality
• Default open state

Timeline

Visual timeline with milestones.

Best for: Process flows, history, steps

Features:

• Vertical/horizontal layouts
• Icons for each step
• Connecting lines
• Hover effects

Media Blocks

Video Section

Video embed with optional overlay.

Best for: Product demos, testimonials

Features:

• YouTube/Vimeo support
• Custom thumbnail
• Play button overlay
• Autoplay options

Image Gallery

Responsive image gallery with lightbox.

Best for: Portfolios, showcases

Features:

• Grid or masonry layout
• Lightbox popup
• Captions
• Lazy loading

Divider

Stylish section dividers.

Best for: Visual separation between sections

Features:

• Multiple styles
• Custom colors
• Width control
• Icon center option

Customization Options

All blocks share common customization settings:

Spacing

• Top/bottom padding
• Left/right padding
• Margin control

Colors

• Background color
• Text color
• Button colors
• Accent colors

Typography

• Font family
• Font size
• Font weight
• Line height
• Letter spacing

Advanced

• Custom CSS classes
• Anchor ID
• Animation on scroll
• Visibility controls

Next Steps

• Customization Guide - Advanced styling
• Examples - Real-world examples
• Troubleshooting - Common issues