Back to Style Guide

Layout Templates & Patterns

Ready-to-use layout patterns built entirely with FindborgUI classes. Copy the HTML and paste it into WordPress, Qwik, or any HTML page.

Copy & Paste Ready — Every pattern uses only FindborgUI CSS classes. No JavaScript required. Works in WordPress Custom HTML blocks, static HTML, or any framework.

Hero Section with CTA

Full-width hero with centered headline, subtitle, and dual action buttons.

WP Ready

Build Something Amazing

The fastest way to create beautiful, accessible web experiences. No frameworks required — just clean HTML and CSS.

Get Started Learn More
Classes used:container, max-w-xl, text-center, mb-2xl, display-medium, mb-md, body-large, text-subtle, max-w-md, mx-auto, row, center, gap-md, button, button-primary, button-outline, button-lg

Feature Grid (3-Column)

Section headline with three feature cards, each with icon, title, and description.

WP Ready

Why Choose Us

Lightning Fast

Optimized for performance with zero JavaScript overhead. Pure CSS means instant rendering.

Beautiful Design

Material Design 3 inspired components with thoughtful spacing and color systems.

Fully Responsive

Every component adapts beautifully from mobile to desktop. No media queries needed.

Classes used:container, py-3xl, headline-medium, text-center, mb-2xl, grid-3, gap-lg, card, card-outlined, card-padding-lg, icon-lg, icon-block, text-primary, text-brand-2, text-brand-3, title-medium, mb-sm, body-medium, text-subtle, m-0

CTA Banner

Colored background card with headline, body text, and action button side by side.

WP Ready

Ready to get started?

Join thousands of developers building faster with our component library.

Start Building
Classes used:container, py-2xl, p-xl, bg-primary, text-on-primary, rounded-xl, row, justify-between, align-center, gap-lg, max-w-sm, headline-small, mb-sm, body-medium, m-0, button, button-lg, shrink-0, bg-white, text-primary

Testimonial Cards

Grid of customer testimonials with quote, author name, and role.

WP Ready

What People Are Saying

"This component library saved us weeks of development time. The design tokens make theming a breeze."

Sarah Chen
Lead Developer, Acme Corp

"Finally, a CSS library that works everywhere. We use it in WordPress and our React app with zero changes."

Marcus Rivera
CTO, StartupXYZ

"The accessibility-first approach means we pass audits without extra effort. Highly recommended."

Aisha Patel
Design Director, DesignCo
Classes used:container, py-3xl, headline-medium, text-center, mb-2xl, grid-auto, gap-lg, card, card-elevated, card-padding-lg, body-medium, italic, mb-lg, row, align-center, gap-sm, rounded-full, bg-brand-1-light, bg-brand-2-light, bg-brand-3-light, label-large, body-small, text-subtle

Pricing Cards (3-Tier)

Three pricing tiers side by side with the featured plan highlighted.

WP Ready

Simple Pricing

Starter

For personal projects

$0/mo
  • 5 projects
  • Community support
  • Basic analytics
Get Started
Most Popular

Pro

For growing teams

$29/mo
  • Unlimited projects
  • Priority support
  • Advanced analytics
  • Custom themes
Start Free Trial

Enterprise

For large organizations

$99/mo
  • Everything in Pro
  • Dedicated support
  • SLA guarantee
  • White-label option
Contact Sales
Classes used:container, py-3xl, headline-medium, text-center, mb-2xl, grid-3, gap-lg, items-start, card, card-outlined, card-elevated, card-padding-lg, title-medium, mb-xs, body-small, text-subtle, mb-lg, display-small, list-none, body-medium, py-xs, text-brand-2, button, button-primary, button-outline, button-md, w-full, fui-chip, fui-chip--active, inline-block, mb-md