FeatureGrid

Feature and FeatureGrid are landing-page pattern components for value propositions, product capabilities, and benefits sections. They provide a clean, consistent way to showcase features with icons, titles, and descriptions.

Bootstrap Reference

Bootstrap 5 Grid

Quick Start

Live Preview

FastHTML native

Build Bootstrap interfaces directly from Python.

HTMX ready

Use hx_* attributes without custom JavaScript.

Themeable

Stay aligned with Bootstrap and Faststrap themes.

FeatureGrid(
    Feature(
        "FastHTML native",
        "Build Bootstrap interfaces directly from Python.",
        icon="lightning-charge",
    ),
    Feature(
        "HTMX ready",
        "Use hx_* attributes without custom JavaScript.",
        icon="arrow-repeat",
    ),
    Feature(
        "Themeable",
        "Stay aligned with Bootstrap and Faststrap themes.",
        icon="palette",
    ),
    columns=3,
)

Visual Examples & Use Cases

1. Three-Column Feature Grid

FeatureGrid(
    Feature("Fast", "Server-rendered and blazing fast.", icon="lightning"),
    Feature("Simple", "Clean Python API, no React needed.", icon="check-circle"),
    Feature("Secure", "Built-in CSRF and XSS protection.", icon="shield-check"),
    columns=3,
)

2. Two-Column Feature Grid

FeatureGrid(
    Feature("Open Source", "Free forever, MIT licensed.", icon="github"),
    Feature("Community", "Backed by Answer.AI and contributors.", icon="people"),
    columns=2,
)

3. Feature Grid with Custom Icons

FeatureGrid(
    Feature(
        "Custom Icons",
        "Use any Bootstrap Icon or pass a custom element.",
        icon="gear",
        icon_cls="bg-success text-white",
    ),
    columns=3,
)

4. Dark Mode Feature Grid

FeatureGrid(
    Feature("Dark Mode", "Built-in dark mode support.", icon="moon"),
    Feature("Responsive", "Mobile-first, works everywhere.", icon="phone"),
    columns=2,
    row_cls="text-white",
)

Practical Functionality

1. Landing Page Hero

LandingLayout(
    Hero(
        title="Build Faster with Python",
        subtitle="152+ UI components for FastHTML",
        cta_text="Get Started",
        cta_href="/docs",
    ),
    FeatureGrid(
        Feature("Fast", "Pure Python, zero JS knowledge.", icon="lightning"),
        Feature("Secure", "Server-rendered and safe.", icon="shield"),
        Feature("Simple", "Clean, composable API.", icon="code"),
        columns=3,
    ),
)

2. Feature Grid Inside a Card

Card(
    Card.Header("Why Faststrap?"),
    Card.Body(
        FeatureGrid(
            Feature("Zero JS", "No JavaScript required for core components.", icon="slash-circle"),
            Feature("HTMX", "Progressive enhancement with HTMX.", icon="arrow-repeat"),
            columns=2,
        )
    ),
)

Parameter Reference

`Feature`

Parameter	Type	Default	Description
`title`	`str`	required	Feature title.
`description`	`str`	required	Supporting feature copy.
`icon`	`str \\| Any \\| None`	`None`	Bootstrap icon name or custom element.
`icon_cls`	`str`	`"bg-primary text-white"`	Classes for the icon wrapper.
`icon_wrapper_cls`	`str \\| None`	`None`	Extra icon wrapper classes.
`title_cls`	`str`	`"fs-4 fw-bold"`	Title classes.
`description_cls`	`str`	`"text-muted"`	Description classes.
`icon_wrapper_attrs`	`dict \\| None`	`None`	Extra icon wrapper attributes.
`title_attrs`	`dict \\| None`	`None`	Extra title attributes.
`description_attrs`	`dict \\| None`	`None`	Extra description attributes.
`**kwargs`	`Any`	`{}`	Extra root attributes.

`FeatureGrid`

Parameter	Type	Default	Description
`*features`	`Any`	required	Feature elements.
`columns`	`int`	`3`	Number of columns at the medium breakpoint.
`row_cls`	`str \\| None`	`None`	Extra row classes.
`col_cls`	`str \\| None`	`None`	Extra column classes.
`row_attrs`	`dict \\| None`	`None`	Extra row attributes.
`col_attrs`	`dict \\| None`	`None`	Extra column attributes.
`**kwargs`	`Any`	`{}`	Extra root attributes.

API Reference

`faststrap.components.patterns.feature.Feature(title, description, icon=None, icon_cls='bg-primary text-white', icon_wrapper_cls=None, title_cls='fs-4 fw-bold', description_cls='text-muted', icon_wrapper_attrs=None, title_attrs=None, description_attrs=None, **kwargs)`

A single feature item with icon, title, and description.

Parameters:

Name	Type	Description	Default
`title`	`str`	Feature title	required
`description`	`str`	Feature description	required
`icon`	`str \| Any \| None`	Bootstrap icon name or custom element	`None`
`icon_cls`	`str`	CSS classes for icon container	`'bg-primary text-white'`
`icon_wrapper_cls`	`str \| None`	Additional classes for the icon wrapper	`None`
`title_cls`	`str`	Additional classes for the title element	`'fs-4 fw-bold'`
`description_cls`	`str`	Additional classes for the description element	`'text-muted'`
`icon_wrapper_attrs`	`dict[str, Any] \| None`	Extra attributes for the icon wrapper	`None`
`title_attrs`	`dict[str, Any] \| None`	Extra attributes for the title element	`None`
`description_attrs`	`dict[str, Any] \| None`	Extra attributes for the description element	`None`
`**kwargs`	`Any`	Additional attributes	`{}`

Returns:

Type	Description
`Div`	Div with feature content

Note

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

Source code in src/faststrap/components/patterns/feature.py

@register(category="patterns")
@beta
def Feature(
    title: str,
    description: str,
    icon: str | Any | None = None,
    icon_cls: str = "bg-primary text-white",
    icon_wrapper_cls: str | None = None,
    title_cls: str = "fs-4 fw-bold",
    description_cls: str = "text-muted",
    icon_wrapper_attrs: dict[str, Any] | None = None,
    title_attrs: dict[str, Any] | None = None,
    description_attrs: dict[str, Any] | None = None,
    **kwargs: Any,
) -> Div:
    """A single feature item with icon, title, and description.

    Args:
        title: Feature title
        description: Feature description
        icon: Bootstrap icon name or custom element
        icon_cls: CSS classes for icon container
        icon_wrapper_cls: Additional classes for the icon wrapper
        title_cls: Additional classes for the title element
        description_cls: Additional classes for the description element
        icon_wrapper_attrs: Extra attributes for the icon wrapper
        title_attrs: Extra attributes for the title element
        description_attrs: Extra attributes for the description element
        **kwargs: Additional attributes

    Returns:
        Div with feature content

    Note:
        Marked as @beta - API may change in future releases.
    """
    icon_wrapper_attrs = convert_attrs(dict(icon_wrapper_attrs or {}))
    title_attrs = convert_attrs(dict(title_attrs or {}))
    description_attrs = convert_attrs(dict(description_attrs or {}))

    icon_el = None
    if isinstance(icon, str):
        icon_el = Div(
            I(cls=f"bi bi-{icon}"),
            cls=merge_classes(
                "feature-icon", icon_cls, icon_wrapper_cls, icon_wrapper_attrs.pop("cls", "")
            ),
            **icon_wrapper_attrs,
        )
    elif icon:
        icon_el = Div(
            icon,
            cls=merge_classes(
                "feature-icon", icon_cls, icon_wrapper_cls, icon_wrapper_attrs.pop("cls", "")
            ),
            **icon_wrapper_attrs,
        )

    return Div(
        icon_el,
        H3(title, cls=merge_classes(title_cls, title_attrs.pop("cls", "")), **title_attrs),
        P(
            description,
            cls=merge_classes(description_cls, description_attrs.pop("cls", "")),
            **description_attrs,
        ),
        cls=merge_classes("feature-item", kwargs.pop("cls", "")),
        **kwargs,
    )

`faststrap.components.patterns.feature.FeatureGrid(*features, columns=3, row_cls=None, col_cls=None, row_attrs=None, col_attrs=None, **kwargs)`

Grid layout for multiple feature items.