Components Hiring banner

Hiring banner

The brochure "We're hiring!" strip — an animated wave 👋, the lead, the bold open-role label, and a nudging arrow. The structure + wave/arrow animation are standardised here; each brochure (Legal, Tech) passes its own theme colours via class + link-class, so no Portal token is baked in.

<koala-hiring-banner>

Brochure component. The wave/arrow keyframes (.hiring-banner-wave / .hiring-banner-arrow) live in each brochure's app.css; the demo below renders the structure statically.

Canonical

We're hiring! Business Development Manager, Software Engineer 2 open roles

<koala-hiring-banner href="/work-with-us" label="Business Development Manager, Software Engineer"
                     mobile-label="2 open roles"
                     class="bg-primary-container text-on-primary-container border-b border-outline"
                     link-class="text-on-primary-container hover:text-brand-strong" />

Render once at the top of the brochure layout, gated on whether any roles are open. The desktop label takes the full role list; mobile-label a shorter form.

Props

5 attributes

Attribute	Values	Notes
href	string	Where the banner links (role page or work-with-us list).
label	string	Open-role label (desktop).
mobile-label	string?	Shorter label on mobile. Falls back to `label`.
class	string?	Brochure-theme strip surface (bg / text / border).
link-class	string?	Brochure-theme link text + hover colour.

Do & don't

We're hiring! Software Engineer Software Engineer

Do Pass the brochure's own theme colours via class / link-class.

A bespoke <div class="hiring-banner"> in the layout

Don't Don't hand-roll the strip in each brochure layout — the structure + animation must stay one source.