Visual Cards

FlipCard, TiltCard, RevealCard, and GlowCard are CSS-only visual card primitives for premium landing pages, portfolios, dashboards, and product surfaces.

They are part of core Faststrap and use Bootstrap/Faststrap theme variables. No JavaScript is required.

Quick Start

from faststrap import Button, FlipCard, GlowCard, RevealCard, TiltCard

FlipCard(
    front="Plan summary",
    back=Button("Upgrade", variant="light"),
    height="260px",
)

TiltCard("Hover me", cls="card-body")

RevealCard(
    "/static/room.jpg",
    "Harbor Suite",
    description="Private terrace, skyline view.",
    action=Button("View Room", variant="light"),
)

GlowCard("Important metric", glow_color="#38bdf8", intensity="high", cls="card-body")

Components

Component	Purpose
`FlipCard`	Two-sided card that flips on hover or focus-within.
`TiltCard`	Card with subtle 3D lift on hover.
`RevealCard`	Image card with a hover-revealed overlay.
`GlowCard`	Card with configurable glow intensity and color.

Parameters

`FlipCard`

Parameter	Type	Default	Description
`front`	`Any`	required	Front face content.
`back`	`Any`	required	Back face content.
`height`	`str \\| None`	`300px`	Card height.
`width`	`str \\| None`	`100%`	Card width.
`duration`	`str \\| None`	`0.6s`	Flip animation duration.

`RevealCard`

Parameter	Type	Default	Description
`img_src`	`str`	required	Image URL.
`title`	`str`	required	Overlay heading and default image alt text.
`description`	`str \\| None`	`None`	Overlay copy.
`action`	`Any \\| None`	`None`	Optional action element.
`alt`	`str \\| None`	`title`	Image alt text.
`height`	`str \\| None`	`300px`	Card height.

`GlowCard`

Parameter	Type	Default	Description
`glow_color`	`str \\| None`	`var(--bs-primary)`	CSS color for the glow.
`intensity`	`low \\| medium \\| high`	`medium`	Glow strength.

Notes

These components are marked @beta because they are visual primitives newly absorbed into core.
faststrap-visual.css is loaded automatically by add_bootstrap().
Motion respects prefers-reduced-motion.

API Reference

`faststrap.components.display.visual_cards.FlipCard(front, back, *, height=UNSET, width=UNSET, duration=UNSET, **kwargs)`

Render a CSS-only 3D flip card.

Parameters:

Name	Type	Description	Default
`front`	`Any`	Content for the front face.	required
`back`	`Any`	Content for the back face.	required
`height`	`str \| None`	Card height. Defaults to `300px`.	`UNSET`
`width`	`str \| None`	Card width. Defaults to `100%`.	`UNSET`
`duration`	`str \| None`	Flip animation duration. Defaults to `0.6s`.	`UNSET`
`**kwargs`	`Any`	Additional HTML attributes.	`{}`

Source code in src/faststrap/components/display/visual_cards.py

@register(category="display")
@beta
def FlipCard(
    front: Any,
    back: Any,
    *,
    height: str | None = UNSET,
    width: str | None = UNSET,
    duration: str | None = UNSET,
    **kwargs: Any,
) -> Div:
    """Render a CSS-only 3D flip card.

    Args:
        front: Content for the front face.
        back: Content for the back face.
        height: Card height. Defaults to ``300px``.
        width: Card width. Defaults to ``100%``.
        duration: Flip animation duration. Defaults to ``0.6s``.
        **kwargs: Additional HTML attributes.
    """
    cfg = resolve_defaults("FlipCard", height=height, width=width, duration=duration)
    c_height = cfg.get("height") or "300px"
    c_width = cfg.get("width") or "100%"
    c_duration = cfg.get("duration") or "0.6s"

    user_cls = kwargs.pop("cls", "")
    user_style = kwargs.pop("style", None)
    style = _merge_style(
        f"height: {c_height}; width: {c_width}; --faststrap-flip-duration: {c_duration};",
        user_style,
    )

    attrs: dict[str, Any] = {
        "cls": merge_classes("faststrap-flip-card", user_cls),
        "style": style,
    }
    attrs.update(convert_attrs(kwargs))

    return Div(
        Div(
            Div(front, cls="faststrap-flip-card-front card"),
            Div(back, cls="faststrap-flip-card-back card"),
            cls="faststrap-flip-card-inner",
        ),
        **attrs,
    )

`faststrap.components.display.visual_cards.TiltCard(*children, **kwargs)`

Render a card with a subtle 3D hover lift.

Source code in src/faststrap/components/display/visual_cards.py

@register(category="display")
@beta
def TiltCard(*children: Any, **kwargs: Any) -> Div:
    """Render a card with a subtle 3D hover lift."""
    user_cls = kwargs.pop("cls", "")
    attrs: dict[str, Any] = {
        "cls": merge_classes("faststrap-tilt-card card", user_cls),
    }
    attrs.update(convert_attrs(kwargs))
    return Div(*children, **attrs)

`faststrap.components.display.visual_cards.RevealCard(img_src, title, *, description=None, action=None, alt=None, height=UNSET, **kwargs)`

Render an image card that reveals content on hover.

Parameters:

Name	Type	Description	Default
`img_src`	`str`	Background image URL.	required
`title`	`str`	Overlay heading.	required
`description`	`str \| None`	Optional overlay copy.	`None`
`action`	`Any \| None`	Optional action element, such as a `Button`.	`None`
`alt`	`str \| None`	Image alt text. Defaults to `title`.	`None`
`height`	`str \| None`	Card height. Defaults to `300px`.	`UNSET`
`**kwargs`	`Any`	Additional HTML attributes.	`{}`

Source code in src/faststrap/components/display/visual_cards.py

@register(category="display")
@beta
def RevealCard(
    img_src: str,
    title: str,
    *,
    description: str | None = None,
    action: Any | None = None,
    alt: str | None = None,
    height: str | None = UNSET,
    **kwargs: Any,
) -> Div:
    """Render an image card that reveals content on hover.

    Args:
        img_src: Background image URL.
        title: Overlay heading.
        description: Optional overlay copy.
        action: Optional action element, such as a ``Button``.
        alt: Image alt text. Defaults to ``title``.
        height: Card height. Defaults to ``300px``.
        **kwargs: Additional HTML attributes.
    """
    cfg = resolve_defaults("RevealCard", height=height)
    c_height = cfg.get("height") or "300px"

    user_cls = kwargs.pop("cls", "")
    user_style = kwargs.pop("style", None)
    attrs: dict[str, Any] = {
        "cls": merge_classes("faststrap-reveal-card card", user_cls),
        "style": _merge_style(f"height: {c_height};", user_style),
    }
    attrs.update(convert_attrs(kwargs))

    overlay_children: list[Any] = [H4(title, cls="mb-2")]
    if description:
        overlay_children.append(P(description, cls="mb-3"))
    if action:
        overlay_children.append(action)

    return Div(
        Img(src=img_src, alt=alt or title, cls="faststrap-reveal-image"),
        Div(*overlay_children, cls="faststrap-reveal-overlay"),
        **attrs,
    )

`faststrap.components.display.visual_cards.GlowCard(*children, glow_color=UNSET, intensity=UNSET, **kwargs)`

Render a card with an animated glow on hover.

Source code in src/faststrap/components/display/visual_cards.py

@register(category="display")
@beta
def GlowCard(
    *children: Any,
    glow_color: str | None = UNSET,
    intensity: GlowIntensity | None = UNSET,
    **kwargs: Any,
) -> Div:
    """Render a card with an animated glow on hover."""
    cfg = resolve_defaults("GlowCard", glow_color=glow_color, intensity=intensity)
    c_color = cfg.get("glow_color") or "var(--bs-primary)"
    c_intensity = cfg.get("intensity") or "medium"

    user_cls = kwargs.pop("cls", "")
    user_style = kwargs.pop("style", None)
    attrs: dict[str, Any] = {
        "cls": merge_classes("faststrap-glow-card card", f"glow-{c_intensity}", user_cls),
        "style": _merge_style(f"--faststrap-glow-color: {c_color};", user_style),
    }
    attrs.update(convert_attrs(kwargs))
    return Div(*children, **attrs)