Expandable Banner Block for React

Edit FACTS at the top of the file: each entry is a label and a value. They are a real description list (a term and its detail), so a screen reader says "From next renewal, 1.9% per card payment". Values with a sign or a unit sit in a bdi element so a right-to-left layout keeps them in order.

The trigger is a button inside the block's heading (h2), named by the header line; it reports expanded or collapsed, opens with Enter or Space, and its aria-controls points at the panel. The whole line is the target, not only the chevron.

Give Collapsible the defaultOpen prop.

It starts closed because a banner should take one line until someone asks for more.

The card fades up once on load, the panel's height eases open and the chevron turns over, all with CSS. With reduced motion turned on the panel opens at once and nothing animates.

That one is an incident: a status dot, a badge and a grid of services. This one is a plain notice with a list of facts, in a card in card, with no status colour at all. Pick by what the details are: states of things, or the terms of a change.

The header wraps to two lines when it must, and each fact stacks its label over its value. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the icon, the chevron and the arrow mirror.