Skip to content
Neat LabsJoin the waitlist

Call-to-action band

Full-width band with one sentence, one line of support, and one action. Accent or quiet surface tone.

id cta-band · revision 48a6cab1e6ab · catalogue 0.1.0

Preview

Every token this component reads is set by the style, and every font is loaded or a system font.

Desktop, 1280px, lightOpen alone
Phone, 390px, lightOpen alone
Desktop, 1280px, darkOpen alone
Phone, 390px, darkOpen alone

Hover and keyboard focus

The component's own hover and focus styles, switched on for every link and button at once so you can see them without a mouse. In the previews above they work as usual.

Hover, desktop, lightOpen alone
Keyboard focus, desktop, lightOpen alone

Copy it

These two files are exactly what the previews above render. The MCP tool get_component returns the same files.

  1. Save CtaBand.tsx with your components and styles/neat-paper.css with your styles.
  2. Import styles/neat-paper.css once, after @import "tailwindcss" in your global stylesheet.
  3. Make sure Tailwind scans the folder that holds the component.
  4. For dark mode, set data-theme="dark" on the <html> element.
  5. Add <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],600&display=swap"> to the document head.
components/CtaBand.tsx
export interface CtaBandProps {
  title?: string;
  body?: string;
  action?: { label: string; href: string };
  /** accent fills the band with the accent color; surface keeps it quiet. */
  tone?: "accent" | "surface";
}

const focusRing =
  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--nl-focus)]";

/**
 * A full-width band with one sentence and one action. Use the accent tone once
 * per page at most.
 */
export function CtaBand({
  title = "Your next release note is already half written.",
  body = "Connect a repository and see the first draft in a few minutes.",
  action = { label: "Start a trial", href: "#start" },
  tone = "accent",
}: CtaBandProps) {
  const accent = tone === "accent";
  return (
    <section
      className={`px-6 py-[var(--nl-section-y)] font-[family-name:var(--nl-font-sans)] ${
        accent
          ? "bg-[color:var(--nl-accent)] text-[color:var(--nl-accent-ink)]"
          : "border-y border-[color:var(--nl-line)] bg-[color:var(--nl-surface)] text-[color:var(--nl-ink)]"
      }`}
    >
      <div className="mx-auto flex max-w-6xl flex-col items-start justify-between gap-8 md:flex-row md:items-end">
        <div className="max-w-2xl">
          <h2 className="text-balance font-[family-name:var(--nl-font-display)] text-3xl font-semibold sm:text-4xl">{title}</h2>
          <p className={`mt-4 text-lg ${accent ? "opacity-90" : "text-[color:var(--nl-muted)]"}`}>{body}</p>
        </div>
        <a
          href={action.href}
          className={`shrink-0 rounded-[var(--nl-radius)] px-6 py-3 font-medium ${
            accent
              ? "bg-[color:var(--nl-accent-ink)] text-[color:var(--nl-accent)] hover:opacity-90"
              : "bg-[color:var(--nl-accent)] text-[color:var(--nl-accent-ink)] hover:opacity-90"
          } ${focusRing}`}
        >
          {action.label}
        </a>
      </div>
    </section>
  );
}
styles/neat-paper.css
/* Neat Labs theme "paper" (revision 9e029aa69c45) for cta-band (revision 48a6cab1e6ab), catalogue 0.1.0. */
:root {
  --nl-surface: #FFFDF8;
  --nl-ink: #1F1B16;
  --nl-muted: #5E554A;
  --nl-line: #D9D0C1;
  --nl-accent: #B4462C;
  --nl-accent-ink: #FFFFFF;
  --nl-focus: #1F5FBF;
  --nl-font-display: "Fraunces", ui-serif, Georgia, serif;
  --nl-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --nl-radius: 6px;
  --nl-section-y: 96px;
}

[data-theme="dark"] {
  --nl-surface: #211D18;
  --nl-ink: #F2ECE1;
  --nl-muted: #B3A999;
  --nl-line: #3A342C;
  --nl-accent: #E07A5F;
  --nl-accent-ink: #1A0F0B;
  --nl-focus: #8AB4F8;
}
MCP tool call
{
  "name": "get_component",
  "arguments": {
    "id": "cta-band",
    "style": "paper"
  }
}

In every style