v2.1CTA

Hero Stack CTA

Primary button plus an optional secondary action (outlined button or text link). The standard B2B hero pattern. Composes PrimaryButtonCTA.

Read the pattern View source on GitHub

Live preview

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

Primary only

Get started

Primary plus outlined secondary

Start trial View pricing

Primary plus text-link secondary

React props

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

Prop	Type	Default	Description
primary	{ label: string; href?: string; variant?: "solid" \| "outlined"; icon?: "arrow-right" \| "chevron-right" }	required	Passed through to PrimaryButtonCTA as the main action
secondary	{ label: string; href?: string; type?: "outlined" \| "text-link" }	undefined	Optional secondary action. "outlined" renders a PrimaryButtonCTA with variant="outlined"; "text-link" renders a styled anchor
alignment	"horizontal" \| "stacked"	"horizontal"	Desktop layout direction. Both collapse to a column below 480px
className	string	undefined	Extra class applied to the root element

HTML usage

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

<!-- Both stylesheets are required -->
<link rel="stylesheet" href="path/to/primary-button-cta/styles.css">
<link rel="stylesheet" href="path/to/hero-stack-cta/styles.css">

<!-- Horizontal: solid primary + text-link secondary -->
<div class="hsc hsc--horizontal">
  <a class="pbc pbc--solid pbc--rounded" href="/signup">Get started</a>
  <a class="hsc__text-link" href="/demo">See how it works</a>
</div>

<!-- Horizontal: solid primary + outlined secondary -->
<div class="hsc hsc--horizontal">
  <a class="pbc pbc--solid pbc--rounded" href="/signup">Start free trial</a>
  <a class="pbc pbc--outlined pbc--rounded" href="/contact">Contact sales</a>
</div>

<!-- Stacked layout -->
<div class="hsc hsc--stacked">
  <a class="pbc pbc--solid pbc--rounded" href="/deploy">Deploy now</a>
  <a class="hsc__text-link" href="/docs">Read the docs</a>
</div>

Customization

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

.hsc {
  --hsc-gap: 1rem;
  --hsc-text-link-color: var(--brand-accent, #1e5fcf);
  --hsc-text-link-color-hover: color-mix(in srgb, var(--hsc-text-link-color) 80%, black);
  --hsc-text-link-font-size: 1rem;
  --hsc-text-link-font-weight: 500;
}