BlockReactregistry:block1 dependency
Stats band
stats-band
A marketing band of headline statistics separated by vertical dividers on a card background.
Notes from the author
A marketing band of headline statistics separated by vertical dividers on a card background. Do: Color headline numbers from the accent's TEXT cut (--accent-pigment-text), so they follow the page's data-accent and still clear WCAG contrast on every ground. Don't: Use --accent-pigment for text. That is the decorative cut: on a Dawn card it is 2.9:1 for moss (the default accent) and 2.1:1 for gold, both under the 3:1 large-text minimum. It is also what --link and --ring already avoid. And never hardcode a fixed pigment (e.g. --terracotta) — that breaks the moment a consumer sets a different accent. Do: Pair every headline number with its own visible label directly beneath it (e.g. "Components"), as every stat in this band does. Don't: Ship a bare number with no label — a viewer has no way to tell what it counts. Use stat-cards when each number needs its own card with a period-over-period delta — this pattern is a single flat band with no per-item chrome or comparison. Use feature-section when you're describing capabilities, not reporting numbers.
@quill