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

What this style doesn't cover

  • --nl-focus: Signal has no focus color. The package uses var(--nl-ink).
  • --nl-section-y: Signal has no section spacing. The package uses 96px.
  • dark mode: Signal has no dark mode. The package uses Light values in every mode.
  • Arial Black isn't loaded by this package. It shows only where the font is installed; elsewhere the stack falls back to "Helvetica Neue", Arial, sans-serif.
  • Helvetica Neue isn't loaded by this package. It shows only where the font is installed; elsewhere the stack falls back to Arial, sans-serif.
Desktop, 1280px, lightOpen alone
Phone, 390px, lightOpen alone

Signal has no dark mode, so only light is shown.

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-signal.css with your styles.
  2. Import styles/neat-signal.css once, after @import "tailwindcss" in your global stylesheet.
  3. Make sure Tailwind scans the folder that holds the component.
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-signal.css
/* Neat Labs theme "signal" (revision 5aa0ba0b4008) for cta-band (revision 48a6cab1e6ab), catalogue 0.1.0. */
:root {
  --nl-surface: #F4F4F0;
  --nl-ink: #0A0A0A;
  --nl-muted: #3F3F3F;
  --nl-line: #0A0A0A;
  --nl-accent: #FFD400;
  --nl-accent-ink: #0A0A0A;
  --nl-focus: var(--nl-ink); /* fallback: not part of the style */
  --nl-font-display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --nl-font-sans: "Helvetica Neue", Arial, sans-serif;
  --nl-radius: 0px;
  --nl-section-y: 96px; /* fallback: not part of the style */
}
MCP tool call
{
  "name": "get_component",
  "arguments": {
    "id": "cta-band",
    "style": "signal"
  }
}

In every style