Skip to main content

Booking Block

Display available booking types (time blocks) for customers to browse and book.

Data Block

Preview​

Grid Layout

Booking types in a responsive grid

Book a Session

Fundamentals Class

Fundamentals Class

Build your foundation with basic techniques and proper form.

Book Now
Advanced Sparring

Advanced Sparring

Take your skills to the next level with controlled sparring.

Book Now
Private Training

Private Training

One-on-one coaching customized to your goals.

Book Now
Kids Movement Class

Kids Movement Class

Fun classes for kids ages 6-12.

Book Now

List Layout

Compact list view

Available Classes

Fundamentals Class

Fundamentals Class

Build your foundation with basic techniques and proper form.

Book
Advanced Sparring

Advanced Sparring

Take your skills to the next level with controlled sparring.

Book
Private Training

Private Training

One-on-one coaching customized to your goals.

Book
Kids Movement Class

Kids Movement Class

Fun classes for kids ages 6-12.

Book

Selected Bookings

Only showing specific booking types

Featured Classes

Fundamentals Class

Fundamentals Class

Build your foundation with basic techniques and proper form.

Book Now
Private Training

Private Training

One-on-one coaching customized to your goals.

Book Now

Properties​

PropertyTypeDefaultDescription
titlestring-Optional heading above booking list
source'all' | 'selected''all'Show all booking types or selected ones
selectedTimeBlockIdsstring[]-IDs of booking types to show
layout'grid' | 'list''grid'Display layout style

Data Dependencies​

This block pulls booking type data from your space:

interface TimeBlock {
  id: string
  title: string
  description: string
  slug: string | null
  coverImageSrc: string | null
  shortDescription: string | null
}

Usage​

// Grid layout showing all booking types
<BookingBlock
  content={{
    title: 'Book a Class',
    source: 'all',
    layout: 'grid',
  }}
  timeBlocks={bookingData}
/>

// List layout with selected items
<BookingBlock
  content={{
    source: 'selected',
    selectedTimeBlockIds: ['class-1', 'class-2'],
    layout: 'list',
  }}
  timeBlocks={bookingData}
/>

Best Practices​

  • Use cover images - Visual thumbnails increase engagement
  • Write clear descriptions - Help customers choose the right option
  • Grid for browsing - Use grid layout when you have 3+ options
  • List for quick selection - Use list layout for simpler choices