QA-A
First block in the grid. Establishes the base surface, border radius and shadow that every later card is compared against.
Position 1Pending
Card separation check
Eight static cards, QA-A through QA-H, in reading order.
QA-B
Sits immediately right of QA-A at desktop width. The gutter between the two should be clearly wider than the padding inside either one.
Position 2Pending
QA-C
Warm accent to break the cool run. Body copy runs to three lines here so uneven text length does not change card height.
Position 3Pending
QA-D
Last card of the first row on a wide viewport. Its right edge should line up flush with the page container.
Position 4Pending
QA-E
Opens the second row directly under QA-A. Vertical rhythm matches the horizontal gutter so rows read as distinct bands.
Position 5Pending
QA-F
Shortest body line in the set, held to the same minimum height by the footer rule.
Position 6Pending
QA-G
Seventh block. Accent bar on the left keeps the label identifiable even when the grid collapses to a single column.
Position 7Pending
QA-H
Final card. Nothing should appear after it except the count footer, and no label may repeat anywhere above.
Position 8Pending
Layout readout
Live measurements of the card grid, recomputed on resize.
Verification console
Assertions run against the DOM on load. Nothing is persisted.