Skip to content
DOL Studio

CTASection

Design: extension Code: Code only landingcta

Live preview

Ready to start?

Plain tone · left align

Enable AI-powered learning today. Sign up and get 14 days free.

Promo

Brand tone · centered

Up to 40% off Premium until end of month.

Dark tone

For dramatic conversion sections

Use sparsely; high contrast for moments where attention matters.

Import & files

Import
import { CTASection } from "@/components/ui/CTASection";
Source file
components/ui/CTASection.tsx

Spec

Spec Props · Usage

Props

Prop Type Default Description
title string - —
description string - —
primaryCta { label, onClick } - —
secondaryCta { label, onClick } - —
theme 'brand' | 'neutral' | 'dark' 'brand' —

Usage

Max 1 per page. Brand-theme CTA consumes the 'brand accent' budget - pair with neutral page body.

Figma note: Playground composition pattern - not a single Figma component category. See Playground source.

Examples

Examples 2
  • Brand CTA banner (scaled)
  • Neutral CTA (scaled)

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# CTASection
Domain: general · Category: layout
Design: extension · Code: code-only


## Description
Full-width call-to-action banner. Title + description + 1 primary + 1 secondary button. Spans a page section.


## Import
```ts
import { CTASection } from "@/components/ui/CTASection";
```
Source: `components/ui/CTASection.tsx`


## Props (5)
| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | - |  |
| `description` | `string` | - |  |
| `primaryCta` | `{ label, onClick }` | - |  |
| `secondaryCta` | `{ label, onClick }` | - |  |
| `theme` | `'brand' | 'neutral' | 'dark'` | 'brand' |  |


## Usage
Max 1 per page. Brand-theme CTA consumes the 'brand accent' budget - pair with neutral page body.


## Examples
- **Brand CTA banner (scaled)**
- **Neutral CTA (scaled)**

Related

  • FeatureCard

    Code only
  • M
    audio

    Media

    Design only

  • Mockup UI (Status bar, Indicator, Browser)

    Coded
  • Section title

    Collapse

    Coded
  • Bạn đã xem hết

    Footer

    Coded

  • Card

    Code only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).