Card — Component Storybook

LIVE PREVIEW 3

Card Title

No Footer

USAGE

template

{%{% endverbatim %} load theme_components {% verbatim %}%}

{%{% endverbatim %} theme_{{ name }}{% for p in required_context %} {{ p.name }}{% endfor %}{% for p in optional_context %} {{ p.name }}={{ p.default|default:"..." }}{% endfor %} {% verbatim %}%}

PROPS — OPTIONAL 8

Name	Type	Default
`title`	`Optional[str]`	—
`content`	`str`	—
`footer`	`Optional[str]`	—
`css_prefix`	`str`	—
`attrs`	`dict`	—
`slot_header`	`str`	—
`slot_body`	`str`	—
`slot_footer`	`str`	—

AVAILABLE SLOTS 3

slot_header slot_body slot_footer

CSS VARIABLES 15

--border --card --card-foreground --color-bg-card --color-bg-subtle --color-border-subtle --color-primary --color-primary-text --color-success --font-semibold --radius --radius-2xl --shadow-md --space-4 --space-5

TEMPLATE SOURCE

card.html

<div class="{{ css_prefix }}card {% if attrs.class %}{{ attrs.class }}{% endif %}"
     {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
    {% if slot_header %}
    <div class="{{ css_prefix }}card-header">
        {{ slot_header|safe }}
    </div>
    {% elif title %}
    <div class="{{ css_prefix }}card-header">
        <h3 class="{{ css_prefix }}card-title">{{ title }}</h3>
    </div>
    {% endif %}
    <div class="{{ css_prefix }}card-body">
        {% if slot_body %}{{ slot_body|safe }}{% else %}{{ content }}{% endif %}
    </div>
    {% if slot_footer %}
    <div class="{{ css_prefix }}card-footer">
        {{ slot_footer|safe }}
    </div>
    {% elif footer %}
    <div class="{{ css_prefix }}card-footer">
        {{ footer }}
    </div>
    {% endif %}
</div>