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.

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

![Screenshot: Large centered hero section with title and button](../../assets/images/hero-basic.png)

Visual Examples & Use Cases

1. Dark Mode Hero

Use bg_variant="dark" for a premium, high-contrast look. FastStrap will add text-white automatically for dark hero backgrounds unless you pass text_color.

Code & Output

```python

Live Preview (Dark)

Modern Python Development

Zero JS, Infinite Possibilities.

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

```

2. Branded Backgrounds

Use bg_color for custom brand colors, or pass normal HTML attributes such as style through **kwargs when you need a richer background treatment.

Hero(
    title="Adventure Awaits",
    subtitle="Design a landing-page hero without leaving Python.",
    bg_color="#0f172a",
    text_color="text-white",
    cta=Button("Start Exploring", variant="light"),
)

Practical Functionality

1. Customizing Children

The cta argument can accept any FastHTML element or component.

Hero(
    ...,
    cta=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 \\| None`	Secondary text or description.
`cta`	`Any`	Call to action area, usually a button or button group.
`align`	`str`	Alignment: `start`, `center`, `end`.
`bg_variant`	`str \\| None`	Bootstrap background utility suffix, such as `primary`, `light`, or `dark`.
`bg_color`	`str \\| None`	Custom background color. Hex values are applied as inline background color.
`text_color`	`str \\| None`	Text color class, such as `text-white` or `text-dark`.
`py`	`str`	Vertical padding scale used for `py-{value}`. Default `5`.
`container`	`bool`	If `True`, wraps content in a `.container`. Default `True`.
`**kwargs`	`Any`	Additional HTML attributes, including `id`, `cls`, `style`, and HTMX attributes.

`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

Examples:

>>> 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

    Examples:
        >>> 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)