Culture Behaviors About Block for React

The two lists are CELEBRATE and DISCOURAGE at the top of the file. Each row has a title and sounds, the sentence someone would say; the quote marks are added for you. The halves don't have to pair up row for row, but keeping the same number in each (four) keeps the two columns the same height. Write the quote in the voice of the person doing it, so a reader can recognise it in a meeting.

Red for "discouraged" and green for "celebrated" fail for readers who can't tell the two apart, and they pull your theme's accents into a block that should stay calm. The markers differ in shape (a minus and a plus) and in fill, they are decoration only, and the meaning is carried by the half's heading, which the rows sit under.

The band's top rule, the rule under each half's heading and the + marks where they meet the rails and the middle come from Guides. The middle divider is a border on the second half from lg; on a phone a rule is drawn between the halves instead. Rows are separated by hairlines, and the last row has no bottom rule, because the next block's top rule is its foot, so the block ends on content.

The section's heading is an h2, each half has an h3 ("We celebrate", "We discourage") and each behaviour is a list item with an h4. The quoted example is part of the row's text, introduced by "Sounds like". The markers are hidden from assistive technology. The block has no controls and no state, so it renders on the server.

Below lg the halves stack at full width, "We celebrate" first, with a hairline rule between them. Each row keeps its marker at the start and wraps its text beside it, and nothing scrolls sideways at 320 pixels. In a right-to-left layout the halves swap sides and the quotes keep their quote marks in place.