[Editor Demo] Variant Matrix

Variant coverage guide

This route intentionally groups multiple variants of the same block family on one page. Open it in the editor and public site side by side to compare spacing, typography, shell treatment, and interactive states.

Hero / center

Centered hero variant with both actions

Use this when the content should stay visually centered and balanced.

Open media matrix Open grid matrix

Hero / split

Split hero variant with visual weight on one side

This variant is useful when the route needs more directional composition.

Open layout utility matrix

Hero / minimal

Minimal hero variant for lighter route starts

This keeps framing smaller so the route can move quickly into supporting content.

Open landing mix

Rich text / default

Default rich text is the neutral editorial lane. It works as the baseline for prose and mixed body content.

Rich text / narrow

Narrow rich text is useful when the layout wants a more controlled reading measure.

Rich text / lead

Lead rich text is better for opener copy, section framing, or content that needs stronger hierarchy.

CTA / solid

Solid CTA variant

Use the solid treatment when the route needs the strongest conversion emphasis.

Open pricing demo Open FAQ pairing post

CTA / outline

Outline CTA variant

Outline is a lighter prompt that still reads clearly against calmer sections.

Open docs hero

CTA / banner

Banner CTA variant

Banner uses a stronger container treatment and background media to stage a more promotional surface.

Open reusable sections Open product comparison

FAQ / accordion

Why group variants on one page?

Because editors can inspect the same family without losing context between routes.

What should I compare first?

Start with spacing, heading scale, action styling, and how each shell handles background treatment.

FAQ / list

Does list feel more static?

Yes. It keeps all answers visible and is better when every note should remain on screen.

Does accordion feel more interactive?

Yes. It is better when the section should stay compact until readers expand details.

This page is a direct variant matrix for hero, rich-text, CTA, and FAQ blocks so editors can compare each enum choice against public output.