Sections
Careers header
View in FigmaCareers page header: title, section links, media and a presentational search field, all flat CMS-serializable data.
Install
npx shadcn@latest add @alix/careersHeaderPreview
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.
<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.
<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.
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
| Prop | Type | Default | Description |
|---|---|---|---|
| media.type | "image" | "video" | "image" | Media discriminant. Image uses `src`, `alt`, and optional loading/crop fields; video uses `src`, poster, and playback fields. |
| title | string | – | 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. |
| search | presentational | – | The search input is static by design. For live search, compose a lower-layer combobox with your data source. |
| escape hatch | compose lower layer | – | For optimized media or functional search, compose Grid, renderMedia, SectionLink, and your own search component directly. |