Domain

CallToActionSection

Focused conversion band with a short headline, supporting copy, and primary/secondary action buttons.

import { CallToActionSection } from '@lostgradient/cinder/call-to-action-section';
marketingctaconversion
01

Overview

Renders a focused call-to-action section with a primary button and optional secondary action.

Usage

svelte 
<script lang="ts">
  import CallToActionSection from '@lostgradient/cinder/call-to-action-section';
</script>

<CallToActionSection title="Ready to get started?" primaryActionLabel="Start free trial" />
Live preview
02

When to use

Use when
  • Inserting a repeated “ready to get started?” conversion section between page segments.
  • Prompting sign-up or demo actions after readers consume feature or testimonial content.
Avoid when
03

Examples

CallToActionSection

CallToActionSection with accent tone and primary/secondary conversion actions.

04

Props

Props for call-to-action-section
Name Type Default Required Bindable Description
as 'section' | 'div' 'section' Wrapper element tag.
title text req Main CTA title.
description text Optional supporting copy.
primaryActionLabel text req Label for the primary call-to-action button.
secondaryActionLabel text Optional label for a secondary action button.
onPrimaryClick () => void Primary action click callback.
onSecondaryClick () => void Secondary action click callback.
align 'start' | 'center' 'center' Content alignment.
tone 'default' | 'accent' 'default' Visual tone.
maxWidth 'prose' | 'narrow' | 'wide' | 'full' 'wide' Max width token forwarded to Container.
children snippet Optional supplemental content below action buttons.