FeatureGrid

Feature and FeatureGrid are landing-page pattern components for value propositions, product capabilities, and benefits sections.

Quick Start

from faststrap import Feature, FeatureGrid

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

Parameters

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

Parameters:

Name	Type	Description	Default
*features	Any	Feature components	()
columns	int	Number of columns (default: 3)	3
row_cls	str | None	Additional classes for the row wrapper	None
col_cls	str | None	Additional classes for each column wrapper	None
row_attrs	dict[str, Any] | None	Extra attributes for the row wrapper	None
col_attrs	dict[str, Any] | None	Extra attributes for each column wrapper	None
**kwargs	Any	Additional attributes	{}

Returns:

Type	Description
Div	Div with responsive feature grid

Note

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

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

@register(category="patterns")
@beta
def FeatureGrid(
    *features: Any,
    columns: int = 3,
    row_cls: str | None = None,
    col_cls: str | None = None,
    row_attrs: dict[str, Any] | None = None,
    col_attrs: dict[str, Any] | None = None,
    **kwargs: Any,
) -> Div:
    """Grid layout for multiple feature items.

    Args:
        *features: Feature components
        columns: Number of columns (default: 3)
        row_cls: Additional classes for the row wrapper
        col_cls: Additional classes for each column wrapper
        row_attrs: Extra attributes for the row wrapper
        col_attrs: Extra attributes for each column wrapper
        **kwargs: Additional attributes

    Returns:
        Div with responsive feature grid

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

    col_size = 12 // columns
    cols = []
    for feat in features:
        current_col_attrs = dict(col_attrs)
        cols.append(
            Col(
                feat,
                md=col_size,
                cls=merge_classes("mb-4", col_cls, current_col_attrs.pop("cls", "")),
                **current_col_attrs,
            )
        )

    return Div(
        Row(*cols, cls=merge_classes(row_cls, row_attrs.pop("cls", "")), **row_attrs),
        cls=merge_classes("feature-grid", kwargs.pop("cls", "")),
        **kwargs,
    )