ComponentsStructure

Footer

Site-wide footer with a brand column, three link columns, and a bottom copyright line.

Preview

Code

from nitro_ui import Div, Paragraph, Href, Span, Footer


COLUMNS = [
    {"title": "Product", "links": [("Features", "#"), ("Pricing", "#"), ("Changelog", "#")]},
    {"title": "Company", "links": [("About", "#"), ("Blog", "#"), ("Careers", "#")]},
    {"title": "Legal", "links": [("Privacy", "#"), ("Terms", "#"), ("Cookies", "#")]},
]


def SiteFooter():
    columns = [
        Div(
            Span(col["title"], cls="footer-heading"),
            *[Href(label, href=url, cls="footer-link") for label, url in col["links"]],
            cls="footer-col",
        )
        for col in COLUMNS
    ]
    return Footer(
        Div(cls="footer-accent"),
        Div(
            Div(
                Div(
                    Span("Your Product", cls="logo-text"),
                    Paragraph("Short brand line.", cls="footer-tagline"),
                    cls="footer-brand",
                ),
                *columns,
                cls="footer-grid",
            ),
            cls="container footer-main",
        ),
        Div(
            Div(
                Paragraph("(C) 2026 Your Company.", cls="footer-built"),
                cls="container",
            ),
            cls="footer-bottom",
        ),
        cls="site-footer",
    )