Library · Content Sections

The Plan / Standard

Three-step plan band — heading + accent pill CTA left, numbered steps with rule-underlined numerals right. Numerals are CSS counters. Tone via the shared contract.

Figma: The Plan / Standard ↗ View Elementor template in 8020 ↗

Live preview — edit theme bottom-right

---
import ThePlanStandard from "../components/figma/ThePlanStandard.astro";

const steps = [
  "Contact us today to schedule a consultation.",
  "We'll help shape the right strategy and marketing plan to get you the best possible result.",
  "Rest easy — we'll handle every detail of the sale.",
];
---
<ThePlanStandard
  title="Get started with Company XYZ"
  steps={steps}
  ctaLabel="Enquire Now"
  ctaUrl="#"
  tone="base-200"
/>

Props

Name	Type	Required	Description
`title`	`string`	Yes	Section heading (left column)
`steps`	`string[]`	Yes	Step descriptions, rendered as numbered columns (design shows 3)
`ctaLabel`	`string`	—	Accent pill CTA label
`ctaUrl`	`string`	—
`level`	`'h2' \| 'h3'`	—	Semantic heading level (default: 'h2')
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral"`	—	Background tone — the Figma colour-variant axis

Example with all props

<ThePlanStandard
  title="Get started with Company XYZ"
  steps={[
    "Contact us today to schedule a consultation.",
    "We'll shape the right strategy to get you the best result.",
    "Rest easy — we'll handle every detail of the sale.",
  ]}
  ctaLabel="Enquire Now"
  ctaUrl="/contact"
  tone="base-200"
/>