Hero Section

The Hero component (often called a Jumbotron) is a large, prominent section typically found at the top of landing pages to showcase the primary value proposition of a site.

Bootstrap Reference

Hero sections are usually custom implementations of Containers and Spacing. FastStrap provides a dedicated component to standardize this common pattern.

---

Quick Start

Live Preview

Build Faster with FastStrap

The definitive Bootstrap component library for FastHTML.

Get Started

Hero(
    title="Build Faster with FastStrap",
    subtitle="The definitive Bootstrap component library for FastHTML.",
    action=Button("Get Started", size="lg", variant="primary"),
    variant="light",
    align="center"
)


---

Visual Examples & Use Cases

1. Dark Mode Hero

Use variant="dark" and bg_variant="dark" for a premium, high-contrast look.

Code & Output

```python

Live Preview (Dark)

Modern Python Development

Zero JS, Infinite Possibilities.

Hero(
    title="Modern Python Development",
    subtitle="Zero JS, Infinite Possibilities.",
    variant="dark",
    bg_variant="dark",
    align="start"
)

```

2. Image Backgrounds

You can pass an image URL to bg_image to create a more visual experience.

Hero(
    title="Adventure Awaits",
    bg_image="https://example.com/mountain.jpg",
    fixed_bg=True, # Parallax effect
    variant="dark"
)

---

Practical Functionality

1. Customizing Children

The action argument can accept any FastHTML element or component.

Hero(
    ...,
    action=Div(
        Button("Download", variant="primary"),
        Button("View Source", variant="link"),
        cls="d-flex gap-2 justify-content-center"
    )
)

---

Parameter Reference

FastStrap Param	Type	Description
title	str	Main large heading (H1).
subtitle	str	Secondary text or description.
action	Any	Call to action (usually a button).
align	str	Alignment: start, center, end.
variant	str	Text theme: light or dark.
bg_variant	str	Background color utility (e.g. primary, dark).
bg_image	str	URL for background image.
container	bool	If True, wraps content in a .container. Default True.
fixed_bg	bool	Enables parallax background attachment.

faststrap.components.layout.hero.Hero(title, subtitle=None, cta=None, align='center', bg_variant=None, bg_color=None, text_color=None, py='5', container=True, **kwargs)

Bootstrap Hero component (Jumbotron style).

A large showcase section for landing pages.

Parameters:

Name	Type	Description	Default
title	str	Main headline	required
subtitle	str | None	Subheadline or description	None
cta	Any | None	Call to action component (Button or group)	None
align	str	Text alignment (center, start, end)	'center'
bg_variant	VariantType | None	Background variant (light, dark, primary, etc.)	None
bg_color	str | None	Custom background color (CSS class or hex if style)	None
text_color	str | None	Text color class (e.g. text-white)	None
py	str	Vertical padding (default: 5)	'5'
container	bool	Wrap content in Container (default: True)	True
**kwargs	Any	Additional HTML attributes	{}

Returns:

Type	Description
Div	FastHTML Div element

Example

Hero( ... "Welcome", ... "Building great apps", ... cta=Button("Get Started"), ... bg_variant="light" ... )

Source code in src/faststrap/components/layout/hero.py

@register(category="layout")
@stable
def Hero(
    title: str,
    subtitle: str | None = None,
    cta: Any | None = None,
    align: str = "center",
    bg_variant: VariantType | None = None,
    bg_color: str | None = None,
    text_color: str | None = None,
    py: str = "5",
    container: bool = True,
    **kwargs: Any,
) -> Div:
    """Bootstrap Hero component (Jumbotron style).

    A large showcase section for landing pages.

    Args:
        title: Main headline
        subtitle: Subheadline or description
        cta: Call to action component (Button or group)
        align: Text alignment (center, start, end)
        bg_variant: Background variant (light, dark, primary, etc.)
        bg_color: Custom background color (CSS class or hex if style)
        text_color: Text color class (e.g. text-white)
        py: Vertical padding (default: 5)
        container: Wrap content in Container (default: True)
        **kwargs: Additional HTML attributes

    Returns:
        FastHTML Div element

    Example:
        >>> Hero(
        ...     "Welcome",
        ...     "Building great apps",
        ...     cta=Button("Get Started"),
        ...     bg_variant="light"
        ... )
    """
    # Background logic
    classes = [f"py-{py}", f"text-{align}"]

    if bg_variant:
        classes.append(f"bg-{bg_variant}")
        if bg_variant in ("primary", "secondary", "success", "danger", "dark"):
            if not text_color:
                classes.append("text-white")

    if bg_color:
        classes.append(f"bg-{bg_color}" if not bg_color.startswith("#") else "")
        # If hex, add to style
        if bg_color.startswith("#"):
            style = kwargs.get("style", {})
            if isinstance(style, dict):
                style["background-color"] = bg_color
                kwargs["style"] = style

    if text_color:
        classes.append(text_color)

    user_cls = kwargs.pop("cls", "")
    wrapper_cls = merge_classes(" ".join(classes), user_cls)

    attrs: dict[str, Any] = {"cls": wrapper_cls}
    attrs.update(convert_attrs(kwargs))

    # Internal content
    content = []
    content.append(H1(title, cls="display-5 fw-bold"))

    if subtitle:
        content.append(P(subtitle, cls="col-lg-8 mx-auto lead" if align == "center" else "lead"))

    if cta:
        content.append(
            Div(
                cta,
                cls=(
                    "d-grid gap-2 d-sm-flex justify-content-sm-center"
                    if align == "center"
                    else "d-grid gap-2 d-sm-flex"
                ),
            )
        )

    inner = Div(*content, cls="px-4")

    if container:
        return Div(Container(inner), **attrs)

    return Div(inner, **attrs)