CTA Headline

The sentence is yours

CtaHeadline is the link and the type; CtaHeadlineArrow only marks where the arrow interrupts the copy. Writing it as two parts is what lets the arrow sit inside the line ("Accelerate your firm → with Rogo") rather than trailing off the end of it.

import { CtaHeadline, CtaHeadlineArrow } from "@rogo-technologies/brand/cta-headline";

<CtaHeadline asChild className="text-center">
  <Link href="/demo">
    Accelerate your firm <CtaHeadlineArrow /> with Rogo
  </Link>
</CtaHeadline>;

The arrow is aria-hidden, so the link is announced as "Accelerate your firm with Rogo". Keep the spaces either side of it in the copy, since they are the gap you see.

It brings its own entrance

The line rises and fades in the first time it is scrolled to, and the arrow lands a beat after the words either side of it. Don't wrap it in the site's Reveal: both animate opacity and would fight over it.

The entrance is an IntersectionObserver and CSS transitions rather than a motion library, because this package is consumed by apps on two different motion runtimes. With prefers-reduced-motion: reduce there is no start state at all: the line is simply present.

Hover moves the arrow

Hovering anywhere on the line nudges the arrow right by a share of its own width, so the gesture is the same size at every type size. Keyboard focus does the same thing.

Sizes

lg is fluid rather than stepped: it holds one line on a wide screen and wraps to two on a phone, where the scale's 92px would leave two words to a line. Like the hero, it outgrows the type scale, so it takes the display face and tracking from the tokens and sets its own size.

It follows the text colour

The disc behind the arrow is tinted from currentColor, so it is a light grey under dark text and a light wash under white text on a dark band. Set the colour on the root and the arrow follows. There is no separate variant to keep in step.

Props

CtaHeadline

Renders an <a>; pass asChild to render a framework Link instead, keeping the styling. Anything else is forwarded to the element.

CtaHeadlineArrow

Takes className and any other <span> attribute. Everything about it is sized in em, so it follows whatever size the line is set at.