duck.etc.blueprints.welcome.ui.components.features_grid

FeaturesGrid component — a 3-column grid of feature highlight cards.

Each card has an animated floating emoji icon, a title, and a short description. A colored bottom border animates in on hover.

Module Contents

Classes

FeaturesGrid

Renders a responsive grid of Duck Framework feature cards.

API

class duck.etc.blueprints.welcome.ui.components.features_grid.FeaturesGrid(element: Optional[str] = None, properties: Optional[Dict[str, str]] = None, props: Optional[Dict[str, str]] = None, style: Optional[Dict[str, str]] = None, inner_html: Optional[Union[str, str, float]] = None, children: Optional[List[duck.html.components.HtmlComponent]] = None, **kwargs)[source]

Bases: duck.html.components.InnerComponent

Renders a responsive grid of Duck Framework feature cards.

Features are defined inline as a class-level constant so they are easy to update without touching layout logic.

Initialization

Initialize an HTML component.

Parameters:

  • element – The HTML element tag name (e.g., textarea, input, button). Can be None, but make sure element is returned by get_element method.

  • accept_inner_html – Whether the HTML component accepts an inner body (e.g., inner-body-here).

  • inner_html – Inner html to add to the HTML component. Defaults to None.

  • properties – Dictionary for properties to initialize the component with.

  • props – Just same as properties argument (added for simplicity).

  • style – Dictionary for style to initialize the component with.

  • **kwargs – Extra keyword arguments

Raises:

HtmlComponentError – If ‘element’ is not a string or ‘inner_html’ is set but ‘accept_inner_html’ is False.

FEATURES

[(‘🐍’, ‘Pure Python UI’, ‘Build your entire frontend in Python using the component tree. No template…

build_card(icon: str, title: str, desc: str, color: str, delay: str) → duck.html.components.container.Container[source]

Returns a single feature card container.

Parameters:

  • icon – Emoji character shown as the card icon.

  • title – Short feature title.

  • desc – One or two sentence feature description.

  • color – CSS color string for the hover bottom border.

  • delay – CSS animation-delay string for staggered entrance.

Returns:

A Container styled as a feature card.

get_element() → str[source]
Returns:

The HTML element tag for this component.

on_create() → None[source]

Builds the full features grid with all feature cards.