A comprehensive showcase of all block settings, themes, backgrounds, and component variations.
Apply data-theme="[name]" to any block container. Text and background colors adapt automatically.
data-theme="purple"
data-theme="navy"
data-theme="green"
data-theme="forest-green"
data-theme="red"
data-theme="blue"
data-theme="teal"
data-theme="grey"
data-theme="light"
data-theme="white"
Apply data-bg="[pattern]" to add subtle animated backgrounds. These are theme-agnostic and work on any color.
Topographic map lines - gentle flowing animation
data-bg="contour"
Ocean waves - horizontal wave motion
data-bg="waves"
Polka dots - subtle drifting pattern
data-bg="dots"
Geometric grid - clean static lines
data-bg="grid"
Diagonal stripes - sliding animation
data-bg="diagonal"
Mountain silhouettes - layered peaks
data-bg="mountains"
Circuit board - tech-inspired pattern
data-bg="circuit"
Night sky - twinkling stars
data-bg="stars"
Tree silhouettes - pine forest
data-bg="forest"
Honeycomb - geometric cells
data-bg="hexagons"
Control vertical padding with data-spacing-top and data-spacing-bottom attributes.
data-spacing="none"
data-spacing="xs"
data-spacing="sm"
data-spacing="md"
data-spacing="lg"
data-spacing="xl"
Themes and backgrounds work together beautifully. The background patterns auto-invert on dark themes.
Perfect for adventure and outdoor content. The flowing lines suggest maps and exploration.
data-theme="purple" data-bg="contour"
Great for night activities, camping under the stars, or astronomy badges.
data-theme="navy" data-bg="stars"
Ideal for outdoor skills, nature activities, and woodland adventures.
data-theme="forest-green" data-bg="forest"
Perfect for water activities, sailing, kayaking, and swimming.
data-theme="teal" data-bg="waves"
Modern tech feel for digital skills, coding badges, and STEM activities.
data-theme="blue" data-bg="circuit"
Modern geometric pattern. Great for structured, organised content.
data-theme="light" data-bg="hexagons"
Hiking, climbing, and mountain adventures. Bold and adventurous.
data-theme="grey" data-bg="mountains"
Bold stripes create energy and urgency. Great for calls-to-action.
data-theme="red" data-bg="diagonal"
Three layout variants: cards (default), bar (compact), and centered.
Individual cards with hover effects. Best for light backgrounds.
Learning skills for life every week
Dedicated adult leaders
Across the district
Adventures every year
Bar layout + data-theme="purple" + data-bg="contour"
Bar layout + data-theme="navy" + data-bg="stars"
Testimonials and pull quotes with multiple style variants.
Scouts has given my children confidence, independence, and friends for life. The leaders are incredible volunteers who go above and beyond every week.
Default quote style
Being a Scout leader is one of the most rewarding things I've ever done. Seeing young people grow and achieve things they never thought possible is magical.
Quote on data-theme="purple" + data-bg="dots"
Skills for life. Adventure for all. That's what Scouting is all about.
quote--featured variant (built-in gradient)
Flexible two-column layout with image positioning options.
The default layout places the image on the left on desktop. On mobile, content stacks vertically. This layout works well for introducing topics with supporting imagery.
Use this for general content sections where the image supports but doesn't dominate the message.
Adding the text-and-image--image-right modifier flips the layout so text appears first and the image on the right.
Alternating left/right layouts creates visual rhythm on longer pages.
Text & Image blocks work beautifully on themed backgrounds with decorative patterns. The forest-green theme with forest background creates an immersive outdoor feel.
Perfect for sections about camping, nature, or outdoor activities.
Pre-configured themes for each Scout section with appropriate colours.
data-theme="squirrels"
data-theme="beavers"
data-theme="cubs"
data-theme="scouts"
data-theme="explorers"
data-theme="network"
Realistic combinations showing how blocks might be used together.
Just a few hours a week can help young people gain skills for life. No experience needed - we'll give you all the training and support you need.
From kayaking to sailing, our water activities teach confidence, teamwork, and essential safety skills. All equipment provided.
View Water ActivitiesMaking a difference across South Leeds & Morley
purple - Primary Scout purplenavy - Dark bluegreen - Scout greenforest-green - Dark greenred, blue, teal, greylight - Light grey bg, dark textwhite - White bg, dark textcontour - Topographic lineswaves - Ocean wavesdots - Polka dotsgrid - Geometric gridmountains, forest, starscircuit, diagonal, hexagonsnone - 0xs - 0.5remsm - 1remmd - Default block paddinglg - 1.5x defaultxl - 2x default
Use data-spacing-top, data-spacing-bottom, or data-spacing for both.