Skip to main content
CTA blocks are conversion-focused banner sections placed at the end of a page or between content sections. They combine a compelling headline with action buttons and optional social proof elements such as avatar groups, star ratings, and testimonial snippets.

​
Variants

cta-1

Centered layout with avatar group + star rating social proof above the headline and two large CTA buttons.

cta-2

Centered layout with a single prominent CTA button, no social proof.

cta-3

Split layout: headline on the left, action buttons on the right.

cta-4

Centered layout with a feature checklist beneath the headline.

cta-5

Centered layout with a logo cloud strip beneath the buttons.

cta-6

Floating card variant with a background color fill and centered content.

cta-7

Split layout with an embedded image or media on one side.

cta-8

Banner strip variant: compact single-row layout with inline CTA button.

​
Sanity _type names

cta-1.astro  →  _type: "cta-1"
cta-2.astro  →  _type: "cta-2"
...through cta-8

​
Props interface

cta-1.astro is the canonical reference: 
// astro-app/src/components/blocks/cta-1.astro
interface Props {
  class?: string
  id?: string
  links?: {
    icon?: string
    text?: string
    href?: string
    target?: string
  }[]
  item?: {
    images?: {
      src: string
      alt: string
    }[]
    rating?: number
    description?: string
  }
}
​
class
string
Additional CSS classes forwarded to the root <Section> element.
​
id
string
HTML id attribute for anchor links.
​
links
object[]
CTA buttons rendered centered in the section. The first item uses the default button variant at size="lg"; subsequent items use secondary. Each item accepts icon, text, href, and target.
​
item
object
Social proof composite element rendered above the headline. Contains:
  • images — array of avatar objects (src, alt), displayed as a stacked avatar group with a ring border
  • rating — numeric star rating (1–5) rendered by the <Rating> primitive
  • description — short trust copy beneath the rating (e.g. "Trusted by 10,000+ customers")
Headline and subheading copy are passed through the default <slot /> inside <SectionProse>.

​
Storybook story

// astro-app/src/components/blocks/cta-1.stories.ts
export const Default = {
  args: {
    links: [
      { text: "Get Started", href: "#" },
      { text: "Learn More", href: "#" }
    ],
    item: {
      images: [
        { src: "https://placehold.co/44x44", alt: "User 1" },
        { src: "https://placehold.co/44x44", alt: "User 2" },
        { src: "https://placehold.co/44x44", alt: "User 3" }
      ],
      rating: 5,
      description: "Trusted by 10,000+ customers"
    }
  }
}

​
Component internals

cta-1.astro uses the Section primitive with variant="floating" to produce the card-like appearance with padding and a border: 
<Section variant="floating">
  <SectionContent class="items-center">
    <Item class="p-0">
      <ItemMedia class="-space-x-5">
        {item?.images?.map(image => (
          <Avatar class="ring-background size-11 ring">
            <AvatarImage {...image} />
          </Avatar>
        ))}
      </ItemMedia>
      <ItemContent class="mt-1">
        <Rating rating={item?.rating} />
        <ItemDescription>{item?.description}</ItemDescription>
      </ItemContent>
    </Item>
    <SectionProse class="text-center" size="lg">
      <slot />
    </SectionProse>
    <SectionActions class="justify-center">
      {links?.map(({ icon, text, ...link }, i) => (
        <Button variant={i === 0 ? "default" : "secondary"} size="lg" {...link}>
          {icon && <Icon name={icon} />}
          {text}
        </Button>
      ))}
    </SectionActions>
  </SectionContent>
</Section>

​
Installation

npx shadcn@latest add @fulldev/cta-1
Repeat for each variant (cta-2 through cta-8) as needed.
All 8 CTA variants are pre-installed in the repo. Sanity schema + GROQ wiring is tracked in Stories 2.4–2.8. The item.rating field maps to a Sanity number field clamped to 1–5.

Build docs developers (and LLMs) love

Get started for freeTalk to us