Living reference for every block and token this theme exposes. Use it to spot-check the brand in context and to demo layouts to clients.
Eyebrow kicker
Default body paragraph. Two sentences that introduce the business and make the reader want to learn more. Keep it direct, benefit-oriented, and human.
Small body — for captions, disclaimers, metadata.
Headline + body + buttons on one side, image on the other. Mobile: image below content.
image_side (left or right). Author the headline, body, and buttons as Inner Blocks on the content side. Mobile stacks image below content.Two sentences that introduce the business and make the reader want to learn more. Keep it direct, benefit-oriented, and human.
Full-width hero with a headline over a full-bleed background image, plus a card for body/button on top.
image (or video URL) and title_html — wrap emphasized words in <strong>. Inner Blocks (paragraph + buttons) render inside a centered card over the image with an auto-generated gradient overlay.A short supporting paragraph that reinforces the headline and gives the reader enough context to keep scrolling. Two or three sentences is plenty.
Full-width hero. Background image dimmed to 70% so the selected palette background-color shows through, plus a directional gradient (transparent top-right → palette slug bottom-left). Entire content stack is InnerBlocks — eyebrow + h1 + paragraph + CTA button.
bg_color (palette slug — drives both the parent’s has-{slug}-background-color for the text-color cascade AND the directional gradient overlay color) and bg_image. The image renders at 70% opacity so the palette color shows through. Content stack is Inner Blocks — typical: eyebrow paragraph + h1 + body paragraph + CTA button. Gradient direction is locked top-right (transparent) → bottom-left (palette slug) so text in the bottom-left reads cleanly.Built for the way you live
Whether you’re on the coast, in a historic district, up in the mountains, or in a quiet suburb, there’s a Veranda collection built to match. Find yours below.
Full-bleed hero with an image on one side and a branded color/gradient panel on the other.
backgroundColor or gradient color panel. Inner Blocks (heading + paragraph + buttons) sit on the colored half. Mobile stacks.New collection
Composite decking that stands up to salt, sun, and seasons of foot traffic — backed by a ten-year warranty and zero upkeep.
Hero with a 2-column intro row (eyebrow + heading on the left, description + button on the right) and a hero image below. Fully field-driven; no Inner Blocks. The wrapper carries .sg-hero so it self-identifies as the page's top section.
title, eyebrow, description, button_text, button_url, image_aspect_ratio (6 ratios + none), image. Wrapper carries .sg-hero (shared page-hero marker, no CSS attached — see CLAUDE.md) plus the variant-specific .sg-block-hero-3-up. Mobile stacks the intro row to a single column.MARINE GRADE
Lumberock is engineered for full immersion — saltwater, freeze-thaw, UV, marine organisms. The kind of conditions that destroy lesser composites and rot every species of wood.
Single feature presentation panel — image with overlapping caption card on one side, headline + description + detail rows + optional CTA on the other. Shares its rendered HTML with one tab's content panel in Product Feature Toggles via partials/feature-detail-section.php.
partials/feature-detail-section.php partial — identical inner shape to one PFT tab’s content panel. Authors get a 2-column layout: image with floating caption card on one side, headline + description + detail rows + optional CTA button on the other. No block-head (eyebrow/heading above the panel) — wrap the block in a wp:group with your own section header if you want one. Per-instance accent color drives the colored left bar + icon tint on each detail row via the detail_color palette slug.WHAT MARINE GRADE MEANS
Built to Last
Composite decking that stays structurally sound and visually identical through decades of salt, sun, freeze-thaw, and marine organisms. Built specifically for the conditions other materials lose to.
Water & Moisture
Stands up to warping, rotting, and swelling under continuous water exposure.
UV Exposure
Resists fading and degradation from direct sun across seasons.
Harsh Weather
Withstands heavy rain, saltwater, freeze-thaw cycles, and extreme temperatures.
Marine Organisms
Impervious to mold, mildew, and insect damage.
Three-up card grid. Each card has an image, heading, body, and a full-width CTA button.
cards repeater. Each card has an Image, Title, Body, optional Link, and per-card image_aspect_ratio. Renders as a responsive grid.Built for studios that need repeatable, pixel-accurate results on every run.
Configurable workflows that scale from one-off prototypes to full production batches.
Direct access to a team that knows your equipment and your workflow inside out.
Row of big-number stats on a brand-gradient background. Admin provides a repeater of value + label pairs.
gradient (slug like secondary). Add stats rows with number + label + optional body. Renders 3-up or 4-up by viewport.Projects shipped
Customer satisfaction
Expert support
Industry experience
3-column grid of features, each with an icon, heading, and body.
features row holds a FontAwesome icon_name, heading, and body. Columns auto-adjust by viewport. Icon family inherits from settings.custom.icons.style in theme.json.Engineered from the ground up to deliver repeatable, pixel-accurate results.
Grows with your workflow — from a single project to full production runs.
Proven in the field, tested against the edge cases you actually encounter.
A dedicated team answers fast and knows your setup inside and out.
Quality materials and thoughtful details mean less maintenance over time.
Built by people who have solved this problem a hundred times before.
Half image, half content. Free-form InnerBlocks on the content side.
image (or video), image_side (left / right), has_texture. The block’s native backgroundColor / gradient picker paints the CONTENT side only — image side keeps its image. Default content-side bg is white. Stacks on mobile.Trusted by teams everywhere
A short supporting paragraph introduces the idea and gives the reader enough context to keep reading. Two or three sentences is plenty. Keep it focused on a single benefit, then let the list below do the heavy lifting.
Row of client/partner logos. 5-col on desktop, 2-col on mobile.
eyebrow line over the row. logos repeater holds image-only rows. layout toggles between Grid (5-col desktop, 2-col mobile) and Marquee Scroller (continuous loop).Trusted by teams everywhere
is-style-quote). The style gives the oversized pull-quote treatment with rounded corners and accent border. Use for hero-sized single testimonials.Working with this team fundamentally changed how we ship. Everything moved faster, the quality jumped overnight, and our customers noticed the difference within the first week.
Sam Okafor
VP of Operations, Lumen Labs
Grid of testimonial cards pulled from the Testimonial CPT. Admin picks which testimonials, columns per desktop, and how they collapse on mobile.
Testimonials in admin to author entries, then select them in the block’s testimonials field. desktop_columns 1–4; mobile_layout is stack or carousel. Renders empty until at least one CPT entry is selected.Grid of image tiles with overlay blurbs and links.
tiles repeater row has an Image, Blurb (overlays on hover), and optional Link URL. Renders 4-up by default, responsive down.List of downloadable documents. Each item links to a file and shows its type icon.
documents repeater: each row has file_type (PDF/DOC/XLS/FILE), title, file upload, and body description. Renders as a card grid with the file-type badge prominent and a download link out.Horizontal row of icon-topped features — tighter than Feature Grid.
desktop_columns (2/3/4). Each features row has a FontAwesome icon_name, heading, and body. Mobile collapses to one column.Numbered sequence of steps. Numbers auto-generate from item index.
number_bg palette slug for the step-number chip. desktop_columns 2–5. Each steps row has heading + body; the number auto-increments.We scope the project, confirm fit, and map the build.
Everything arrives on-site, spec-matched and ready.
Craftsmanship you can see in every joint and edge.
We hand off only when the work meets our standard.
Grid of link pods. Each pod has a title, description, and a link — the entire pod is clickable. Pod-level background color and optional background image.
columns 1–4. Each pods row: title, title_tag (h2–h6), description (WYSIWYG), link_text + link_url (both required), optional bg_image, palette bg_color. The entire card renders as an <a> — whole-card click target.Where the company started and what keeps us building.
See every board, color, and finish in one place.
Locate the nearest authorized retailer or installer.
Tell us about your project and we will respond within a day.
Grid of clickable image cards. Each card has a fixed-aspect image on top and a palette-colored footer bar with a FontAwesome icon, title, and right-arrow affordance. Block-level eyebrow + header lead the grid.
eyebrow_text + eyebrow_color and header_text + header_color lead the grid. columns 1–6 (default 4). Each cards row: title, palette bg_color for the footer bar, FontAwesome icon_name (active style from custom.icons.style wraps automatically), required link_url (whole card becomes the anchor), required image. Footer text + icon colors auto-flip via the parent’s palette pair-helpers. Image aspect locked to 1:1; uploaded images cover-crop.Tabbed feature switcher — a row of icon toggles drives a two-column panel showing a product image with caption (left) and headline + description + detail-feature list + CTA button (right). Each tab is its own product variant or category.
eyebrow_text / header_text with their own palette color dropdowns at 75/25 width. Main toggles repeater: each toggle has an icon row (label + FA icon_name), a left column (image + image subtitle + image title for the floating caption), and a right column (headline + description + button text/url + right_detail_color palette slug + a NESTED right_details repeater of label/icon/description rows). The detail color drives the left bar + icon tint of every detail row in that toggle. Interactivity is keyboard-navigable (ArrowLeft / ArrowRight / Home / End).Lorem ipsum
For suburban homes
Genesis Collection
Lorem ipsum dolor sit amet consectetur. Et sapien lacus vitae quis a sed. Ultrices et non dolor justo pulvinar.
Moisture handling
Built to shrug off the everyday wear of yards, sprinklers, and seasons.
Family-safe surface
Splinter-free and stable underfoot for kids, pets, and bare feet.
Color stability
Holds its tone year after year — no fading, no repainting.
Built to last
Engineered to outlast the deck you replaced — and the one before it.
For historic properties
Heritage Collection
Lorem ipsum dolor sit amet consectetur. Et sapien lacus vitae quis a sed. Ultrices et non dolor justo pulvinar.
Time-worn finish
Tones that read aged on day one — no weathering wait.
Hidden fasteners
No exposed screws breaking the visual line.
Code-compatible
Approved by every historic district we have served.
Reversible install
Lift the boards without harming the original substructure.
For waterfront properties
Marina Collection
Lorem ipsum dolor sit amet consectetur. Et sapien lacus vitae quis a sed. Ultrices et non dolor justo pulvinar.
Salt resistance
Built to outlast salt spray, tide, and time.
UV stable
Color holds through years of full-sun exposure.
Slip resistance
Textured surface that grips wet bare feet.
Composite core
No rot, no rust, no replacement.
For alpine properties
Summit Collection
Lorem ipsum dolor sit amet consectetur. Et sapien lacus vitae quis a sed. Ultrices et non dolor justo pulvinar.
Freeze-thaw stable
Dimensional stability through repeated deep-cold cycles.
Snow load rated
Engineered substructure handles full powder accumulation.
Low maintenance
Shovel-safe surface; no sealing required season to season.
Long span
Wider joist spacing without sag — fewer footings.
Full-width swatch showcase. A row of scenario toggles (e.g. time-of-day, lighting condition, product line) drives a panel with a big featured image and a horizontal scrollable row of selectable color/material swatches. Each swatch swaps the featured image when clicked.
description). Block-specific: a toggles repeater for the scenario row (label + FA icon_name — e.g. Morning/Overcast/Evening) with a NESTED swatches repeater per toggle. Each swatch has a square swatch_image thumbnail, a swatch_name label, and a big_image that swaps into the panel’s featured slot when clicked. Tabs are keyboard-navigable (ArrowLeft/Right, Home/End). Swatch row is horizontally scroll-snapped with arrow buttons; –swatch-width shrinks at the tablet + mobile breakpoints so fewer swatches fit naturally without per-breakpoint count rules. Block forces align: full only and uses the global root padding for side spacing.12 colors available
Three homeowners. Three different homes. One brand they didn't have to think twice about.
Grid of image cards using the shared image-card partial. Configurable columns, mobile layout (stack or horizontal scroll), and image aspect ratio. Each card has a tag, title, image, description, optional footer title + subtitle (e.g., name + location for testimonials), and CTA button.
column_count (1-4), mobile_layout (stack or scroll — horizontal scroller with snap), and image_aspect_ratio (six common ratios). Each card in the cards repeater has a Title, Tag (eyebrow above title), Image, Description, and Button text/URL. Cards render via the shared ccc_render_image_card() partial — colors hardcoded via palette helpers (card bg = light, tag = secondary, footer link = cta) so the visual style stays consistent across blocks that use it.
Coastal Collection
"Five years on the water, no warping, no fading. We stopped thinking about the deck a long time ago."
Suburban Collection
"The first summer we hosted, the kids never wanted to go inside. We’ve had that same feeling every year since."
Heritage Collection
"It looks like it has always been part of the house — the highest compliment we could ask for."
Summit Collection
"Through three winters at altitude, not a single board has shifted. The neighbors keep asking what we did differently."
Row of image-backgrounded data cards. Each card stacks a stat + stat title at the top (separated by a hairline border) over a background image, with a description anchored at the bottom. Optional infinite-marquee autoscroll.
column_count (1-4, used when autoscroll is off), bg_opacity (background-image opacity 0–100), autoscroll (infinite marquee with fixed ~33vw cards), mobile_layout (stack or scroll), and aspect_ratio (six common ratios). Each card has a Stat (top-left, large), Stat Title (top-right, small), Description (bottom, small), and Background Image. Card background color uses the native Gutenberg picker but is applied to each card (not the wrapper) and drives a top/bottom scrim gradient for legibility.
80
Vitamin D
nmol/L
Regulates your immune system, mood, and bones. Essential in early development.
0.93
Magnesium
mmol/L
Helps regulate your nervous system, supports better sleep, and reduces muscle tension.
74
Ferritin
ng/mL
Reflects how much usable iron your body has stored — affecting energy, concentration, and thyroid function.
5.2
HbA1c
%
A three-month average of your blood sugar — a leading indicator for metabolic health and energy stability.
110
HDL
mg/dL
The cholesterol that clears arteries. Higher values track with cardiovascular resilience and longevity.
7.4
Sleep
hrs/night
Average nightly sleep, weighted across the past 30 days. Recovery, focus, and memory are downstream of this number.
Marketing tile grid — asymmetric bento of headline-led cards over a 3fr/5fr/4fr column system × 3 rows, with per-column tall+short tile pairings. 6-tile uses all three columns; 4-tile drops the rightmost. Per-card palette color and optional image with Background (full-bleed cover + scrim) or Inline (centered, constrained-width) treatment.
card_count (4 or 6 — drives 2×2 or 3×2 grid; mobile stacks single-column). Per tile: headline (textarea, line breaks preserved), bg_color (palette slug — auto-pairs text color), image_treatment (background full-bleed with scrim, or inline centered constrained-width), and an optional image. Aspect ratio is hardcoded (5:3) — no editor control.
The largest virtual care network, supporting 28 million lives worldwide
30+ provider specialties
Global care, coverage, and reimbursement across 175+ countries
Your trusted partner in high-quality, 24/7/365 healthcare
Backed by 40+ peer-reviewed studies on our care model
Milliman-validated outcomes, proven by employer and health plan claims-based studies
Full-width hero / CTA section. Outer container holds a uniform padding 'frame' on all four sides; the inner panel inside that frame carries the bg color/gradient (Gutenberg native picker), an optional bg image, and a constrained-narrow InnerBlocks stack (eyebrow + h1 + paragraph + CTA button) vertically centered and left- or center-aligned.
alignment (left | center), height (auto | 50/60/70/80/90/100 vh), bg_image (optional). Background color and gradient come from the Gutenberg native picker in the toolbar and are applied to the inner panel (not the outer frame) so the page bg shows through the frame. InnerBlocks seed with an eyebrow paragraph, an h1, a large paragraph, and a CTA-colored button.Hero eyebrow
A short, generous-sized paragraph supporting the headline above. Two lines is plenty.
Large image with a content card that overlaps it. Switch which side the content card sits on.
image, content_side (left/right), and card_texture (default/sand/none). Inner Blocks render in the card — typically heading + paragraph + button.Clickable portfolio grid with a lightbox.
items repeater: each row has Image, Title, optional Caption. Clicking a tile opens a lightbox with title + caption display. Renders as a dense responsive grid.Centered copy block with an overhang image and optional background texture.
image at the top. Inner Blocks (heading + paragraph + buttons) render centered below the image. Optional background texture inherited from theme.json.The kind of quality you feel the first time you touch it and the hundredth time you walk across it. Ten-year warranty, zero upkeep, and color that doesn’t quit.
Narrow full-width call-to-action strip — headline + subtext on the left, button on the right. Fully field-driven; no inner content.
headline, headline_level (h2–h6), subtext, button_label, button_url, optional bg_image with bg_opacity (0–100) and has_texture. Apply palette via the block’s native backgroundColor.Some extra text to drive home the point
Full-width call-to-action band with brand color/gradient, optional background image, and InnerBlocks content.
bg_image, bg_opacity, has_texture) and choose palette backgroundColor or gradient from the block’s native color panel. Inner Blocks (heading + paragraph + button) render over the band.Talk to us about your next project and find out how fast we can move from kickoff to launch. We’ll walk you through scope, timeline, and pricing in a single call.
Two infinite-scroll rows of images moving in opposite directions.
images repeater holds up to 24+ image-only rows. Auto-tiles to a dense mosaic; aligns full-width for edge-to-edge presentation. Best with a mix of landscape and portrait aspect ratios.Featured image above a thumbnail row. Click any thumbnail to make it the primary image. Default 5 columns of thumbnails; configurable per instance. Uses the site default border-radius and block gap.
images gallery field: the first image renders large, the rest become clickable thumbnails below. columns controls the thumb-row count (default 5; range 2–10). Selecting a thumb swaps it into the primary slot. On /style-guide the block falls back to bundled defaults so it always renders.
Drop-in texture overlay. The block itself has effectively zero height; a positioned texture image projects up, down, or both directions from the block's drop point. Source textures come from theme.json's settings.custom.textures, so adding new texture options to the dropdown is a child-theme registration step (no per-block work).
settings.custom.textures in this child theme’s theme.json — register textures there to populate the list) and an arrangement (bottom rises up from the drop point, top descends down, middle centers and extends both ways). The block itself has effectively no height; a positioned pseudo carries the texture at 50vh reach with mask-faded edges. Stacking is z-index: -1 so it sits behind sibling content — visible where adjacent content has no opaque background. Renders only when the active theme has registered textures (otherwise the slug doesn’t resolve and the block bails silently).Position: sticky wrapper. Drop multiple Stackables back-to-back and they stack on top of each other as the page scrolls (each later one covers earlier ones). InnerBlocks accept any content. Sticky offset defaults to spacing–40 below the viewport top — adjust per-instance if a navbar or other fixed chrome needs more clearance.
position: sticky container for a scroll-stack effect. Canonical use: drop ONE Stackable, then nest N children inside it (commonly Split 50/50s). Each child sticks at the top offset as the user scrolls past, later children cover earlier ones in DOM order, all release together when the wrapper scrolls off. Single field — sticky_offset (spacing-slug select, default 40). Adjust under taller navbars. Wrapper has no visual styling; the children bring their own bg / layout. Legacy single-child Stackables (one Stackable per row, multiple as siblings) still work — :has()-detected at the CSS level. Common gotcha: position: sticky only sticks within its nearest scrolling ancestor — if any container higher up uses overflow: hidden/auto or transform, the Stackable will stick to that instead of the viewport.Brand awareness
Reach the right buyers before they’re shopping. These videos turn cold attention into warm intent so your sales team starts from a position of strength.
Prospect conversion
Your prospects are stuck in the pipeline and your team is answering the same questions on every call. These videos build that proof into the process — lifting win rates, shortening deal cycles, and growing average deal size.
Customer retention
Existing customers are the easiest growth lever you have. These videos make the next yes obvious — renewals, upsells, and the testimonials that fuel the next round of awareness.
Centered hero panel (title, copy, image) with a row of icon-feature pods below.
top_title (H2), top_description (WYSIWYG), and a single top_image rendered inside a <figure> flush to the panel’s bottom edge. Bottom pods: configurable pod_columns (2/3/4, default 3). Each pod has an icon, H3 title, description, and an outlined WP button — pod_button_color picks the palette slug for every pod’s button text + border.Deploy quickly and enable Zero Trust access to any resource on your network. From CI/CD runners across multi-cloud environments to SaaS tools and infrastructure — connect it all, seamlessly.
Get started in minutes. Integrations apply policies to your teams at scale.
Cross-platform and infrastructure agnostic to give the flexibility you need.
Across clouds or on-prem, a mesh overlay network connects it all.