Inset Count Badge CTA Block for React

It's OPEN_ROLES, computed from the TEAMS array at the top of the file, where each team has a name and a number of open roles. Change a team's number, add a team, or replace the array with data from your applicant system, and the badge and the copy ("across 4 teams") follow. The badge is a Float pinned to the button's top corner, inside a relative wrapper. The Shine Button doesn't change size on hover, so the badge never moves out from under its corner.

The button is a link named "View open roles", and the badge right after it reads "12 open roles": the digits and an sr-only unit, so the number is never spoken alone. The badge doesn't take clicks (pointer-events-none), so the whole target stays the button, and its figure sits in a bdi so it keeps its digits in right-to-left text.

Edit the FEATURED array: each role has a title, a team and a place, and the whole cell is one link, so point its href at the posting. Three cells fill the strip from the sm breakpoint; below it they stack. Keep them to roles that are really open, since the cells link straight to a posting while the badge counts all of them. Each cell is an Item that renders the link it's given with render.

Yes. Float pins to the inline end, which is the opposite corner in a right-to-left layout, and the block adds the matching mirrored nudge so the badge straddles the corner there as it does in left-to-right. The arrows in the cells mirror too.

Yes. The panel has no dark scope: it is light on a light page and dark on a dark page, using bg-card with a shadow-lg and a ring-1 ring-foreground/15 hairline to stand out from its muted shell, whose corners carry + marks. To make it louder, strengthen the ring or the shadow.

Use it when the number is the reason to click: open roles, unread items, seats left. If the count rarely changes or isn't persuasive, the Inset Announcement Badge version gives you one clear step without a figure that has to stay true.