CTA sections

Centered call-to-action panel. Simple (light) or dark (indigo) variant.

Preview

Boost your productivity. Start using our app today.

Ship faster with the tools your team already loves.

Ready to dive in? Start your free trial today.

React preview

LiveView (HEEx)

alias DesignSystem.UI.{Buttons, CtaSections}

<CtaSections.cta_section
  title="Boost your productivity"
  subtitle="Ship faster"
>
  <:actions>
    <Buttons.button phx-click="signup">Get started</Buttons.button>
  </:actions>
</CtaSections.cta_section>

React (JSX)

import { CtaSection } from "../ui/index.mjs"

<CtaSection variant="dark" title="Ready to dive in?" actions={<Button>Get started</Button>} />