Featured role salary About Block for React

The roles are OPENINGS. The button counts that array. The card shows FEATURED, the same object as the first role in the list, using its title and summary. The culture figures are CULTURE. The pay is MARKET_LOW, MARKET_HIGH, RANGE_LOW and RANGE_HIGH; the midpoint is the average of the range, and the band and the tick are percentages of the market, computed from those dollars. The chips are BENEFITS.

The heading is the section's only h2. The culture block is a definition list: the term, then the figure. The action is a link, "See 14 open roles", with the count from the array. The role is an h3. The sentence states the range, the midpoint and the market in dollars. The drawn scale is decorative, so the tick is not a second copy of those numbers. The benefits are a list of chips.

The market runs from the low end to the high end. The band starts where the role's low salary falls on that scale and ends at its high salary. The tick is the midpoint of the role's own range. Change the dollar constants and the sentence, the band and the tick all move together.

It is a link to #. Point the href at the roles page. It is the only button in the block. The light on it is the Shine Button's sweep.

The invitation, the figures and the link come first. The role's card follows, under a rule. The three figures share one row and their labels wrap. The scale stays a number line that does not mirror, so the low end stays at the start of that line. Nothing scrolls sideways at 320 pixels.

The invitation fades up once on load. The card does not. With reduced motion the fade is off. The button's light sweeps on hover, focus or press, and with reduced motion it fades in where it stands. Nothing plays on its own.