Open Roles Footer Block for React

Edit the ROLES array at the top of the file: each role has an id, a title, a team, a place and a type. The number in the heading and on the button is OPEN, a separate constant, because the footer shows the newest few of a longer list. Point each row's link at the role's page, and the button at your careers page.

The role title is the link, and a stretched pseudo-element makes the row its click target, so the accessible name is just the role title, not the team, place and type read out as one long link. Keyboard focus draws a ring inside the row.

Yes. The rows read a plain array, so you can fill it from your system on the server and pass it in. Keep the footer to the newest three or four roles and let the button carry the rest.

The wordmark comes first, then the two groups side by side, then the roles. Each row stacks the title, team, place and badge on their own lines with the arrow at the end of the title, and nothing scrolls sideways at 320 pixels.

No. Soffit and its roles are made up for the example. Replace the copy, and keep the roles you list in step with your real openings so the count stays true.

It is the current year, read when the footer renders, so it never goes stale.