Open Roles About Block for React

The roles are ROLES and the teams are TEAMS. A role has a title, a team, a place, a type and an ago such as "6 days ago". TEAMS starts with "All" and should name every team you want on the filter, including one with no roles. Each button's count is how many roles use that team. "All" counts every role.

It is a single choice, so one team is always on. Pressing the team that is already chosen leaves it chosen. The list shows only the matching roles, and a line above the list reads the result, such as "Showing 2 of 6 roles" or "No Research roles are open". That line is a polite live region, so a change can be announced. The list's box stays as tall as every role.

A team whose count is zero replaces the rows with one sentence that names the team and invites a résumé. The link under the list is always there. It is an ordinary link to # in this demo: it does not submit a form and it does not store an address.

The heading is the section's only h2. The filter is labelled "Team", and each button includes its count. The summary line announces the filter's result. Each visible role is an h3 inside a list, with the team, the type and the posted time in the line under the title. The place is a badge. The dot between those words is decorative.

The filter drops under the sentence and scrolls sideways inside its own row, so five teams fit at 320 pixels without scrolling the page. A long title truncates on one line, and each row keeps a fixed height. In a right-to-left layout the filter and the rows follow the page, and the posted time keeps its order.

The header fades up once on load. With reduced motion it simply appears. Filtering swaps the rows at once, with no animation, and the résumé line stays where it is. Nothing loops. Posted times are relative on purpose, so the page does not name a calendar date.