Careers

Open roles with filters, culture, benefits, a full job page, the hiring process and an open application.

7 variants

Switch category

Job board

All open roles, filtered by team and location.

Installv1.0.0

aiw add @ai-website/careers

Brings along utils, kit, button, badge, icon, input, select, textarea, section, reveal

Usage

<Careers variant="job-board" title="…" jobs={[{ title, department, location, type, href }]} />

Source

Roles by team

Roles grouped under their team, each card with salary and a line about the job.

Open in Studio

Installv1.0.0

aiw add @ai-website/careers

Brings along utils, kit, button, badge, icon, input, select, textarea, section, reveal

Usage

<Careers variant="by-team" jobs={jobs} />

Source

Culture

The place in pictures, the values in three sentences, the company in four numbers.

Open in Studio

Installv1.0.0

aiw add @ai-website/careers

Brings along utils, kit, button, badge, icon, input, select, textarea, section, reveal

Usage

<Careers variant="culture" images={[{ image, caption }]} values={[{ title, text }]} stats={[{ value, label }]} />

Source

Benefits

What people get, in a calm grid with the most important point first.

Open in Studio

Installv1.0.0

aiw add @ai-website/careers

Brings along utils, kit, button, badge, icon, input, select, textarea, section, reveal

Usage

<Careers variant="benefits" perks={[{ icon, title, text }]} />

Source

Job detail

One role with facts at the side and an apply bar that stays at hand on phones.

Open in Studio

Installv1.0.0

aiw add @ai-website/careers

Brings along utils, kit, button, badge, icon, input, select, textarea, section, reveal

Usage

<Careers variant="job-detail" job={{ title, department, location, intro, sections, applyHref }} />

Source

Hiring process

Five steps from application to offer, with how long each one takes.

Open in Studio

Installv1.0.0

aiw add @ai-website/careers

Brings along utils, kit, button, badge, icon, input, select, textarea, section, reveal

Usage

<Careers variant="process" steps={[{ title, text, duration }]} totalDuration="three weeks" />

Source

Open application

For people who fit but not into a listed role, with a short form.

Open in Studio

Installv1.0.0

aiw add @ai-website/careers

Brings along utils, kit, button, badge, icon, input, select, textarea, section, reveal

Usage

<Careers variant="open-application" title="…" areas={["Engineering", …]} onSubmit={send} />

Source

Details

What Careers brings along, read from the registry and the source.

Area: Content
Variants: 7
Version: 1.0.0 · since 1.0.0
File: components/ui/careers.tsx
Brings along: utilskitbuttonbadgeicon input select textareasectionreveal
npm packages: None
Languages: English and German, 35 texts of its own
Studio: All 7 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The CareersProps interface from components/ui/careers.tsx, with the comments from the code.

variantoptional
CareersVariant
job-boardby-teamculturebenefitsjob-detailprocessopen-application
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
jobsoptional
CareersJob[]
job-board and by-team
perksoptional
CareersPerk[]
benefits
imagesoptional
CareersImage[]
culture: four or five pictures, the first is the large one
valuesoptional
CareersValue[]
culture
statsoptional
CareersStat[]
culture
stepsoptional
CareersStep[]
process
totalDurationoptional
string
process: the whole duration, e.g. "three weeks"
joboptional
CareersJobDetail
job-detail
areasoptional
string[]
open-application: options of the area select
pointsoptional
string[]
open-application: points next to the form
onSubmitoptional
(data: FormData) => void | Promise<void>
actionoptional
{ label: string; href: string }

Built-in texts

Careers writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 35 texts

Key	English	German
all	English All teams	German Alle Bereiche
allLocations	English All locations	German Alle Orte
location	English Location	German Ort
department	English Team	German Bereich
roles	English {n} open roles	German {n} offene Stellen
role	English {n} open role	German {n} offene Stelle
reset	English Reset filters	German Filter zurücksetzen
empty	English No open role matches these filters right now.	German Gerade passt keine offene Stelle zu diesen Filtern.
emptyHint	English Try another team or location, or send us an open application.	German Probier einen anderen Bereich oder Ort oder schick uns eine Initiativbewerbung.
isNew	English New	German Neu
filters	English Filter roles	German Stellen filtern
apply	English Apply now	German Jetzt bewerben
applyFor	English Apply for this role	German Auf diese Stelle bewerben
back	English All open roles	German Alle offenen Stellen
salary	English Salary	German Gehalt
type	English Type	German Art
start	English Start	German Start
posted	English Posted	German Veröffentlicht
share	English Copy link	German Link kopieren
copied	English Link copied	German Link kopiert
questions	English Questions about the role?	German Fragen zur Stelle?
total	English About {n} from first message to offer	German Etwa {n} von der ersten Nachricht bis zum Angebot
name	English Full name	German Vor- und Nachname
email	English Email	German E-Mail
area	English Area of interest	German Bereich
areaPlaceholder	English Choose an area	German Bereich wählen
link	English CV, portfolio or profile link	German Lebenslauf, Portfolio oder Profil-Link
message	English What would you like to work on?	German Woran möchtest du arbeiten?
send	English Send application	German Bewerbung senden
sending	English Sending	German Wird gesendet
required	English Please fill in this field.	German Bitte fülle dieses Feld aus.
invalidEmail	English Please enter a valid email address.	German Bitte gib eine gültige E-Mail-Adresse ein.
sentTitle	English Thank you, your application is in	German Danke, deine Bewerbung ist da
sentText	English You will hear from a real person within five working days.	German Innerhalb von fünf Werktagen meldet sich ein echter Mensch bei dir.
again	English Send another application	German Weitere Bewerbung senden

Read from the source of the component.

Sets aria-label, aria-live and aria-pressed, so screen readers announce purpose and state.
Uses the roles group and status.
Announces changes through a live region without moving focus.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Moves with the scroll, its progress follows the position on the page.
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 10 places in the code switch motion off then.

Frequent questions

How do I install Careers?

With aiw add @ai-website/careers. The command puts components/ui/careers.tsx into your project, the code is yours from then on. It brings along button, badge, icon, input, select, textarea, section and reveal. It needs no further npm packages.

Which variants does Careers have?

7 variants, Job board, Roles by team, Culture, Benefits, Job detail, Hiring process and Open application. You pick one with the variant prop, for example variant="by-team".

Can I translate the texts of Careers?

Yes. Careers carries 35 texts of its own in English and German, such as “All teams”, “All locations” and “Location”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Careers?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Careers with aiw_components and install it with aiw_add @ai-website/careers. Name the variant in your prompt, for example variant="job-board", and the assistant writes your content straight into the props.

Can I adjust Careers without code?

Yes, in the Studio. All 7 variants are editable there, texts, lists and switches. The Studio writes the matching Careers code to copy.

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Careers on a page.

Careers

Job board

Roles by team

Culture

Benefits

Job detail

Hiring process

Open application

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with