Example Component Library
Demo Components
Card
Layouts Hero
Info card Slotted card
Alert Badge Button Quote oneup Rich button User card
Demo Extra Button
Demo Nav
Cards Info card
Elements Quote oneup Badge
Icon Accessibility
Generic Divider Tooltip
Action button Design guidelines
Demo Single Chip Pill
Gallery / Demo Components / Card / Slotted card Gallery / / Slotted card
Demo Components / Card /
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 %}
  {% slot "body" %}Sample body content{% 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 %}
  {% slot "body" %}Sample body content{% endslot %}
{% endcards__slotted_card %}

Parameters

Name Type Required Default Choices Description
title str No — — Optional card title displayed above the body.
variant str No default default , outlined , elevated Visual variant.
Sandbox