{% load ui_classes %}
{% load ui_props %}
{% ui_class "ui.card" "root" surface=surface tone=tone elevation=elevation size=size padding=padding paddingX=padding_x paddingY=padding_y gap=gap gapX=gap_x gapY=gap_y margin=margin marginX=margin_x marginY=margin_y class=class as root_class %}
{% ui_class "ui.overlay" "link" as overlay_link_class %}
<{{ as }} data-ui-card
{% if interactive|ui_bool or href %}
data-ui-interactive="surface"
{% endif %}
data-surface="{{ surface }}"
data-tone="{{ tone }}"
data-elevation="{{ elevation }}"
data-size="{{ size }}"
data-padding="{{ padding }}"
data-padding-x="{{ padding_x }}"
data-padding-y="{{ padding_y }}"
data-gap="{{ gap }}"
data-gap-x="{{ gap_x }}"
data-gap-y="{{ gap_y }}"
data-margin="{{ margin }}"
data-margin-x="{{ margin_x }}"
data-margin-y="{{ margin_y }}"
class="{{ root_class }}"
{% if not href %}
{{ attrs }}>
{% else %}
>
{% endif %}
{{ slot }}
{% if href %}
{% endif %}