ComponentsMarketing

Stats

Grid of big numbers with short labels. Works anywhere you want to quantify impact.

Preview

By the numbers.

10ms

Average build time per page

99.9%

Uptime since launch

0kb

JavaScript shipped by default

6

Tools in the ecosystem

Code

from nitro_ui import Div, H2, Paragraph, Span, Section


STATS = [
    {"value": "10ms", "label": "Average build time per page"},
    {"value": "99.9%", "label": "Uptime since launch"},
    {"value": "0kb", "label": "JavaScript shipped by default"},
    {"value": "6", "label": "Tools in the ecosystem"},
]


def Stats():
    cells = [
        Div(
            Span(s["value"], cls="stat-value"),
            Paragraph(s["label"], cls="stat-label"),
            cls="stat-cell",
        )
        for s in STATS
    ]
    return Section(
        Div(
            H2("By the numbers.", cls="section-title"),
            Div(*cells, cls="stats-grid"),
            cls="container",
        ),
        cls="stats-section",
    )