CTAs

Primary call-to-action band

A full-bleed band in the brand colour with two buttons. The palette is re-pointed so the outline button stays legible.

2 components19 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 CtaBandPrimary() {
  return (
    <CTA
      background="primary"
      title="Start with a Button and see how far it goes"
      description="One npm install and one stylesheet import. There is no configuration step."
      actions={
        <>
          <Button size="lg">Install the package</Button>
          <Button size="lg" variant="outline">
            Browse components
          </Button>
        </>
      }
    />
  )
}
← All 62 blocks