CTA Section
A tinted, centered call-to-action band with a title, optional subtitle, and an Actions slot for primary and secondary buttons. Part of the Splash Kit.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <CTASection />
Tested
Tier 1 · Render + props
all components → Render Behavior A11y Keyboard Scale E2E
4 tests across 1 file. Auto-generated from the test suite.
When to Use
- The closing call-to-action band of a landing or marketing page
- "Ready to get started?" prompts before the footer
- Newsletter or sign-up nudges that need visual separation from the surrounding content
Ready to build with Lumeo?
Install the package and ship your first component in minutes.
Join the newsletter
Monthly updates on new components and releases. No spam.
Start shipping today
Use TitleSlot when you need custom title markup.
API Reference
CTASection
| Prop | Type | Default | Description |
|---|---|---|---|
| Title | string? | — | The band's plain-text heading, rendered as an h2 and used to name the section landmark. Ignored when TitleSlot is set. |
| TitleSlot | RenderFragment? | — | Custom heading markup, rendered instead of/in addition to Title for callers that need rich heading content. |
| Subtitle | string? | — | Supporting text rendered below the title. |
| Actions | RenderFragment? | — | The call-to-action buttons, centered and wrapped below the title/subtitle. |
| Class | string? | — | Additional CSS classes merged onto the root section element. |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes splatted onto the root section element. |
Related Components
- Hero — Opening hero band for the top of the page
- Feature Grid — Feature highlights section
- Button — Used inside the Actions slot