DataCard

@experimental

Structured metadata card for models, datasets, experiments, and entities.

---

Quick Start

from faststrap import DataCard

DataCard(
    "ResNet-50",
    subtitle="Image Classification",
    status="active",
    metrics={"Accuracy": "95.2%", "Loss": "0.04"},
    fields={"Framework": "PyTorch", "Version": "v2.1"},
)

---

Features

• Title, subtitle, and status badge
• Metrics section for key-value pairs
• Metadata table for detailed fields
• Optional footer for actions

---

Parameters

Parameter	Type	Default	Description
title	str	required	Primary title or entity name.
subtitle	str \| None	None	Optional secondary description.
status	str \| None	None	Status string rendered as a badge.
metrics	dict[str, str] \| None	None	Metric name → value pairs.
fields	dict[str, str] \| None	None	Field name → value pairs rendered as a table.
footer	Any \| None	None	Optional footer content.
variant	str	"default"	Visual variant.
**kwargs	Any		Extra wrapper attributes.

---

Usage Examples

Model Card

DataCard(
    "GPT-4o",
    subtitle="OpenAI Multimodal",
    status="active",
    metrics={"Parameters": "1.8T", "Context": "128K"},
    fields={"Provider": "OpenAI", "Type": "LLM", "License": "Proprietary"},
)

Dataset Card

DataCard(
    "CIFAR-10",
    subtitle="Image Classification",
    status="completed",
    metrics={"Samples": "60K", "Classes": "10", "Size": "163 MB"},
    fields={"Format": "Pickle", "Split": "50K/10K"},
)

Experiment Run

DataCard(
    "Run #42",
    subtitle="2024-01-15",
    status="failed",
    metrics={"Duration": "2h 34m", "Epochs": "50"},
    fields={"Learning Rate": "0.001", "Batch Size": "32"},
    footer=Button("Retry", variant="outline-primary"),
)

---

Notes

• Status strings are mapped to Bootstrap badge variants automatically.
• Marked @experimental.

---

API Reference

faststrap.components.display.data_card.DataCard(title, *, subtitle=None, status=None, metrics=None, fields=None, footer=None, variant='default', **kwargs)

Structured metadata card for models, datasets, experiments, and entities.

Provides a consistent surface for displaying key-value metadata, status badges, and summary metrics.

Parameters:

Name	Type	Description	Default
title	str	Primary title or entity name.	required
subtitle	str | None	Optional secondary description.	None
status	str | None	Optional status string rendered as a badge.	None
metrics	dict[str, str] | None	Optional dict of metric name -> value pairs.	None
fields	dict[str, str] | None	Optional dict of field name -> value pairs rendered as a metadata table.	None
footer	Any | None	Optional footer content.	None
variant	str	Visual variant. Currently only "default" is supported.	'default'
**kwargs	Any	Additional HTML attributes for the wrapper.	{}

Returns:

Type	Description
Div	FastHTML Div element styled as a data card.

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

@register(category="display")
@experimental
def DataCard(
    title: str,
    *,
    subtitle: str | None = None,
    status: str | None = None,
    metrics: dict[str, str] | None = None,
    fields: dict[str, str] | None = None,
    footer: Any | None = None,
    variant: str = "default",
    **kwargs: Any,
) -> Div:
    """Structured metadata card for models, datasets, experiments, and entities.

    Provides a consistent surface for displaying key-value metadata,
    status badges, and summary metrics.

    Args:
        title: Primary title or entity name.
        subtitle: Optional secondary description.
        status: Optional status string rendered as a badge.
        metrics: Optional dict of metric name -> value pairs.
        fields: Optional dict of field name -> value pairs rendered as
            a metadata table.
        footer: Optional footer content.
        variant: Visual variant. Currently only ``"default"`` is supported.
        **kwargs: Additional HTML attributes for the wrapper.

    Returns:
        FastHTML ``Div`` element styled as a data card.
    """
    user_cls = kwargs.pop("cls", "")

    header_children: list[Any] = [H5(title, cls="mb-1")]
    if subtitle:
        header_children.append(P(subtitle, cls="text-muted mb-0 small"))
    if status:
        header_children.append(Span(status, cls=f"badge bg-{_status_variant(status)} ms-2"))

    body_children: list[Any] = []
    if metrics:
        body_children.append(
            Div(
                *[
                    Div(
                        Span(key, cls="text-muted small"),
                        Span(value, cls="fw-semibold"),
                        cls="d-flex justify-content-between",
                    )
                    for key, value in metrics.items()
                ],
                cls="faststrap-data-card-metrics",
            )
        )
    if fields:
        body_children.append(
            Table(
                Tbody(
                    *[
                        Tr(
                            Td(key, cls="text-muted small"),
                            Td(value),
                        )
                        for key, value in fields.items()
                    ]
                ),
                cls="table table-sm mb-0",
            )
        )

    footer_children: list[Any] = []
    if footer is not None:
        footer_children.append(footer)

    children: list[Any] = [
        Div(*header_children, cls="card-header"),
        Div(*body_children, cls="card-body"),
    ]
    if footer_children:
        children.append(Div(*footer_children, cls="card-footer"))

    attrs: dict[str, Any] = {
        "cls": merge_classes("card faststrap-data-card", user_cls),
    }
    attrs.update(convert_attrs(kwargs))
    return Div(*children, **attrs)