v2.3CTA

Multi-Option CTA Cluster

Equal-weight choice architecture with 2 to 4 options, for audiences with genuinely different paths (developer vs business buyer, individual vs team). Composes PrimaryButtonCTA per option.

Read the pattern View source on GitHub

Live preview

Rendered with real component code. Each example demonstrates a documented variant.

Three options

Developer

API docs, SDKs, and self-serve setup.

Business

Talk to sales and get a custom quote.

Startup

Apply for the startup program.

With eyebrow and headline

Choose your path

Different solutions for different teams

Developer

Self-serve, API-first, and open integrations.

Business

White-glove onboarding and dedicated support.

Startup

Discounted plan for early-stage companies.

Stacked layout

Start free trial

No credit card required. Full access for 14 days.

Book a demo

See the platform with a Velorum product specialist.

React props

Configure the component via props in React or via attributes in HTML.

Prop	Type	Default	Description
options	OptionItem[]	required	2 to 4 options. Each item has label, href, and optional description, variant, and icon.
options[].label	string	required	Button label text.
options[].href	string	required	Destination URL for the option button.
options[].description	string	undefined	Short sentence below the button clarifying the path.
options[].variant	"solid" \| "outlined"	"solid"	Visual treatment passed to PrimaryButtonCTA. Mixing variants introduces hierarchy deliberately.
options[].icon	"arrow-right" \| "chevron-right"	undefined	Trailing icon passed to PrimaryButtonCTA.
layout	"horizontal" \| "stacked"	"horizontal"	Horizontal arranges options in a row on wide screens and stacks on narrow screens. Stacked arranges options in a column at all viewports.
eyebrow	string	undefined	Short label above the headline, useful for segment framing.
headline	string	undefined	Section heading above the option row.
className	string	undefined	Extra class appended to the root section element.

HTML usage

The HTML variant uses the same shared styles and class names. Drop into any stack.

<link rel="stylesheet" href="path/to/primary-button-cta/styles.css">
<link rel="stylesheet" href="path/to/multi-option-cta-cluster/styles.css">

<!-- Horizontal layout (default) with 3 options -->
<section class="moc moc--horizontal">
  <div class="moc__options">
    <div class="moc__option">
      <a class="pbc pbc--solid pbc--rounded" href="/developer">Developer</a>
      <p class="moc__option-description">API docs, SDKs, and self-serve setup.</p>
    </div>
    <div class="moc__option">
      <a class="pbc pbc--solid pbc--rounded" href="/business">Business</a>
      <p class="moc__option-description">Talk to sales and get a custom quote.</p>
    </div>
    <div class="moc__option">
      <a class="pbc pbc--solid pbc--rounded" href="/startup">Startup</a>
      <p class="moc__option-description">Apply for the startup program.</p>
    </div>
  </div>
</section>

<!-- With eyebrow and headline -->
<section class="moc moc--horizontal">
  <p class="moc__eyebrow">Choose your path</p>
  <h2 class="moc__headline">Different solutions for different teams</h2>
  <div class="moc__options">
    <!-- option divs -->
  </div>
</section>

<!-- Stacked layout -->
<section class="moc moc--stacked">
  <div class="moc__options">
    <div class="moc__option">
      <a class="pbc pbc--solid pbc--rounded" href="/trial">Start free trial</a>
      <p class="moc__option-description">No credit card required.</p>
    </div>
    <div class="moc__option">
      <a class="pbc pbc--outlined pbc--rounded" href="/demo">Book a demo</a>
      <p class="moc__option-description">See the platform with a product specialist.</p>
    </div>
  </div>
</section>

Customization

Override these CSS custom properties to integrate the component into your brand.

.moc {
  --moc-gap: 1rem;
  --moc-option-min-width: 10rem;
  --moc-eyebrow-color: var(--brand-accent, #1e5fcf);
  --moc-eyebrow-size: 0.8125rem;
  --moc-headline-color: var(--brand-ink, #102542);
  --moc-headline-size: 1.75rem;
  --moc-description-color: var(--brand-muted, #4b5563);
  --moc-description-size: 0.9375rem;
}