LayerCard
Implemented LayoutCompound surface card with distinct primary and secondary layers.
Kumo reference: kumo-ui.com/components/layer-card/
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Layered surface
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_card.html" secondary="Next steps" secondary_href="/install/" secondary_action_label="Go to next steps" %}
<p class="text-base">Get started with wdj</p>
{% endwdj_component %}Description
Status
Production
Active deployment
Review configuration and resource usage.
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_card.html" title="Production" description="Active deployment" secondary="Status" %}
<p class="text-base">Review configuration and resource usage.</p>
{% endwdj_component %}Linked card
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_card.html" title="Documentation" href="/install/" secondary="Resources" %}
<p class="text-base">Review configuration and resource usage.</p>
{% endwdj_component %}Surface card
Project settings
One primary surface for this section.
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_card.html" title="Project settings" %}
<p class="text-base text-kumo-subtle">One primary surface for this section.</p>
{% endwdj_component %}Multiple adjacent cards
Traffic
Review project traffic.
Deployments
Review deployment activity.
Show template
{% load wdj %}
<div class="grid gap-4 sm:grid-cols-2">{% wdj_component "wdj/components/layer_card.html" title="Traffic" %}
<p class="text-base">Review project traffic.</p>
{% endwdj_component %}{% wdj_component "wdj/components/layer_card.html" title="Deployments" %}
<p class="text-base">Review deployment activity.</p>
{% endwdj_component %}</div>Filter toolbar and small tabs
Recent requests
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_card.html" secondary="Recent requests" %}
{% include "wdj/components/tabs.html" with mode="local" size="sm" items=demo_tab_items id="audit-layer-tabs" only %}{% include "wdj/components/input.html" with id="audit-layer-search" label="Filter requests" size="sm" only %}
{% endwdj_component %}Test identifiers
Diagnostics
Inspect the stable component attributes.
Show template
{% load wdj %}
{% wdj_component "wdj/components/layer_card.html" title="Diagnostics" attrs=audit_test_attrs %}
<p>Inspect the stable component attributes.</p>
{% endwdj_component %}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| secondary | string | unset | Secondary; pass the documented value shown in the examples. |
| secondary_href | string | unset | Secondary href; pass the documented value shown in the examples. |
| secondary_action_label | string | unset | Secondary action label; pass the documented value shown in the examples. |
| title | string | unset | Title; pass the documented value shown in the examples. |
| description | string | unset | Description; pass the documented value shown in the examples. |
| slot | string / HTML slot | unset | Rich HTML supplied by the wdj_component block tag, rendered in an isolated context. |
| href | string | unset | Href; pass the documented value shown in the examples. |
| attrs | dict | {} | Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only. |
| class | string | "" | Class; pass the documented value shown in the examples. |