All componentsdisplay

CTA Band

Ready to try deepmoon?

Install the theme and start composing.

Ship your next release faster

Every component is a single install away.

Have questions?

Talk to the team before you commit.

Installation

$ npx shadcn@latest add https://deepmoon.dev/r/cta-band.json

Props

CtaBandProps

Prop	Type	Required
headline	React.ReactNode	Yes
subtext	React.ReactNode	No
action	React.ReactNode	No
variant	CtaBandVariant	No

Code

cta-band.tsx

import * as React from "react";

import { cn } from "@/lib/utils";

export type CtaBandVariant = "default" | "primary" | "secondary";

export interface CtaBandProps extends React.ComponentPropsWithoutRef<"div"> {
  headline: React.ReactNode;
  subtext?: React.ReactNode;
  action?: React.ReactNode;
  variant?: CtaBandVariant;
}

const variantClass: Record<CtaBandVariant, string> = {
  default: "border border-border bg-card text-card-foreground",
  primary: "bg-primary text-primary-foreground",
  secondary: "bg-secondary text-secondary-foreground",
};

export function CtaBand({ headline, subtext, action, variant = "default", className, ...props }: CtaBandProps) {
  return (
    <div
      className={cn(
        "flex flex-col items-center gap-4 rounded-xl px-6 py-12 text-center sm:flex-row sm:justify-between sm:text-left",
        variantClass[variant],
        className,
      )}
      {...props}
    >
      <div className="flex flex-col gap-1">
        <h2 className="text-xl font-semibold">{headline}</h2>
        {subtext ? (
          <p className={cn("text-sm", variant === "default" ? "text-muted-foreground" : "opacity-80")}>{subtext}</p>
        ) : null}
      </div>
      {action ? <div className="shrink-0">{action}</div> : null}
    </div>
  );
}