// Generated by scripts/generate-showcase.mjs. Do not edit directly. page CTASectionDetail { layout = "showcase" state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? "" state playground_title = ctx.url.searchParams.get("pg_title") ?? "CTASection example" state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default ctasection for a modern application." state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_align = ctx.url.searchParams.get("pg_align") ?? "start" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid" state playground_primaryLabel = ctx.url.searchParams.get("pg_primaryLabel") ?? "CTASection" state playground_primaryHref = ctx.url.searchParams.get("pg_primaryHref") ?? "#ctasection-demo" state playground_primaryIcon = ctx.url.searchParams.get("pg_primaryIcon") ?? "" state playground_secondaryLabel = ctx.url.searchParams.get("pg_secondaryLabel") ?? "CTASection" state playground_secondaryHref = ctx.url.searchParams.get("pg_secondaryHref") ?? "#ctasection-demo" state playground_secondaryIcon = ctx.url.searchParams.get("pg_secondaryIcon") ?? "" state playground_backgroundImage = ctx.url.searchParams.get("pg_backgroundImage") ?? "" state playground_visualImage = ctx.url.searchParams.get("pg_visualImage") ?? "" state playground_visualAlt = ctx.url.searchParams.get("pg_visualAlt") ?? "" state playground_visualIcon = ctx.url.searchParams.get("pg_visualIcon") ?? "" state playground_visualTitle = ctx.url.searchParams.get("pg_visualTitle") ?? "CTASection example" state playground_visualDescription = ctx.url.searchParams.get("pg_visualDescription") ?? "A polished default ctasection for a modern application." state playground_visualItems = JSON.parse(ctx.url.searchParams.get("pg_visualItems") ?? "[{\"id\":\"ctasection-0-1\",\"key\":\"ctasection-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#ctasection-demo\",\"actionHref\":\"#ctasection-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"ctasection-0-2\",\"key\":\"ctasection-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#ctasection-demo\",\"actionHref\":\"#ctasection-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") state playground_visualPosition = ctx.url.searchParams.get("pg_visualPosition") ?? "right" state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl" state playground_fullBleed = (ctx.url.searchParams.get("pg_fullBleed") ?? "false") === "true" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "CTASection" description = "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content." } view {
Marketing component

CTASection

Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.

25 props4 slots0 outputsTheme readyResponsive
Interactive playground

Configure CTASection

Change any prop and inspect the server-rendered component immediately.

Live preview
Composable visual panel

Add a screenshot, product preview, media block, chart, form, or illustration.

Component code
<CTASection
  title="CTASection example"
  description="A polished default ctasection for a modern application."
  align="start"
  primaryLabel="CTASection"
  primaryHref="#ctasection-demo"
  secondaryLabel="CTASection"
  secondaryHref="#ctasection-demo"
  visualTitle="CTASection example"
  visualDescription="A polished default ctasection for a modern application."
  visualItems='[
    {
      "id": "ctasection-0-1",
      "key": "ctasection-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#ctasection-demo",
      "actionHref": "#ctasection-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "ctasection-0-2",
      "key": "ctasection-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#ctasection-demo",
      "actionHref": "#ctasection-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
  <div data-slot="visual">
    <div class="showcase-slot">visual slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</CTASection>
Component props25 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Split conversion CTA

Close a major page section with a clear action and supporting visual content.

01
Live preview
Composable visual panel

Add a screenshot, product preview, media block, chart, form, or illustration.

Component usage.wrn
<CTASection
  eyebrow="Ready to continue"
  title="Build public pages with reusable components"
  description="Keep application pages focused on content and business data while the shared UI package owns presentation."
  icon="icon-[lucide--rocket]"
  align="split"
  variant="gradient"
  primaryLabel="Use these components"
  primaryHref="#components"
  primaryIcon="icon-[lucide--blocks]"
  secondaryLabel="Back to home"
  secondaryHref="/"
  secondaryIcon="icon-[lucide--house]"
  visualTitle="CTASection example"
  visualDescription="A polished default ctasection for a modern application."
  visualItems='[
    {
      "id": "ctasection-0-1",
      "key": "ctasection-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#ctasection-demo",
      "actionHref": "#ctasection-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "ctasection-0-2",
      "key": "ctasection-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#ctasection-demo",
      "actionHref": "#ctasection-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  maxWidth="full">
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
  <div data-slot="visual">
    <div class="showcase-visual-panel">
      <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
      <strong>Composable visual panel</strong>
      <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
    </div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</CTASection>
Compact

Centered signup CTA

Use a focused centered CTA after pricing, guides, or product explanations.

02
Live preview
Component usage.wrn
<CTASection
  eyebrow="Get started"
  title="Create your first WRNexusJS page"
  description="Install the framework and compose your application with the component system."
  icon="icon-[lucide--arrow-right]"
  size="sm"
  primaryLabel="Read installation"
  primaryHref="/installation"
  secondaryLabel="Browse examples"
  secondaryHref="/blocks"
  visualTitle="Compact CTASection"
  visualDescription="A compact configuration for dashboards and dense product surfaces."
  visualItems='[
    {
      "id": "ctasection-1-1",
      "key": "ctasection-1-1",
      "value": "primary",
      "label": "Secondary workflow",
      "title": "Secondary workflow",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "A configurable sample message.",
      "href": "#ctasection-demo",
      "actionHref": "#ctasection-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 24,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "ctasection-1-2",
      "key": "ctasection-1-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "Another configurable message.",
      "href": "#ctasection-demo",
      "actionHref": "#ctasection-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 48,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
  <div data-slot="visual">
    <div class="showcase-slot">visual slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</CTASection>
Advanced

Full-bleed service CTA

Use an edge-to-edge surface for high-priority registration, service, or contact actions.

03
Live preview
Component usage.wrn
<CTASection
  eyebrow="Citizen account"
  title="Access services and track requests securely"
  description="Create an account to submit, track, and manage citizen-service requests."
  icon="icon-[lucide--trash-2]"
  align="left"
  size="lg"
  primaryLabel="Create account"
  primaryHref="#register"
  secondaryLabel="Sign in"
  secondaryHref="#sign-in"
  visualIcon="icon-[lucide--shield-check]"
  visualTitle="Secure public access"
  visualDescription="One account for requests, certificates, updates, and notifications."
  visualItems='[
    {
      "id": "ctasection-2-1",
      "key": "ctasection-2-1",
      "value": "primary",
      "label": "Advanced workflow",
      "title": "Advanced workflow",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "A configurable sample message.",
      "href": "#ctasection-demo",
      "actionHref": "#ctasection-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 32,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    },
    {
      "id": "ctasection-2-2",
      "key": "ctasection-2-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "Another configurable message.",
      "href": "#ctasection-demo",
      "actionHref": "#ctasection-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": true,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 64,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    }
  ]'
  maxWidth="full"
  fullBleed="true">
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
  <div data-slot="visual">
    <div class="showcase-slot">visual slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</CTASection>
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
eyebrowstring""No
titlestring"Ready to get started?"No
descriptionstring""No
iconstring""No
alignstring"center"No
sizestring"default"No
colorstring"primary"No
variantstring"solid"No
primaryLabelstring"Get started"No
primaryHrefstring"#"No
primaryIconstring""No
secondaryLabelstring""No
secondaryHrefstring""No
secondaryIconstring""No
backgroundImagestring""No
visualImagestring""No
visualAltstring""No
visualIconstring""No
visualTitlestring""No
visualDescriptionstring""No
visualItemsunknown[][]No
visualPositionstring"right"No
maxWidthstring"xl"No
fullBleedbooleanfalseNo
classstring""No
} }