Zum Inhalt springen
UI Kit
Accent

Careers

Offene Stellen mit Filtern, Kultur, Leistungen, eine ganze Stellenseite, der Bewerbungsablauf und die Initiativbewerbung.

7 Variants
Kategorie wechseln

Karriere

Stellenbörse

Alle offenen Stellen, gefiltert nach Bereich und Ort.

Im Studio öffnen

Stellen nach Bereich

Stellen unter ihrem Bereich gruppiert, jede Karte mit Gehalt und einem Satz zur Aufgabe.

Im Studio öffnen

Kultur

Der Ort in Bildern, die Werte in drei Sätzen, die Firma in vier Zahlen.

Im Studio öffnen

Leistungen

Was Menschen bekommen, in einem ruhigen Raster, das Wichtigste zuerst.

Im Studio öffnen

Stellendetail

Eine Stelle mit Eckdaten an der Seite und einer Bewerbungsleiste, die auf dem Telefon griffbereit bleibt.

Im Studio öffnen

Bewerbungsablauf

Fünf Schritte von der Bewerbung bis zum Angebot, mit der Dauer jedes Schritts.

Im Studio öffnen

Initiativbewerbung

Für Menschen, die passen, aber auf keine ausgeschriebene Stelle, mit kurzem Formular.

Im Studio öffnen

Details

Was Karriere mitbringt, aus Registry und Quellcode gelesen.

Bereich
Content
Variants
7
Version
1.0.0 · seit 1.0.0
Datei
components/ui/careers.tsx
Bringt mit
utilskitbuttonbadgeiconinputselecttextareasectionreveal
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 35 eigene Texte
Studio
Alle 7 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle CareersProps aus components/ui/careers.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • 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 }

Eingebaute Texte

Diese Texte schreibt Karriere selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 35 Texte anzeigen
allEnglisch All teamsDeutsch Alle Bereiche
allLocationsEnglisch All locationsDeutsch Alle Orte
locationEnglisch LocationDeutsch Ort
departmentEnglisch TeamDeutsch Bereich
rolesEnglisch {n} open rolesDeutsch {n} offene Stellen
roleEnglisch {n} open roleDeutsch {n} offene Stelle
resetEnglisch Reset filtersDeutsch Filter zurücksetzen
emptyEnglisch No open role matches these filters right now.Deutsch Gerade passt keine offene Stelle zu diesen Filtern.
emptyHintEnglisch Try another team or location, or send us an open application.Deutsch Probier einen anderen Bereich oder Ort oder schick uns eine Initiativbewerbung.
isNewEnglisch NewDeutsch Neu
filtersEnglisch Filter rolesDeutsch Stellen filtern
applyEnglisch Apply nowDeutsch Jetzt bewerben
applyForEnglisch Apply for this roleDeutsch Auf diese Stelle bewerben
backEnglisch All open rolesDeutsch Alle offenen Stellen
salaryEnglisch SalaryDeutsch Gehalt
typeEnglisch TypeDeutsch Art
startEnglisch StartDeutsch Start
postedEnglisch PostedDeutsch Veröffentlicht
shareEnglisch Copy linkDeutsch Link kopieren
copiedEnglisch Link copiedDeutsch Link kopiert
questionsEnglisch Questions about the role?Deutsch Fragen zur Stelle?
totalEnglisch About {n} from first message to offerDeutsch Etwa {n} von der ersten Nachricht bis zum Angebot
nameEnglisch Full nameDeutsch Vor- und Nachname
emailEnglisch EmailDeutsch E-Mail
areaEnglisch Area of interestDeutsch Bereich
areaPlaceholderEnglisch Choose an areaDeutsch Bereich wählen
linkEnglisch CV, portfolio or profile linkDeutsch Lebenslauf, Portfolio oder Profil-Link
messageEnglisch What would you like to work on?Deutsch Woran möchtest du arbeiten?
sendEnglisch Send applicationDeutsch Bewerbung senden
sendingEnglisch SendingDeutsch Wird gesendet
requiredEnglisch Please fill in this field.Deutsch Bitte fülle dieses Feld aus.
invalidEmailEnglisch Please enter a valid email address.Deutsch Bitte gib eine gültige E-Mail-Adresse ein.
sentTitleEnglisch Thank you, your application is inDeutsch Danke, deine Bewerbung ist da
sentTextEnglisch You will hear from a real person within five working days.Deutsch Innerhalb von fünf Werktagen meldet sich ein echter Mensch bei dir.
againEnglisch Send another applicationDeutsch Weitere Bewerbung senden

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Setzt aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen group und status.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 10 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Karriere?

Mit aiw add @ai-website/careers. Der Befehl legt die Datei components/ui/careers.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, badge, icon, input, select, textarea, section und reveal. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Karriere?

7 Varianten, Stellenbörse, Stellen nach Bereich, Kultur, Leistungen, Stellendetail, Bewerbungsablauf und Initiativbewerbung. Du wählst sie mit der Prop variant, zum Beispiel variant="by-team".

Kann ich die Texte von Karriere übersetzen?

Ja. Karriere bringt 35 eigene Texte auf Deutsch und Englisch mit, etwa „Alle Bereiche“, „Alle Orte“ und „Ort“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Karriere einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Karriere mit aiw_components und installieren sie mit aiw_add @ai-website/careers. Nenn im Prompt die Variante, etwa variant="job-board", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Karriere ohne Code anpassen?

Ja, im Studio. Alle 7 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Careers-Code zum Kopieren.

Ähnliche Components

Mehr aus Content, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Careers stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert