CTAs

Split call to action

Copy on the start edge, actions on the end edge, on one line once there is room. For the foot of a long page.

2 components18 linesServer safeSource on GitHub

Live demo

Full width · the frame has its own viewport, so the breakpoints are real

What it uses

Button CTA

Imports

import { Button, CTA } from '@the_viveksingh/vivek-ui'

The block

This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.

import { Button, CTA } from '@the_viveksingh/vivek-ui'

export default function CtaSplit() {
  return (
    <CTA
      layout="split"
      background="muted"
      title="Questions before you commit?"
      description="Book twenty minutes with an engineer, not a salesperson."
      actions={
        <>
          <Button>Book a call</Button>
          <Button variant="ghost">Email us</Button>
        </>
      }
    />
  )
}

← All 62 blocks