Sections

Careers header

View in Figma

Careers page header — title, section links, media and a presentational search field, all flat CMS-serializable data.

Install

npx shadcn@latest add @alix/careersHeader

Preview

Join teams that move with urgency

Experienced hiresEarly careersLife at Alix

Usage

import CareersHeader, { type CareersHeaderProps } from "@/components/careersHeader";

const fromCMS: CareersHeaderProps = await getCareersHeader();

<CareersHeader {...fromCMS} />

<CareersHeader
  media={{ type: "image", src: "/media/grey-arc.svg", alt: "" }}
  title="Join teams that move with urgency"
  sectionLinks={{
    links: [
      { text: "Experienced hires", href: "/careers/experienced-hires" },
      { text: "Early careers", href: "/careers/early-careers" },
    ],
  }}
/>

Examples

01

A video brand panel

Swap the still for a muted, looping clip — the media discriminant flips to video, and a link can open its guide in a new tab.

Build a career on complex, high-stakes work

Experienced hiresEarly careers
<CareersHeader
  media={{
    type: "video",
    src: "/media/leadership-loop.mp4",
    poster: "/media/grey-arc.svg",
    autoPlay: true,
    muted: true,
    loop: true,
  }}
  title="Build a career on complex, high-stakes work"
  sectionLinks={{
    links: [
      { text: "Experienced hires", href: "/careers/experienced-hires" },
      { text: "Early careers", href: "/careers/early-careers", openInNewTab: true },
    ],
  }}
/>
02

A fuller set of section links

The link rail grows with the CMS list — five destinations still read as one stacked column under the title.

Join teams that move with urgency

Experienced hiresEarly careersLife at AlixHow we hireOpen roles
<CareersHeader
  media={{ type: "image", src: "/media/grey-arc.svg", alt: "" }}
  title="Join teams that move with urgency"
  sectionLinks={{
    links: [
      { text: "Experienced hires", href: "/careers/experienced-hires" },
      { text: "Early careers", href: "/careers/early-careers" },
      { text: "Life at Alix", href: "/careers/life-at-alix" },
      { text: "How we hire", href: "/careers/how-we-hire" },
      { text: "Open roles", href: "/careers/roles" },
    ],
  }}
/>
03

Opening a careers page

The header sits at the top of the page; the first content section — a text-and-media block — carries the story straight below it.

Join teams that move with urgency

Experienced hiresEarly careers

What it's like to work here

Small, senior teams take real ownership from day one, on engagements where the outcome matters.
<CareersHeader
  media={{ type: "image", src: "/media/grey-arc.svg", alt: "" }}
  title="Join teams that move with urgency"
  sectionLinks={{
    links: [
      { text: "Experienced hires", href: "/careers/experienced-hires" },
      { text: "Early careers", href: "/careers/early-careers" },
    ],
  }}
/>
<TextAndMedia
  textTileVariant="titleAndText"
  textTile={{
    bgColor: "sand",
    sectionTitle: {
      title: "What it's like to work here",
      description: "Small, senior teams take real ownership from day one.",
      align: "start",
    },
    buttonGroup: {},
  }}
  media={{ type: "image", src: "/article-placeholder.svg", alt: "" }}
  ratio="16/9"
  minHeight="md"
/>

When to use it

Use it for

  • The top of a careers landing page — one title, the brand media panel, and the rail of destinations the section splits into.
  • Routing candidates by track: experienced hires, early careers, and life-at-Alix links stacked under the title.
  • A resting-state search field for the visual design; wire live typeahead through the escape hatch when you need it.

Reach for something else

  • General page headers without a search field or link rail — use Hero for a full-bleed media stage.
  • A standalone link list elsewhere on the page — use SectionLink directly.
  • Working typeahead as a prop — the field is presentational; compose InputGroup with your own combobox and data source.

Props

PropTypeDefaultDescription
media.type"image" | "video""image"Media discriminant. Image uses `src`, `alt`, and optional loading/crop fields; video uses `src`, poster, and playback fields.
titlestring—The main careers header heading.
sectionLinks{ links: { text: ReactNode; href: string; openInNewTab?: boolean }[] }—SectionLink props — serializable link rows shown under the title. `openInNewTab` adds target and rel guards.
searchpresentational—The search input is static by design. For live search, compose a lower-layer combobox with your data source.
escape hatchcompose lower layer—For optimized media or functional search, compose Grid, renderMedia, SectionLink, and your own search component directly.

See also

Section linkText and media block