ActionCard

Implemented Blocks

Guidance card with caller-owned navigation or local actions.

A wdj composition built from the existing component library.

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Getting started

Build your first page

Install wdj, compose Django templates and connect server-owned actions.

Installation guide Try the playground

Show template

{% load wdj %}
{% wdj_component "wdj/components/action_card.html" title="Build your first page" description="Install wdj, compose Django templates and connect server-owned actions." icon="book-open" %}
  {% include "wdj/components/button.html" with label="Installation guide" variant="primary" href="/install/" only %}
  {% include "wdj/components/button.html" with label="Try the playground" href="/guide/#playground" only %}
{% endwdj_component %}

Resource actions

Explore demo resources

Open the synthetic dashboard or reuse the resource list block.

Open dashboard Resource list examples

Show template

{% load wdj %}
{% wdj_component "wdj/components/action_card.html" title="Explore demo resources" description="Open the synthetic dashboard or reuse the resource list block." icon="database" %}
  {% include "wdj/components/button.html" with label="Open dashboard" variant="primary" href="/resources/" only %}
  {% include "wdj/components/button.html" with label="Resource list examples" href="/blocks/resource-list/" only %}
{% endwdj_component %}

Local checklist

Review an integration

A local checklist can use Alpine without a server request.

Show template

{% load wdj %}
<div x-data="{ reviewed: false }">
  {% wdj_component "wdj/components/action_card.html" title="Review an integration" description="A local checklist can use Alpine without a server request." icon="check-circle-2" %}
    <button type="button" @click="reviewed = !reviewed" :aria-pressed="reviewed" class="h-9 rounded-lg bg-kumo-base px-3 text-base font-medium text-kumo-default ring-1 ring-kumo-line hover:bg-kumo-tint" x-text="reviewed ? 'Mark as pending' : 'Mark as reviewed'">Mark as reviewed</button>
    <p role="status" class="text-base text-kumo-subtle" x-text="reviewed ? 'Demo review complete.' : 'Demo review pending.'"></p>
  {% endwdj_component %}
</div>

API Reference

Prop	Type	Default	Description
title	string	unset	Title; pass the documented value shown in the examples.
description	string	unset	Description; pass the documented value shown in the examples.
icon	string	unset	Icon; 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.
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.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract