Every visual component in the brand kit, in one place. Naming convention: category.variant-slug. Click a name to copy it, click Open to preview the live variant.
Download all components (.zip) Master file for AI tools (.md) Design tokens (.css) Copy HTML / Copy CSS on any variant grabs that exact component to your clipboard.
Updated whenever the components/ tree changes. Run python3 scripts/generate-all-components.py after adding a new variant to refresh this page.
28
Categories
142
Variants
2026-06-11
Last regen
About / Bio
5 variantsPersonal intro, founder story, bio blocks.
| Copy name | Title | Size | |
|---|---|---|---|
about-bio.centered-circle-polished
|
About Bio · Centered circle (polished) | 4.6 KB | HTML CSS Open → |
about-bio.centered-circle
|
About Bio · Centered circle, Tracy Harris Co | 1.9 KB | HTML CSS Open → |
about-bio.showcase
|
About Bio, Showcase | 4.7 KB | HTML CSS Open → |
about-bio.split-editorial-polished
|
About Bio · Split editorial (polished) | 6.6 KB | HTML CSS Open → |
about-bio.split-editorial
|
About Bio · Split editorial, Tracy Harris Co | 2.9 KB | HTML CSS Open → |
Benefit Trio
4 variantsThree-feature rows with icon/number + short body.
| Copy name | Title | Size | |
|---|---|---|---|
benefit-trio.icon-row
|
Benefit Trio · Icon row, Tracy Harris Co | 5.0 KB | HTML CSS Open → |
benefit-trio.number-row
|
Benefit Trio · Number row, Tracy Harris Co | 4.4 KB | HTML CSS Open → |
benefit-trio.question-row
|
Benefit Trio · Question row, Tracy Harris Co | 4.1 KB | HTML CSS Open → |
benefit-trio.showcase
|
Benefit Trio, Tracy Harris Co | 7.5 KB | HTML CSS Open → |
Calendar
1 variantCard Flip
1 variantFront/back cards that flip on hover or tap.
Content Section
1 variantGeneric long-form copy blocks with editorial rhythm.
CTA Block
20 variantsStand-alone calls to action and mid-page conversion moments.
| Copy name | Title | Size | |
|---|---|---|---|
cta-block.accent-polished
|
CTA Block · Accent (polished) | 4.2 KB | HTML CSS Open → |
cta-block.accent
|
CTA Block · Accent, Tracy Harris Co | 1.4 KB | HTML CSS Open → |
cta-block.callout-quiz-dashed
|
CTA Block · Callout Quiz Dashed, Tracy Harris Co | 2.3 KB | HTML CSS Open → |
cta-block.canvas-polished
|
CTA Block · Canvas (polished) | 4.5 KB | HTML CSS Open → |
cta-block.canvas
|
CTA Block · Canvas, Tracy Harris Co | 1.4 KB | HTML CSS Open → |
cta-block.dark-polished
|
CTA Block · Dark (polished) | 3.8 KB | HTML CSS Open → |
cta-block.dark
|
CTA Block · Dark, Tracy Harris Co | 1.3 KB | HTML CSS Open → |
cta-block.elevated-polished
|
CTA Block · Elevated (polished) | 3.8 KB | HTML CSS Open → |
cta-block.elevated
|
CTA Block · Elevated, Tracy Harris Co | 1.3 KB | HTML CSS Open → |
cta-block.outro-connect-listen
|
CTA Block · Outro Connect + Listen Combo, Tracy Harris Co | 4.4 KB | HTML CSS Open → |
cta-block.outro-dancefloor
|
CTA Block · Outro Dance Floor, Tracy Harris Co | 4.9 KB | HTML CSS Open → |
cta-block.outro-dm
|
CTA Block · Outro DM, Tracy Harris Co | 4.5 KB | HTML CSS Open → |
cta-block.outro-editorial
|
CTA Block · Outro Editorial, Tracy Harris Co | 3.3 KB | HTML CSS Open → |
cta-block.outro-kinetic
|
CTA Block · Outro Kinetic, Tracy Harris Co | 4.1 KB | HTML CSS Open → |
cta-block.outro-neon
|
CTA Block · Outro Neon, Tracy Harris Co | 3.9 KB | HTML CSS Open → |
cta-block.outro-ribbon
|
CTA Block · Outro Ribbon, Tracy Harris Co | 2.7 KB | HTML CSS Open → |
cta-block.outro-runway
|
CTA Block · Outro Runway, Tracy Harris Co | 4.8 KB | HTML CSS Open → |
cta-block.ruled-polished
|
CTA Block · Ruled (polished) | 2.9 KB | HTML CSS Open → |
cta-block.ruled
|
CTA Block · Ruled, Tracy Harris Co | 1.1 KB | HTML CSS Open → |
cta-block.showcase
|
CTA Block, Showcase | 4.6 KB | HTML CSS Open → |
Curriculum Preview
3 variantsModule/lesson breakdowns for courses, programs, workshops.
| Copy name | Title | Size | |
|---|---|---|---|
curriculum-preview.grid-preview
|
Curriculum Preview · Grid preview, Tracy Harris Co | 8.5 KB | HTML CSS Open → |
curriculum-preview.module-stack
|
Curriculum Preview · Module stack, Tracy Harris Co | 12.0 KB | HTML CSS Open → |
curriculum-preview.showcase
|
Curriculum Preview, Tracy Harris Co | 19.3 KB | HTML CSS Open → |
Event Widget
1 variantLive/upcoming event cards and registration blocks.
Expandable CTA
4 variantsCollapsed CTA that expands to reveal detail or form.
| Copy name | Title | Size | |
|---|---|---|---|
expandable-cta.ffm-application
|
Expandable CTA, FFM Application | 4.7 KB | HTML CSS Open → |
expandable-cta.quiz-polished
|
Expandable CTA, Quiz (polished) | 8.6 KB | HTML CSS Open → |
expandable-cta.quiz
|
Expandable CTA, Quiz (Tracy) | 4.8 KB | HTML CSS Open → |
expandable-cta.showcase
|
Expandable CTA, Showcase | 9.1 KB | HTML CSS Open → |
FAQ
4 variantsQuestion/answer lists with accordion or inline patterns.
Feature Grid
1 variantMulti-item feature matrices, for programs or inclusions.
Freebies
1 variantLead-magnet offer blocks and download cards.
Guarantee
3 variantsTrust-building, risk-reversal blocks.
Hero
30 variantsTop-of-page hero blocks. The most used component.
| Copy name | Title | Size | |
|---|---|---|---|
hero.classic-ffb-split-right-louder
|
Hero, Classic FFB split-right (louder) | 16.2 KB | HTML CSS Open → |
hero.classic-ffb-split-right-polished
|
Hero, Classic FFB split-right (polished) | 9.8 KB | HTML CSS Open → |
hero.classic-ffb-split-right
|
Hero, Classic · FFB split (photo right) | 1.8 KB | HTML CSS Open → |
hero.classic-ffm-dark-split-right-polished
|
Hero, Classic · FFM dark split (polished) | 8.0 KB | HTML CSS Open → |
hero.classic-ffm-dark-split-right
|
Hero, Classic · FFM dark split (photo right) | 1.9 KB | HTML CSS Open → |
hero.classic-ffm-marquee-polished
|
Hero, Classic · FFM marquee (polished) | 8.1 KB | HTML CSS Open → |
hero.classic-ffm-marquee
|
Hero, Classic · FFM marquee (dark) | 4.2 KB | HTML CSS Open → |
hero.classic-ffm-oatmeal-split-left-polished
|
Hero, Classic · FFM oatmeal split (photo left, polished) | 8.2 KB | HTML CSS Open → |
hero.classic-ffm-oatmeal-split-left
|
Hero, Classic · FFM oatmeal split (photo left) | 1.9 KB | HTML CSS Open → |
hero.classic-ffm-silk
|
Hero, Classic · FFM silk (animated canvas) | 4.2 KB | HTML CSS Open → |
hero.classic-fresh-split-right
|
Hero, Classic · FRESH split (photo right) | 1.9 KB | HTML CSS Open → |
hero.classic-tracy-textonly-polished
|
Hero, Classic · Tracy text-only (polished) | 6.6 KB | HTML CSS Open → |
hero.classic-tracy-textonly
|
Hero, Classic · Tracy text-only | 1.5 KB | HTML CSS Open → |
hero.editorial-wordmark-polished
|
Hero, Editorial wordmark (polished) | 16.1 KB | HTML CSS Open → |
hero.editorial-wordmark
|
Hero, Editorial wordmark | 10.0 KB | HTML CSS Open → |
hero.optin-confirmation
|
Hero, Opt-in confirmation | 8.1 KB | HTML CSS Open → |
hero.oto-polished
|
Hero, One-time offer (polished) | 9.5 KB | HTML CSS Open → |
hero.oto
|
Hero, One-time offer | 7.1 KB | HTML CSS Open → |
hero.overlay-portrait-polished
|
Hero, Overlay portrait (polished) | 15.0 KB | HTML CSS Open → |
hero.overlay-portrait
|
Hero, Overlay portrait | 8.4 KB | HTML CSS Open → |
hero.quiz-result
|
Hero, Quiz result | 7.1 KB | HTML CSS Open → |
hero.showcase
|
Hero Component, Four Brand Showcase | 14.3 KB | HTML CSS Open → |
hero.split-dark-polished
|
Hero, Split dark (polished) | 14.7 KB | HTML CSS Open → |
hero.split-dark
|
Hero, Split (dark charcoal + portrait) | 10.5 KB | HTML CSS Open → |
hero.split-light-polished
|
Hero, Split light (polished) | 14.5 KB | HTML CSS Open → |
hero.split-light
|
Hero, Split (light oatmeal + portrait) | 11.1 KB | HTML CSS Open → |
hero.split
|
Hero, Split variant (text left / photo right) | 15.7 KB | HTML CSS Open → |
hero.stage-portrait
|
Hero, Editorial stage (Tracy Harris interpretation) | 19.7 KB | HTML CSS Open → |
hero.textonly-polished
|
Hero, Text only (polished) | 6.6 KB | HTML CSS Open → |
hero.textonly
|
Hero, Text only (Tracy Harris Co) | 4.2 KB | HTML CSS Open → |
Image Grid
3 variantsMasonry / gallery / editorial image layouts.
Next Steps
1 variantPost-conversion guidance, thank-you page structures.
Offer Stack
6 variantsValue stack / inclusions stacked with dollar framing.
| Copy name | Title | Size | |
|---|---|---|---|
offer-stack.bonus-cards-polished
|
Offer Stack · Bonus cards (polished) | 6.1 KB | HTML CSS Open → |
offer-stack.detailed-polished
|
Offer Stack · Detailed (polished) | 12.6 KB | HTML CSS Open → |
offer-stack.detailed
|
Offer Stack · Detailed, Tracy Harris Co | 9.7 KB | HTML CSS Open → |
offer-stack.minimal-polished
|
Offer Stack · Minimal (polished) | 7.8 KB | HTML CSS Open → |
offer-stack.minimal
|
Offer Stack · Minimal, Tracy Harris Co | 5.4 KB | HTML CSS Open → |
offer-stack.showcase
|
Offer Stack, Tracy Harris Co | 14.4 KB | HTML CSS Open → |
Opt-in
5 variantsEmail capture forms and lead-gen sign-up blocks.
| Copy name | Title | Size | |
|---|---|---|---|
opt-in.accent-dark
|
Opt-in · Split Dark Accent, Tracy Harris Co | 1.8 KB | HTML CSS Open → |
opt-in.banner
|
Opt-in · Banner, Tracy Harris Co | 1.5 KB | HTML CSS Open → |
opt-in.card
|
Opt-in · Compact Card, Tracy Harris Co | 1.5 KB | HTML CSS Open → |
opt-in.showcase
|
Opt-in, Showcase | 4.8 KB | HTML CSS Open → |
opt-in.split
|
Opt-in · Split + Portrait, Tracy Harris Co | 1.8 KB | HTML CSS Open → |
Podcast Card
3 variantsPodcast episode cards and lineup blocks.
Post Grid
3 variantsBlog post feeds, journal / article list layouts.
Pricing
7 variantsPricing tables and payment option blocks.
| Copy name | Title | Size | |
|---|---|---|---|
pricing.compact-single-polished
|
Pricing · Compact single (polished) | 4.3 KB | HTML CSS Open → |
pricing.compact-single
|
Pricing · Compact single, Tracy Harris Co | 1.7 KB | HTML CSS Open → |
pricing.ffb-side-by-side-polished
|
Pricing · FFB side-by-side (polished) | 6.1 KB | HTML CSS Open → |
pricing.ffb-side-by-side
|
Pricing · FFB side-by-side, Tracy Harris Co | 2.8 KB | HTML CSS Open → |
pricing.ffm-dark-premium-polished
|
Pricing · FFM dark premium (polished) | 5.5 KB | HTML CSS Open → |
pricing.ffm-dark-premium
|
Pricing · FFM dark premium, Tracy Harris Co | 2.7 KB | HTML CSS Open → |
pricing.showcase
|
Pricing, Showcase | 6.4 KB | HTML CSS Open → |
Product Callout
9 variantsInline callouts pointing to FFB or FFM.
| Copy name | Title | Size | |
|---|---|---|---|
product-callout.bento-elite-polished
|
Product Callout · Bento Elite (polished) | 11.5 KB | HTML CSS Open → |
product-callout.bento-elite
|
Product Callout · Bento Elite, Tracy Harris Co | 8.3 KB | HTML CSS Open → |
product-callout.bento-ffb-polished
|
Product Callout · Bento FFB (polished) | 12.0 KB | HTML CSS Open → |
product-callout.bento-ffb
|
Product Callout · Bento FFB, Tracy Harris Co | 9.2 KB | HTML CSS Open → |
product-callout.clearer-polished
|
Product Callout · Clearer Bento (polished) | 14.1 KB | HTML CSS Open → |
product-callout.clearer
|
Product Callout · Clearer Bento, Tracy Harris Co | 10.3 KB | HTML CSS Open → |
product-callout.editorial-polished
|
Product Callout · Editorial (polished) | 14.0 KB | HTML CSS Open → |
product-callout.editorial
|
Product Callout · Editorial, Tracy Harris Co | 9.9 KB | HTML CSS Open → |
product-callout.showcase
|
Product Callout, Tracy Harris Co | 35.3 KB | HTML CSS Open → |
Programs Grid
3 variantsCards for multiple programs, tiers, or offerings.
Soft Upsell
1 variantGentle upsell blocks that feel like value, not push.
Testimonials
11 variantsMember story cards and quote blocks.
| Copy name | Title | Size | |
|---|---|---|---|
testimonials.columns-marquee
|
Testimonials · Columns Marquee, Tracy Harris Co | 7.8 KB | HTML CSS Open → |
testimonials.editorial-centered-polished
|
Testimonials · Editorial Centered (polished) | 4.4 KB | HTML CSS Open → |
testimonials.editorial-centered
|
Testimonials · Editorial Centered, Tracy Harris Co | 1.6 KB | HTML CSS Open → |
testimonials.featured-trio-polished
|
Testimonials · Featured Trio (polished) | 5.1 KB | HTML CSS Open → |
testimonials.featured-trio
|
Testimonials · Featured Trio, Tracy Harris Co | 2.6 KB | HTML CSS Open → |
testimonials.real-results-polished
|
Testimonials · Real Results (polished) | 5.1 KB | HTML CSS Open → |
testimonials.real-results
|
Testimonials · Real Results, Tracy Harris Co | 1.8 KB | HTML CSS Open → |
testimonials.showcase
|
Testimonials, Showcase | 19.5 KB | HTML CSS Open → |
testimonials.single-hero-polished
|
Testimonials · Single Hero (polished) | 4.6 KB | HTML CSS Open → |
testimonials.single-hero
|
Testimonials · Single Hero, Tracy Harris Co | 1.7 KB | HTML CSS Open → |
testimonials.wall
|
Testimonials · Masonry Wall, Tracy Harris Co | 6.3 KB | HTML CSS Open → |
Why Block
3 variantsThe "why it works" explainer blocks.
Tracy Harris Co Brand Kit · generated 2026-06-11