WEB BUILDER / MARKETING FLAGSHIP

Modern B2B SaaS patterns, brand-token aware.

The marketing primitives the kit ships — tabs, case studies, reviews, pricing — adapted to operator-first voice. Each is opt-in, CSS-first where possible, accessible.

Activate this capability Back to templates

BLOCK · TABS SECTION

Tabs for facet-by-facet comparison.

When a page needs to present multiple parallel views — products, use cases, customer types — the TabsSection block does it with ARIA tab pattern and keyboard navigation.

EXAMPLE

Three platform capabilities, three tabs.

Daily decision loop with audit trail.

Rules engine + audit log + idempotency + human override. Replaces manual bid review with an audited loop the operator can run inside any account.

See the capability →

BLOCK · CASE STUDY CARD

Single case feature card.

When a single case deserves prominent treatment, CaseStudyCard ships a feature card with client label, challenge, outcome and up to 3 metrics.

EU manufacturer · 80 SKUs (anonymised)

Challenge: Amazon PPC review was happening twice a week in spreadsheets, with bids changed by gut. Daily 90-minute review window per market. Margins drifted without anyone catching it.
Outcome: Capability activated, daily decision loop running with operator approval on every apply. ACoS held at target; TACoS visible per ASIN. Review time dropped to 20 minutes per day.

−78% Review time
TACoS visible Per ASIN, per marketplace
0 Money-moving auto-applies

BLOCK · REVIEWS CAROUSEL

Testimonial carousel with CSS scroll-snap.

When 5+ real testimonials exist with permission, Reviews carousel variant ships horizontal scroll with snap. Zero JS framework, accessible keyboard navigation.

WHAT OPERATORS SAY

When the substrate becomes visible, the team stops asking the same question twice.

The audit log changed our weekly review. We argue about bids less because the explanation is right there.
Operations Lead
EU marketplace
I stopped owning the Amazon rules in my head. They are documented, versioned, and the loop runs without me on holiday.
CEO
mid-market seller
When the content opportunity queue surfaces a topic, we write it. When it does not, we write something else. The team is not guessing.
Content lead
B2B SaaS
The site got faster, but the real win is that we can now find what we said about a topic three months ago.
Marketing director
traditional SME

BLOCK · PRICING TABLE

Pricing tiers + optional feature matrix.

When the engagement model is published (today: contact-only), PricingTable ships N tier cards + optional comparison matrix. The "recommended" tier is visually elevated with a ribbon.

ENGAGEMENT MODELS

How a Web Builder engagement is shaped (illustrative).

Engagement scope is set during discovery; this table illustrates the typical tier shapes. Activation is contact-only today.

Discovery

A read on whether the build matters.

From the friction

Site + content + ops audit
Pattern selection (no code)
Owner decision: build, no-build, defer
Output: one-page route + decision

Start with discovery

Most engagements

Build

A defined layer, handed over.

Scoped from discovery

Brand contract + structured contracts
Audit gates + publication loop
Cross-locale where it matters
Handover the team can run

Talk about a build

Operate

Maintenance + extension under the same contract.

Continuing only if the layer holds

Audit on every change
New surfaces under same gates
Monthly readback
Closure is a normal phase

Operate together

COMPONENT · TOOLTIP

Tooltip for inline disclosure.

When a term needs a brief in-context explanation, Tooltip ships a CSS-only popover. Try hovering or focusing ACoS or idempotency .

COMPONENT · CODE BLOCK

Code snippet with title bar and copy button.

When a page needs to show code — Astro snippet, JSON contract, CLI command — CodeBlock wraps Astro's built-in Code (Shiki SSR) with a title bar and copy-to-clipboard.

brand.config.ts (excerpt)

typescript

import { brandSchema, type Brand } from '@kit/base/schemas'
import { routes } from './routes'

export const brand = brandSchema.parse({
  name: 'ENNPHASIS',
  domain: 'ennphasis.com',
  locales: ['en', 'es'],
  defaultLocale: 'en',
  // ... nav, footer, llms, privacyForbidden ...
})

Five more showcase surfaces.

The full Web Builder showcase is divided into six categories.

← Back to templates · Heroes · Proof blocks · Article UX → · Motion →