Screenshot Topped Card Grid Features Block for React

Each page is a small component (BillingPage, AuditPage, ConsolePage, WebhookPage, UsagePage, TeamPage) that you pass to Module as its children; the data they show (MEMBERS, ENTRIES, METERS, DELIVERIES) sits at the top of the file. They are built from a few shared pieces: Panel for a raised card, Action for the filled chip and Quiet for an outlined one.

Each stage is aria-hidden and inert, so assistive technology reads only the title and the sentence under it, and Tab never lands inside a drawing. Every module is a list item, and its title is a real heading, so the six are announced as a list of six.

From sm the stage takes aspect-video so the six line up at any width. On a phone it has a fixed height of 11 rem instead, so six drawings don't become six full screens; the drawings are laid out to fit the shorter box, and anything that would overflow is clipped.

By shared hairlines: the grid has gap-px on a bg-border background and each cell is bg-background, so there is one line between two cells instead of two. The band runs from rail to rail, so it has no outer radius, and its top rule comes from Guides with a + on each rail. There is no bottom rule, because the next block's top rule is the band's foot.

Yes. The stages are bg-muted with bg-card pages on them, the text is the foreground colour at 70% where it is secondary, and there is no dark scope or fixed colour, so every preset gives the same drawing in its own tones. Status uses a filled or an outlined dot rather than red and green.

Yes. Chips and rows use logical classes; code, paths and the JSON sample are dir="ltr"; values with units and times sit in bdi, and the meters' bars are dir="ltr" so they fill from the same side in every language.