Skip to content

Footer Modern

The FooterModern component creates a professional multi-column footer with branding, link columns, social icons, and copyright. Perfect for landing pages and marketing sites with responsive grid layout.

Goal

By the end of this guide, you'll be able to create beautiful, responsive footers with zero CSS knowledge required.

Quick Start

Here's the simplest way to create a footer.

Live Preview
MyApp

Building the future

Product

Features

Pricing

Follow Us

© 2026 All rights reserved

FooterModern(
    brand="MyApp",
    tagline="Building the future",
    columns=[
        {
            "title": "Product",
            "links": [
                {"text": "Features", "href": "/features"},
                {"text": "Pricing", "href": "/pricing"},
            ]
        }
    ],
    social_links=[
        {"icon": "twitter", "href": "https://twitter.com/myapp"},
        {"icon": "github", "href": "https://github.com/myapp"},
    ]
)

Visual Examples & Use Cases

Full-featured footer with all sections.

FooterModern(
    brand="MyCompany",
    tagline="Innovating since 2020",
    columns=[
        {
            "title": "Product",
            "links": [
                {"text": "Features", "href": "/features"},
                {"text": "Pricing", "href": "/pricing"},
                {"text": "Roadmap", "href": "/roadmap"},
                {"text": "Changelog", "href": "/changelog"},
            ]
        },
        {
            "title": "Company",
            "links": [
                {"text": "About", "href": "/about"},
                {"text": "Blog", "href": "/blog"},
                {"text": "Careers", "href": "/careers"},
                {"text": "Contact", "href": "/contact"},
            ]
        },
        {
            "title": "Legal",
            "links": [
                {"text": "Privacy", "href": "/privacy"},
                {"text": "Terms", "href": "/terms"},
                {"text": "Security", "href": "/security"},
            ]
        }
    ],
    social_links=[
        {"icon": "twitter", "href": "https://twitter.com/company"},
        {"icon": "github", "href": "https://github.com/company"},
        {"icon": "linkedin", "href": "https://linkedin.com/company/company"},
        {"icon": "youtube", "href": "https://youtube.com/@company"},
    ],
    copyright_text="© 2026 MyCompany Inc. All rights reserved."
)

Simple footer with just brand and copyright.

FooterModern(
    brand="SimpleApp",
    copyright_text="© 2026 SimpleApp"
)

Footer with light background.

FooterModern(
    brand="LightApp",
    tagline="Clean and simple",
    bg_variant="light",
    text_variant="dark",
    columns=[
        {
            "title": "Links",
            "links": [
                {"text": "Home", "href": "/"},
                {"text": "About", "href": "/about"},
            ]
        }
    ]
)

Practical Functionality

Use custom logo instead of text brand.

from fasthtml.common import Img

FooterModern(
    brand=Img(
        src="/static/logo-white.png",
        alt="MyApp",
        style="max-width: 150px; height: auto;"
    ),
    tagline="Building amazing products",
    columns=[...]
)

Newsletter Signup

Add newsletter form to footer.

FooterModern(
    brand="MyApp",
    columns=[
        {
            "title": "Product",
            "links": [...]
        },
        {
            "title": "Newsletter",
            "links": []  # Empty, we'll add custom content
        }
    ]
)

# Or create custom footer section
def CustomFooter():
    return Footer(
        Container(
            Row(
                Col(
                    H5("MyApp"),
                    P("Stay updated", cls="text-muted")
                ),
                Col(
                    H6("Newsletter"),
                    Form(
                        InputGroup(
                            Input("email", input_type="email", placeholder="Your email"),
                            Button("Subscribe", variant="primary")
                        ),
                        hx_post="/newsletter/subscribe"
                    )
                )
            )
        ),
        cls="bg-dark text-light py-5"
    )

Generate links from database.

def AppFooter():
    # Get dynamic links
    product_pages = db.query(Page).filter(Page.category == "product").all()
    company_pages = db.query(Page).filter(Page.category == "company").all()

    return FooterModern(
        brand="MyApp",
        columns=[
            {
                "title": "Product",
                "links": [
                    {"text": page.title, "href": page.url}
                    for page in product_pages
                ]
            },
            {
                "title": "Company",
                "links": [
                    {"text": page.title, "href": page.url}
                    for page in company_pages
                ]
            }
        ],
        social_links=get_social_links()
    )

Integration Patterns

In Landing Layout

def LandingLayout(*content):
    return Html(
        Head(...),
        Body(
            Navbar(...),
            Main(*content),
            FooterModern(
                brand="MyApp",
                tagline="Building the future",
                columns=[...],
                social_links=[...]
            )
        )
    )

Make footer stick to bottom on short pages.

Html(
    Body(
        Div(
            Navbar(...),
            Main(*content, cls="flex-grow-1"),
            FooterModern(...),
            cls="d-flex flex-column min-vh-100"
        )
    )
)

Multi-Language

Support multiple languages.

def get_footer_links(lang="en"):
    translations = {
        "en": {
            "product": "Product",
            "features": "Features",
            "pricing": "Pricing",
        },
        "es": {
            "product": "Producto",
            "features": "Características",
            "pricing": "Precios",
        }
    }

    t = translations[lang]

    return FooterModern(
        brand="MyApp",
        columns=[
            {
                "title": t["product"],
                "links": [
                    {"text": t["features"], "href": f"/{lang}/features"},
                    {"text": t["pricing"], "href": f"/{lang}/pricing"},
                ]
            }
        ]
    )

Parameter Reference

Parameter Type Default Description
brand str \| Any None Brand name or logo element
tagline str \| None None Optional tagline under brand
columns list[dict] None Link columns with 'title' and 'links'
social_links list[dict] None Social links with 'icon' and 'href'
copyright_text str \| None Auto Copyright text
bg_variant str "dark" Background color variant
text_variant str "light" Text color variant
**kwargs Any - Additional HTML attributes

Column Structure

{
    "title": "Column Title",
    "links": [
        {"text": "Link Text", "href": "/url"},
        {"text": "Another Link", "href": "/url2"},
    ]
}

{
    "icon": "twitter",  # Bootstrap icon name
    "href": "https://twitter.com/username"
}

Best Practices

✅ Do This

# Organize links logically
columns=[
    {"title": "Product", "links": [...]},
    {"title": "Company", "links": [...]},
    {"title": "Legal", "links": [...]},
]

# Use semantic copyright
copyright_text="© 2026 MyCompany Inc. All rights reserved."

# Include important social links
social_links=[
    {"icon": "twitter", "href": "..."},
    {"icon": "github", "href": "..."},
]

# Match footer theme to site
FooterModern(bg_variant="dark", text_variant="light")

❌ Don't Do This

# Don't overcrowd with too many columns
columns=[...10 columns...]  # Too many!

# Don't use broken links
{"text": "Page", "href": "#"}  # Use real URLs

# Don't forget copyright
# Always include copyright_text

# Don't mismatch colors
FooterModern(bg_variant="dark", text_variant="dark")  # Invisible!

faststrap.components.patterns.footer.FooterModern(brand=None, tagline=None, columns=None, social_links=None, copyright_text=None, bg_variant=None, text_variant=None, **kwargs)

Modern multi-column footer with branding, links, and social icons.

Perfect for landing pages and marketing sites. Responsive grid layout with brand section, link columns, social icons, and copyright.

Parameters:

Name Type Description Default
brand str | Any | None

Brand name or logo element

 None
tagline str | None

Optional tagline under brand

 None
columns list[dict[str, Any]] | None

List of column dicts with 'title' and 'links' (list of dicts with 'text' and 'href')

 None
social_links list[dict[str, str]] | None

List of social link dicts with 'icon' and 'href'

 None
copyright_text str | None

Copyright text (default: "© 2024 All rights reserved")

 None
bg_variant str | None

Background color variant

 None
text_variant str | None

Text color variant

 None
**kwargs Any

Additional HTML attributes

 {}

Returns:

Type Description
Footer

Footer element with modern layout
Example

Basic footer:

FooterModern( ... brand="MyApp", ... tagline="Building the future", ... columns=[ ... { ... "title": "Product", ... "links": [ ... {"text": "Features", "href": "/features"}, ... {"text": "Pricing", "href": "/pricing"}, ... ] ... }, ... { ... "title": "Company", ... "links": [ ... {"text": "About", "href": "/about"}, ... {"text": "Contact", "href": "/contact"}, ... ] ... } ... ], ... social_links=[ ... {"icon": "twitter", "href": "https://twitter.com/myapp"}, ... {"icon": "github", "href": "https://github.com/myapp"}, ... ] ... )

Custom styling:

FooterModern( ... brand=H2("MyBrand", cls="text-primary"), ... bg_variant="light", ... text_variant="dark", ... copyright_text="© 2026 MyCompany Inc." ... )

Note

Marked as @beta - API may change in future releases.

Source code in src/faststrap/components/patterns/footer.py 
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
@register(category="patterns")
@beta
def FooterModern(
    brand: str | Any | None = None,
    tagline: str | None = None,
    columns: list[dict[str, Any]] | None = None,
    social_links: list[dict[str, str]] | None = None,
    copyright_text: str | None = None,
    bg_variant: str | None = None,
    text_variant: str | None = None,
    **kwargs: Any,
) -> Footer:
    """Modern multi-column footer with branding, links, and social icons.

    Perfect for landing pages and marketing sites. Responsive grid layout
    with brand section, link columns, social icons, and copyright.

    Args:
        brand: Brand name or logo element
        tagline: Optional tagline under brand
        columns: List of column dicts with 'title' and 'links' (list of dicts with 'text' and 'href')
        social_links: List of social link dicts with 'icon' and 'href'
        copyright_text: Copyright text (default: "© 2024 All rights reserved")
        bg_variant: Background color variant
        text_variant: Text color variant
        **kwargs: Additional HTML attributes

    Returns:
        Footer element with modern layout

    Example:
        Basic footer:
        >>> FooterModern(
        ...     brand="MyApp",
        ...     tagline="Building the future",
        ...     columns=[
        ...         {
        ...             "title": "Product",
        ...             "links": [
        ...                 {"text": "Features", "href": "/features"},
        ...                 {"text": "Pricing", "href": "/pricing"},
        ...             ]
        ...         },
        ...         {
        ...             "title": "Company",
        ...             "links": [
        ...                 {"text": "About", "href": "/about"},
        ...                 {"text": "Contact", "href": "/contact"},
        ...             ]
        ...         }
        ...     ],
        ...     social_links=[
        ...         {"icon": "twitter", "href": "https://twitter.com/myapp"},
        ...         {"icon": "github", "href": "https://github.com/myapp"},
        ...     ]
        ... )

        Custom styling:
        >>> FooterModern(
        ...     brand=H2("MyBrand", cls="text-primary"),
        ...     bg_variant="light",
        ...     text_variant="dark",
        ...     copyright_text="© 2026 MyCompany Inc."
        ... )

    Note:
        Marked as @beta - API may change in future releases.
    """
    from ...core.theme import resolve_defaults
    from ..layout.grid import Col, Container, Row

    # Resolve API defaults
    cfg = resolve_defaults("FooterModern", bg_variant=bg_variant, text_variant=text_variant)
    c_bg_variant = cfg.get("bg_variant", "dark")
    c_text_variant = cfg.get("text_variant", "light")

    # Default values
    if columns is None:
        columns = []
    if social_links is None:
        social_links = []
    if copyright_text is None:
        copyright_text = f"© {2026} All rights reserved"

    # Build brand section
    brand_section = None
    if brand or tagline:
        brand_content = []
        if brand:
            if isinstance(brand, str):
                brand_content.append(Span(brand, cls="fs-4 fw-bold"))
            else:
                brand_content.append(brand)
        if tagline:
            brand_content.append(P(tagline, cls="text-muted small mt-2"))

        brand_section = Col(
            Div(*brand_content),
            md=3,
            cls="mb-4 mb-md-0",
        )

    # Build link columns
    link_columns = []
    for column in columns:
        title = column.get("title", "")
        links = column.get("links", [])

        link_items = []
        for link in links:
            link_items.append(
                P(
                    A(
                        link.get("text", ""),
                        href=link.get("href", "#"),
                        cls=f"text-{c_text_variant} text-decoration-none",
                    ),
                    cls="mb-2",
                )
            )

        link_columns.append(
            Col(
                Div(
                    P(title, cls="fw-bold mb-3"),
                    *link_items,
                ),
                md=2,
                cls="mb-4 mb-md-0",
            )
        )

    # Build social links
    social_section = None
    if social_links:
        social_icons = []
        for social in social_links:
            social_icons.append(
                A(
                    Icon(social.get("icon", "")),
                    href=social.get("href", "#"),
                    cls=f"text-{c_text_variant} me-3 fs-4",
                    target="_blank",
                    rel="noopener noreferrer",
                )
            )

        social_section = Col(
            Div(
                P("Follow Us", cls="fw-bold mb-3"),
                Div(*social_icons, cls="d-flex"),
            ),
            md=3,
            cls="mb-4 mb-md-0",
        )

    # Build top section
    top_row_cols = []
    if brand_section:
        top_row_cols.append(brand_section)
    top_row_cols.extend(link_columns)
    if social_section:
        top_row_cols.append(social_section)

    top_section = Row(*top_row_cols) if top_row_cols else None

    # Build copyright section
    copyright_section = Div(
        Hr(cls=f"border-{c_text_variant} opacity-25 my-4"),
        P(copyright_text, cls="text-center text-muted small mb-0"),
    )

    # Build footer content
    footer_content = []
    if top_section:
        footer_content.append(top_section)
    footer_content.append(copyright_section)

    # Build classes
    base_classes = [f"bg-{c_bg_variant}", f"text-{c_text_variant}", "py-5", "mt-5"]
    user_cls = kwargs.pop("cls", "")
    all_classes = merge_classes(" ".join(base_classes), user_cls)

    # Build attributes
    attrs: dict[str, Any] = {"cls": all_classes}
    attrs.update(convert_attrs(kwargs))

    return Footer(
        Container(*footer_content),
        **attrs,
    )