Corner Ribbon Banner Block for React

Edit FACTS at the top of the file: a label, a value, and whether the value is set in a badge. They render as a real description list, a term and its description per row, so a screen reader hears "Status, Beta". Two to four rows fit the panel; more would push the card past a comfortable height.

It's one span: a 9rem strip, turned 45 degrees with rotate-45, parked across the end-top corner with logical offsets (-end-9 top-7) inside the panel, which has overflow-hidden and rounded corners so the strip's ends are cut off. The shell's + marks sit outside the clip. Its label is real text. On phones the heading gets extra end padding so it never runs under the ribbon.

The ribbon is placed with logical offsets, so it stays on the end corner, which is now the physical left, and it turns the other way (rtl:-rotate-45) so it keeps crossing the corner the same way. The card's content mirrors, and the arrow in the link flips.

The card has no call to action competing with the page's main one: it informs. A link with an underline and a trailing arrow reads as "go and read", and it keeps a visible focus ring. Swap it for a Shine Button if the card should lead somewhere you want people to go.

The card fades up once when the page loads, with a CSS transition. With reduced motion the transition is off and the card simply appears.

The panel's padding steps down, the sparkle stays beside the heading, and the facts keep their rows. The link is on its own line. At 320 pixels nothing scrolls sideways.