Gallery / Demo Components / Card / Slotted card / Dashboard Grid Showcase Gallery / / Dashboard Grid Showcase
Demo Components / Card / Slotted card /
Documentation
Variant

Dashboard Grid Showcase

Demonstrates raw template mode (no {{ component }} wrapper) where design_components tags are laid out directly in a multi-column CSS grid.

Preview

{% slotted_card "Metric 1" %}
  {% slot "body" %}Sample body content{% endslot %}
{% endslotted_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
{% slotted_card "Welcome Card" variant="default" %}
  {% slot "body" %}This is a basic card body with clean layout.{% endslot %}
{% endslotted_card %}

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; padding: 1rem;">
    <div class='slotted-card outlined'><h3 class='slotted-card__title'>Active Users</h3><div class='slotted-card__body'>
            <h2 style="margin: 0; color: #0284c7; font-size: 28px;">1,248</h2>
            <p style="margin: 0; font-size: 12px; color: #16a34a;">+12% vs last week</p>
        </div></div>
    <div class='slotted-card outlined'><h3 class='slotted-card__title'>API Requests</h3><div class='slotted-card__body'>
            <h2 style="margin: 0; color: #6366f1; font-size: 28px;">94.2k</h2>
            <p style="margin: 0; font-size: 12px; color: #64748b;">Average latency 18ms</p>
        </div></div>
</div>