Boarding Pass Ticket Stub Features Block for React

Edit ROUTES at the top of the file: each has the name and the minutes of the manual way and of the automated way, a sentence and what one run is called. The stub's time saved is the difference and the header's total is the sum, both worked out in the file, and minutes are written as "2 h 30 min".

The card has a CSS mask made of two radial gradients, one per end of the divider, intersected so each takes out a 10 px circle centred on the card's edge. A half-circle outline, a hairline arc, is drawn over each cut. The stub's size is a CSS variable (--stub), its height on a phone and its width from md, so the cut always lands on the divider.

Yes. The card is bg-card with the border token, and the cut shows the page behind, so it works on light, dark and tinted pages and in every preset. There is no shadow, because a mask would clip it.

Each card is a list item with a heading, a route badge, the From and To lines with their times, the sentence and the stub's time saved, in that order. The notches and the arrows between From and To are decoration and are hidden.

The route reads top to bottom with a down arrow, the stub drops under the main panel at a fixed height, and the notches move to the card's sides at the divider.

No: it is a shape with a stub at one end, so the cards keep their direction (dir="ltr") and the mask lands on the divider in every language. Times such as "2 h 30 min" are in bdi.