Documentation
Description
A card with named slots for header, body, and footer areas.
Demonstrates the named slots feature — a BlockComponent with
Meta.slots declaring multiple content areas that template authors
fill using {% slot "name" %}...{% endslot %}.
The body slot is required; header and footer are optional
and will be omitted from the output when not provided.
Example usage::
{% slotted_card title="Welcome" %}
{% slot "header" %}
<img src="banner.jpg" alt="Banner">
{% endslot %}
{% slot "body" %}
<p>Main card content goes here.</p>
{% endslot %}
{% slot "footer" %}
<button>Save</button>
{% endslot %}
{% endslotted_card %}
Minimal usage (only required slot)::
{% slotted_card %}
{% slot "body" %}
<p>Just the body.</p>
{% endslot %}
{% endslotted_card %}
Usage
Minimal example
{% slotted_card "Welcome Card" variant="default" %}
{% slot "body" %}This is a basic card body with clean layout.{% endslot %}
{% endslotted_card %}
Bigger example
{% slotted_card "foo" variant="default" %}
{% slot "body" %}Sample body content{% endslot %}
{% slot "header" %}Sample header content{% endslot %}
{% slot "footer" %}Sample footer content{% endslot %}
{% endslotted_card %}
Qualified tag usage
{% cards__slotted_card "Welcome Card" variant="default" %}
{% slot "body" %}This is a basic card body with clean layout.{% endslot %}
{% endcards__slotted_card %}
Parameters
| Name | Type | Required | Default | Choices | Description |
|---|---|---|---|---|---|
title
|
str
|
No | — | — | Optional card title displayed above the body. |
variant
|
str
|
Yes |
default
|
default
,
elevated
,
outlined
|
Visual variant of the card. |
Sandbox