CTAs

Inset call-to-action card

The same call to action as a rounded card inside the container, which sits better between two white sections.

2 components18 linesServer safeSource on GitHub

Live demo

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

What it uses

ButtonCTA

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 CtaInsetCard() {
  return (
    <CTA
      inset
      background="primary"
      eyebrow="Ready when you are"
      title="Ship your first page this afternoon"
      description="The templates are free, the components are typed, and the docs assume you are busy."
      actions={
        <Button size="lg" variant="outline">
          Get started
        </Button>
      }
    />
  )
}
← All 62 blocks