CTAs

Quiet call to action

A muted inset card with a single link-style action, for pages where a loud band would be out of place.

2 components15 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 CtaMutedBordered() {
  return (
    <CTA
      inset
      layout="split"
      background="muted"
      padding="md"
      title="Still reading?"
      description="The docs are shorter than this page. Start with the quick start."
      actions={<Button variant="link">Quick start →</Button>}
    />
  )
}
← All 62 blocks