{#- chirp-ui: Card component Headless card with optional header, footer, collapsible, and variants. Named slots: header_actions, media, body_actions (for list cards), footer, default (body). Link variants also expose header_badge, header_subtitle, top_meta. Usage: from "chirpui/card.html" import card call card(title="My Card")

Card body content.

end call card(title="Settings", icon="⚙") {% slot header_actions %}{% end %}

Body content.

end call card(title="Feature", variant="feature") {% slot media %}...{% end %}

Body content.

{% slot footer %}Tags or metadata here{% end %} end call card(title="Usage", attrs_map={"id": "usage-widget"})

Stable id on the outer article for hx-target="#usage-widget".

end Footer: use {% slot footer %} (preferred). The legacy footer= string parameter still works but emits a ChirpUIDeprecationWarning. -#} {% def card(title=none, subtitle=none, footer=none, collapsible=false, open=false, variant="", appearance="", tone="", icon=none, border_variant="", header_variant="", cls="", hoverable=false, attrs="", attrs_unsafe="", attrs_map=none) %} {% set _attrs_raw = attrs_unsafe or (attrs | deprecate_param("attrs", "attrs_unsafe or attrs_map")) %} {% set _footer_text = footer | deprecate_param("footer", "{% slot footer %}...{% end %}") %} {% set _appearance = appearance | validate_appearance_block("card", "") %} {% set _tone = tone | validate_tone_block("card", "") %} {# @provides _card_variant — consumed by: alert, badge, divider, settings_row #} {% provide _card_variant = variant %} {% let _card_mods = (["collapsible"] if collapsible else []) + (["gradient-border"] if border_variant == "gradient" else []) + (["gradient-header"] if header_variant == "gradient" else []) + (["hoverable"] if hoverable else []) %} {% let _card_class = "card" | bem(variant=variant, appearance=_appearance, tone=_tone, modifier=_card_mods, cls=cls) %} {% if collapsible %}
{% if title %} {% if icon %}{{ icon | icon }}{% end %}
{{ title }} {% if subtitle %}

{{ subtitle }}

{% end %}
{% slot header_actions %}
{% end %}
{% slot media %}
{% slot %}
{% slot body_actions %}
{#- footer= string param is deprecated; use {% slot footer %} instead -#}
{% else %}
{% if title %}
{% if icon %}{{ icon | icon }}{% end %}
{{ title }} {% if subtitle %}

{{ subtitle }}

{% end %}
{% slot header_actions %}
{% end %}
{% slot media %}
{% slot %}
{% slot body_actions %}
{#- footer= string param is deprecated; use {% slot footer %} instead -#}
{% end %} {% end %} {% end %} {% def card_header(title, subtitle=none, icon=none, cls="") %}
{% if icon %}{{ icon | icon }}{% end %}
{{ title }} {% if subtitle %}

{{ subtitle }}

{% end %}
{% slot %}
{% end %} {% def card_media(cls="") %}
{% slot %}
{% end %} {# Link-styled card for navigation/index grids. Named slots: header_badge (top-left chip/badge), header_subtitle (beneath title, e.g. aliases), footer (below hr, e.g. tags), default (body). #} {% def card_link(href, title, cls="") %}
{% slot header_badge %}
{{ title }}
{% slot header_subtitle %}
{% slot %}
{% end %} {# Partially linked card for list grids with independent source/footer links. Named slots: top_meta (above main link), header_badge, header_subtitle, footer, default (body). #} {% def card_main_link(href, title, cls="") %}
{% slot top_meta %}
{% slot header_badge %}
{{ title }}
{% slot header_subtitle %}
{% slot %}
{% end %} {# Opinionated list/index card for app resources. Named slots: badges, subtitle, footer, default (body extras). link_mode="all" uses a whole-card link; link_mode="main" keeps top/footer content independently interactive. #} {% def resource_card(href, title, description=none, top_meta=none, top_meta_href=none, top_meta_title=none, cls="", link_mode="all") %} {% set link_mode = link_mode | validate_variant(("all", "main"), "all") %} {% if link_mode == "main" %}
{% if top_meta %}
{% if top_meta_href %} {{ top_meta }} {% else %} {{ top_meta }} {% endif %}
{% endif %}
{% slot badges %}
{{ title }}
{% slot subtitle %}
{% if description %}

{{ description }}

{% endif %} {% slot %}
{% else %} {% if top_meta %}
{{ top_meta }}
{% endif %}
{% slot badges %}
{{ title }}
{% slot subtitle %}
{% if description %}

{{ description }}

{% endif %} {% slot %}
{% endif %} {% end %}