Marketing

Feature Grid

Name: Nitro
Author: Nitro

Grid of feature cards with neo-brutalist colored top borders. Good for summarizing what makes your product different.

Preview

Why teams pick us.

Fast

Static output. No runtime, no database, no cold starts.

Simple

Write pages as Python functions. No new syntax.

Flexible

Drop in any Python library. Build time is yours.

Code

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


FEATURES = [
    {"title": "Fast", "desc": "Static output. No runtime, no database, no cold starts."},
    {"title": "Simple", "desc": "Write pages as Python functions. No new syntax."},
    {"title": "Flexible", "desc": "Drop in any Python library. Build time is yours."},
]

COLORS = ["blue", "pink", "green"]


def FeatureGrid():
    cards = [
        Div(
            H3(f["title"], cls="feature-card-title"),
            Paragraph(f["desc"], cls="feature-card-desc"),
            cls=f"feature-card feature-card--{COLORS[i % len(COLORS)]}",
        )
        for i, f in enumerate(FEATURES)
    ]
    return Section(
        Div(
            H2("Why teams pick us.", cls="section-title"),
            Div(*cards, cls="feature-grid"),
            cls="container",
        ),
        cls="features-section",
    )