Image Content Split Banner Block for React

The copy is first in the page and the figure second, so screen readers and the Tab key meet the text first. From lg the figure takes the first grid cell with lg:col-start-1 lg:row-start-1, which moves it visually without touching the order. On a phone the copy comes first and the figure sits under it, below a rule.

No: it's a picture. The figure is aria-hidden and inert, so nothing in it takes focus or is read out, and the role labels (Editor, Viewer) follow the switches because they come from the same data. The text beside it says what the feature does.

Edit the MEMBERS list: a name, initials and whether the person is an editor. The role label under the name and the switch both come from that flag. The names are invented; use roles from your own product.

Primary stays on the page's one main action. The switch uses the foreground tone when it's on, in light and dark themes, and the thumb flips to the background colour so it stays visible. The on state is data-checked, and the switch starts on with defaultChecked.

Everything mirrors: the figure moves to the right edge of the block, names and roles align to the start, the switches sit at the end of each row and the arrow on the link turns around.

The copy comes first, then the frame under a rule. The sheet keeps its three rows and shrinks to the width; at 320 pixels the title row truncates its text and nothing scrolls sideways.