SectionBlock Playground

Experiment with different configurations in real-time

Layout

Padding

Container

Full Bleed

Visual

Background

Alignment

Title Size

Content

Show Title

Show Subtitle

Show CTA 1

Show CTA 2

Content Slot

Generated Code

<SectionBlock
  title="Welcome to Ramp"
  subtitle="Modern design system — pick three hues, get an entire OKLCH-based design language"
  cta1={{ text: "Get Started", variant: "default" }}
  cta2={{ text: "Learn More", variant: "outline" }}
></SectionBlock>

Live Preview

Changes update in real-time

Welcome to Ramp

Modern design system — pick three hues, get an entire OKLCH-based design language