Statistic Block

Use Statistic with a clear purpose

Display a number with prefix, suffix and label. This guide covers the settings exposed by the current LunaSites block, the Style Panel areas that can be customized, and the checks that keep the result dependable across breakpoints.

Add a Statistic

1. Open Add block and choose Statistic from the Content category.

2. Start with the content or data source and confirm that the block communicates one clear role.

3. Configure layout and behavior before applying local visual overrides.

4. Use the Style Panel only for intentional block-specific differences; reuse a preset when the same treatment appears repeatedly.

5. Preview the real result at desktop, tablet, and mobile widths, including hover, focus, active, empty, and error states when relevant.

Configure the Statistic

Content

Number The default is 100. Prefix The default is . Suffix The default is . Label The default is . [REVIEW] THIS IS WIERD

Layout

Responsive Layout Options include Left, Center, Right.

Additional settings

Tablet Alignment Options include Left, Center, Right. Mobile Alignment Options include Left, Center, Right.

Style Panel

The available styling areas are Body, Number, Label, Prefix, Suffix. Complete the default state first, then add hover or active differences only where the target supports them. Keep text, borders, controls, and bounded surfaces readable against the effective page background.

Responsive behavior

Statistic is a grid-section block using the content-driven sizing model with a documented starting frame of 4 columns by 4 rows. Author the desktop composition first, then tune tablet and mobile only where automatic reflow does not preserve hierarchy.

Tips & tricks

1. Build a clear reading hierarchy before refining decorative details.

2. Keep each content unit focused on one idea and make scanning easy.

3. Let the rendered copy determine height instead of adding empty rows.

4. Test the shortest, longest, empty, and most complex realistic content before considering the design finished.

Accessibility checklist

• Give every meaningful control, image, region, or data value an understandable name or text alternative.

• Preserve keyboard access, visible focus, logical reading order, and sufficient contrast.

• Do not rely on color, motion, shape, or position alone to communicate meaning.

• Check reduced-motion preferences and mobile touch targets whenever the block is interactive.

Common mistakes

• Styling before the content, source, and behavior are correct.

• Oversized frames, accidental empty space, weak contrast, or missing responsive checks.

• Adding decorative or interactive complexity without a clear visitor benefit.

Quick recipe

Add one Statistic, use the documented defaults as a starting point, replace them with real content, refine only the necessary settings, then verify the rendered block at all three responsive breakpoints.