Eyebrow

A small label sitting above a heading, optionally paired with a call to action. 

import { Eyebrow } from "@sanity/sanity-id/components/eyebrow"

Props

Eyebrow props
PropTypeDescription
childrenReactNode

Label text content

classNamestring

Additional CSS classes

cta{ as?: E; text: string; href?: string; arrow?: LinkCTAProps<E>["arrow"] }

Optional CTA link rendered alongside the label

Usage

Eyebrow
Eyebrow
With link CTA
1import { Eyebrow } from "@sanity/sanity-id/components/eyebrow"
2
3export default () => {
4        return (
5          <div className="flex flex-col gap-y-32">
6            <Eyebrow>Eyebrow</Eyebrow>
7            <Eyebrow cta={{ text: "With link CTA", href: "#eyebrow" }}>
8              Eyebrow
9            </Eyebrow>
10          </div>
11        )
12      }