← Demo Dashboard Page Layouts  ·  The Lego catalog of every header, section, and page type
VK Build Family Style Guide All Pages Page Layouts Demo Dashboard
I am building... A category page (PLP) Brand storytelling / About / Heritage A service / program / policy page Browse all blocks Show me recipes
VK Page Layouts · The Lego Catalog

Every header. Every section. Every page type. Snap them together.

Vintage King pages are built like Lego. A Header on top. Sections in the middle. A Footer at the bottom. Pick a Page Type recipe to see which colored blocks stack together — or browse the library and build your own.

Every block has an accurate wireframe, a "when to use" rule, and a "View live demo" link to a real page using it. Built for AJ, junior designers, and the incoming agency.

HEADER
Hero — pick from 11 variants
SECTIONS
Trust strip
Card grid
Process strip
Editorial 3-up
CTA block
FOOTER
Standard 4-column footer

Three layers. Eight colors. Snap-together pages.

Every VK page is a stack: one Header, any number of Sections, one Footer. Each Section has a category color so a junior can scan at a glance: green = trust, blue = card grid, plum = editorial, slate = process, red = CTA, teal = form.

Want to build an About page? Header (amber Hero 1) + Editorial (plum) + Stat strip (plum) + CTA (red) + Footer (black). That's it. Same colors used on every section card below and inside every Page Type recipe.

Use the sticky bar above to jump straight to what you need. Scroll to browse the whole box.

Lego color key — eight block categories
Header
11 heroes
Trust
2 strips
Card grid
5 grids
Editorial
5 blocks
Process
3 patterns
CTA
3 blocks
Form
2 patterns
Footer
1 standard
Layer 01 · Headers
Header blocks — pick one hero per page.
11 distinct heroes across 6 families. Light heroes are the default for storytelling, service, and policy pages. Dark heroes are reserved for category PLPs and brand spotlights.
Hero 1 — Big Photo (full-bleed)
Single full-width image, ~520-640px tall. Used on storytelling pages with a hero-quality photo.
FULL-BLEED PHOTO ABOUT VK Built by engineers Pro audio outfitters since 1993 READ MORE
Header1a · Light
Big Photo · Copy below
Use for: About, Heritage, Studio Installations — when copy needs full readability under the photo.
View live demo → about-v2.html
FULL-BLEED PHOTO MAKE YOUR MARK Where pros build careers Studios that started here · gear that shaped records SEE STORIES
Header1b · Light + dark scrim
Big Photo · Copy overlaid
Use for: Make Your Mark, brand campaigns, immersive storytelling. Copy sits on a darkened scrim over the image.
View live demo → make-your-mark.html
Hero 2 — Light 50/50 (Trade pattern)
Full-bleed 50/50 split. Left panel: #EDE8E2 with eyebrow + H1 + body + CTAs. Right panel: #fff with one of 5 variants.
TRADE PROGRAM Trade your gear for credit Real value. Fast offers. GET QUOTE 15+ ENGINEERS 30 yrs IN PRO AUDIO $48M TRADED IN 2,847 PRODUCTS
Header2a · Stats Grid (4 boxes)
Light 50/50 · Stats Grid
Use for: Trade Program, Studio Pros, Audio Consultants, Careers — credibility / authority pages. 2x2 grid of big numbers + labels.
View live demo → trade-program.html
STUDIO PROS Built for the working pro Dedicated account · trade credit · first dibs JOIN PROS FULL-BLEED PHOTO
Header2b · Full Image
Light 50/50 · Full Image
Use for: Studio Professionals, service pages with one hero photo. Image fills the entire right panel — no padding.
View live demo → studio-professionals.html
PLAYBACK Demo what we recommend Hear it before you buy. Real rooms, real signals. BOOK DEMO FRAMED PHOTO
Header2c · Framed Image
Light 50/50 · Framed Image
Use for: Playback, programs where the photo needs breathing room (white margin around it). Image contained, not full-bleed.
View live demo → playback.html
CONSULTANTS Talk to a pro before you buy Free advice from working engineers CONNECT Dedicated rep, no script Live chat · phone · video Specs you actually need Compatibility checked Trade-in advice included
Header2d · Feature List
Light 50/50 · Feature List
Use for: Audio Consultants, programs that lead with a benefits list. Bullet list with amber dots, no images.
View live demo → audio-consultants.html
EDITORIAL DROP Six picks for tracking vocals Curated by our engineers SHOP PICKS PROD 1 PROD 2 PROD 3 PROD 4 PROD 5 PROD 6 View all 47 mics → Curator note
Header2e · Product Grid (Six-Card)
Light 50/50 · Product Grid
Use for: editorial / curated drops, Picks of the Week, campaign landing. Opt-in only — never the default category page. 6 product cards on the right.
View live demo → microphones-plp-editorial.html
Hero 3 — HOF Pattern (gear detail)
Same 50/50 frame as Hero 2 but right panel has horizontal padding so the product photo ends flush at the bottom. Used for Hall of Fame gear pages.
HALL OF FAME Neumann U47 FET The standard. Rebuilt for the modern studio. 1973 VOCAL SHOP NOW PRODUCT · CONTAIN
Header3 · HOF Pattern
HOF Gear Pattern
Use for: Fairchild, LA-2A, U47, Neumann U67, Neve 1073, UA 175B — Hall of Fame gear detail pages. Product photo with horizontal padding, flush bottom.
View live demo → neumann-u47-fet-v2.html
WARRANTY VK Warranty: every piece, hand-tested Two-year coverage. Bench tech in-house. No phone tree, no script. READ POLICY
Header4 · Light Centered
Text Only · Centered
Use for: Warranty, Returns, Shipping, Privacy, FAQ — policy and content-focused pages. Maximum readability, no photo.
View live demo → warranty.html
Layer 01 · Headers — dark family
Dark headers — category PLPs and brand spotlights only.
Dark heroes signal commerce intent. Use only for category pages or co-op partner weeks. Never on storytelling, About, service, or policy pages.
CO-OP · NEUMANN MICROPHONES The Neumann week. Hand-picked. Six classics. Demo-ready. Free shipping. SHOP NOW FEATURED PRODUCT U67 RE-ISSUE Tube. Multi-pattern. From $7,495 SHOP
Header5 · Dark + Featured + Co-op
Dark 50/50 · Featured + Co-op
Use for: Brand spotlight category pages. Partnered launches (Neumann × UA), single-product hero pushes, sponsored campaign weeks.
View live demo → microphones-plp-spotlight.html
MICROPHONES Studio microphones, hand-tested by us. Vintage tube to modern condenser. 30-day returns. Talk to a working engineer before you buy. SHOP MICS TALK TO A PRO 147 products From $89 to $14,500
Header6 · Dark Strip
Dark Strip · No Photo
Use for: Category authority without a featured product or partner. Cleanest dark option. Headline + CTA + product count only.
View live demo → microphones-plp-default.html
Layer 02 · Sections
Section blocks — stack any number between header and footer.
Color-coded by category: green = trust, blue = card grid, plum = editorial, slate = process, red = CTA, teal = form. Each block has a wireframe, a "when to use" rule, and a live demo link.

Trust strips

✓ Free Shipping On orders $99+ ✓ VK Warranty 2-year coverage ✓ 0% Financing Up to 36 mo
Trust
4-Up Icon Trust Strip
Use for: just below the hero on commerce pages. Free shipping · Warranty · Financing · Hand-tested. Drives buying confidence.
View live demo → on microphones-plp-spotlight.html
CREDENTIALS Trusted by working studios 15+ engineers · 30 years · $48M traded 15+ ENGINEERS 30y IN PRO AUDIO
Trust
Credential Bar (amber-bg)
Use for: Sell or Trade, Trade Program, service pages — when you need to show authority numbers + badges. Amber-bg block, thin, no padding.
View live demo → on trade-program.html

Card grids

PHOTO CURATOR Card headline Body copy. Two lines. PHOTO CURATOR Card headline Body copy. Two lines. PHOTO CURATOR Card headline
Card grid
3-Up Editorial Card Row
Use for: curator notes, related programs, project cards, episode grid. Three vertical cards with image · eyebrow · headline · body.
View live demo → on microphones-plp-editorial.html
PHOTO Product name Brand · Type $1,495 PHOTO Product name Brand · Type $2,795 PHOTO Product name Brand · Type $899 PHOTO Product $3,250
Card grid
4-Up Product / Tile Row
Use for: related products, related programs, related categories. Four equal cards in a row with image + name + price/meta.
View live demo → on microphones-plp-default.html
Type Brand Pattern Price + More See all 147 products Sort: Featured ▾ View: ▦ ▤
Card grid
PLP Filters · Pill row + Product Grid
Use for: every category page (PLP). Row 1: pill filters across the top + red "See all" opens drawer. Row 2: inline product count · sort · view toggle. Below: 3-up product grid. Replaces the old left sidebar pattern.
View live demo → on microphones-*.html
PHOTO EYEBROW Feature headline One-line supporting copy PHOTO EYEBROW Feature headline One-line supporting copy
Card grid
2-Up Feature Card Row
Use for: two big related items — paired programs, sister gear pages, before/after. Larger image area, more breathing room than 4-up.
View live demo → on universal-audio-apollo-x-v2.html

Editorial blocks

PHOTO OUR STORY Story headline goes on two lines Three lines of body copy supporting the headline. Concrete claims. No filler. Ends on a CTA below. READ MORE
Editorial
50/50 Image + Text
Use for: About story sections, brand history, program detail. Photo on one side, body copy + CTA on the other.
View live demo → on about-v2.html
" PORTRAIT "VK has been my mic vault for a decade. They test every piece." SERBAN GHENEA Mix engineer, MixStar Studios
Editorial
Pull Quote / Testimonial
Use for: seller testimonials, engineer quotes, customer proof. Big serif quote with attribution.
View live demo → on about-v2.html
15+ ENGINEERS 30 yr IN PRO AUDIO $48M TRADED 2.8K PRODUCTS
Editorial
4-Up Stat Strip
Use for: About, Heritage, Trade Program — when you want to show authority numbers as a separate section. Big numbers + small labels.
View live demo → on 25-years-of-pro-audio-v2.html
1973 Original FET edition launches 1986 Production paused, becomes a classic 2014 Re-issued · same circuit, modern build PHOTO
Editorial
Timeline / Version History
Use for: Heritage gear pages, version history, brand decade-by-decade. Vertical line + dated milestones.
View live demo → on universal-audio-apollo-x-v2.html
Specifications PatternCardioid Frequency response40 Hz – 16 kHz Sensitivity8 mV/Pa Max SPL147 dB PowerPhantom 48V
Editorial
Specs Table
Use for: HOF gear pages, technical specs, comparison tables. Two-column key/value rows with thin dividers.
View live demo → on neumann-u47-fet-v2.html

Process / step strips

HOW IT WORKS Four steps to trade-in credit From submission to credit in 5 days. 01 Submit Photos + spec 02 Quote Within 24 hrs 03 Ship free Pre-paid label 04 Get paid Credit or check
ProcessDark
Dark 4-Step Process Strip
Use for: "How it works" — 4 numbered steps for buying guides, trade-in process, how-we-curate. Headline left, 2x2 numbered cards right.
View live demo → on microphones-plp-editorial.html
01 Submit Photos + serial 02 Quote Within 24 hrs 03 Ship free Pre-paid label 04 Paid
ProcessLight
Light 4-Step Card Row
Use for: service / trade pages where the process needs to feel approachable. Light cards with amber numbered circles.
View live demo → on trade-program.html

CTA blocks

READY? Get a quote in under 24 hours Free shipping label · No obligation Trade for credit or take cash START QUOTE
CTA
Light CTA Band (#EDE8E2)
Use for: end-of-page conversion push on storytelling, service, and program pages. Centered headline + 1 amber CTA on the warm-light hero color.
View live demo → on trade-program.html
JOIN THE PROS Free account. Real benefits. Account manager · trade credit · early access SIGN UP FREE
CTADark
Dark CTA Panel
Use for: high-contrast end-of-page push when the page already has a dark process or feature block. Use sparingly — at most one dark band per page.
View live demo → on microphones-plp-spotlight.html
MAIN CTA Apply for trade credit today Online application takes 5 minutes. No hard credit pull. APPLY NOW OR Talk to an expert first Free 15-min call. No sales pressure. BOOK CALL
CTA
Talk to an Expert Co-op Block
Use for: service / program pages — pair the main CTA with an "Or Talk to an Expert" amber-bg co-op block. Always inline, never separated.
View live demo → on trade-program.html

Forms

CONTACT Send us a message Full name * Email * Phone Topic ▾ Message *
Form
Standard Form
Use for: Careers apply, Credit Card application, contact. White inputs, dark text, red focus border (always), amber submit button.
View live demo → on vk-credit-card.html
STEP 1 OF 3 Tell us about your gear Brand · Model Serial number NEXT → ← BACK
Form
Multi-Step Form (with progress)
Use for: Sell or Trade gear submission, complex applications. Top progress bar + step counter + Next/Back buttons.
View live demo → pattern shown on careers.html

Footer

VINTAGE KING Pro Audio Outfitter Since 1993 SHOP Microphones Outboard Vintage Demo Deals PROGRAMS Trade Program Studio Pros Financing HELP Contact Returns Warranty © 2026 Vintage King Audio Privacy · Terms · Sitemap
Footer
Standard 4-Column Footer
Use for: every page. Brand + tag (left), Shop · Programs · Help columns. Amber column headers, white links, near-black bg.
View live demo → on every secondary page
Layer 03 · Page Types
Page Type recipes — snap the Legos together.
Each recipe shows you which colored blocks stack together for a given page type. Pick the recipe that matches what you're building, then copy the live demo as your starting point.
Category PLP
For every product category page. Default = dark strip hero (variant 1). Category PLPs default to dark — light editorial hero is opt-in for drops or staff picks only.
View live demo · Default PLP →
Header — Dark Strip (default) · or Featured + Co-op (spotlight) · or Six-Grid light (editorial)
Trust — 4-up icon strip
Card grid — pill filter row + 3-up product grid
Process — dark 4-step buying guide (optional)
Card grid — 4-up related categories
Footer — standard
About / Brand Story
For storytelling pages — About, Heritage, Make Your Mark. Light hero with a hero-quality photo. No dark blocks except optionally one pull quote.
View live demo →
Header — Hero 1a (Big Photo · copy below) or 1b (overlay scrim)
Editorial — 50/50 image + text (story)
Editorial — 4-up stat strip
Editorial — pull quote / testimonial
CTA — light band (#EDE8E2)
Footer — standard
Service / Program
For Trade Program, Studio Pros, Audio Consultants, Financing — any program / service page that converts a visitor into a lead or customer.
View live demo →
Header — Hero 2a (Stats Grid) or 2d (Feature List)
Trust — credential bar (amber-bg)
Process — light 4-step or dark 4-step strip
Card grid — 3-up program tiles
CTA — Talk to an Expert co-op block + light CTA band
Footer — standard
HOF Gear Detail
Hall of Fame gear pages — Fairchild, LA-2A, Neumann U47/U67, Neve 1073, UA 175B, Telefunken. Long-form authority + spec table + shop CTA.
View live demo →
Header — Hero 3 (HOF Pattern)
Editorial — long-form rich text (history / engineering)
Editorial — specs table
Card grid — 4-up related products
CTA — light band (Shop Now)
Footer — standard
Heritage / Brand Page
For brand-deep pages — UA Apollo X, Coles 4038, Telefunken ELA M 251, 25 Years of Pro Audio. Tells the version-by-version story of a piece of gear or era.
View live demo →
Header — Hero 1a (Big Photo · copy below)
Editorial — 50/50 image + text (intro)
Editorial — timeline / version history
Card grid — 2-up version cards
CTA — light band (Shop the family)
Footer — standard
Policy / FAQ
For Warranty, Returns, Shipping, Privacy, FAQ. Maximum readability. No photos. One short hero, then long-form policy text.
View live demo →
Header — Hero 4 (Text Only · centered)
Editorial — long-form rich text / accordion
CTA — Talk to an Expert co-op block
Footer — standard
Career / Job
For Careers index and individual job postings. Lead with stats to show why someone would want to work here, then list roles, then apply.
View live demo →
Header — Hero 2a (Stats Grid)
Editorial — 4-up stat strip (benefits)
Card grid — open roles list
Form — multi-step application (or standard)
Footer — standard
Hub / Index Page
For navigator-style index pages — All Pages, Page Layouts, Style Guide. No hero. Heavy on structure, light on color.
View live demo →
Header — none (or short Hero 4 text-only)
Card grid — grouped page rows / link tiles
Footer — standard
Layer 04 · Badges
Product card badges — 4 names, 2 styles.
Quick reference. Full spec, code, and Do/Don'ts live in the Style Guide.
Style A — Tinted (default)
New Vintage Best Seller Featured
Style B — Outline (quieter)
New Vintage Best Seller Featured
Use Tinted when
Default product grids, white backgrounds, light card surfaces. Tinted reads strongest against busy product imagery.
Use Outline when
Card already has a Sale price, Open Box ribbon, or photo-heavy hero treatment. Outline keeps signal without crowding.
Full badge spec in Style Guide →
Sister tools

Three pages. Three jobs.

Page Layouts (this page) shows what to build. Style Guide explains the design rules. All Pages lists every page already built.

Style Guide → All Pages → Demo Dashboard →