Text

Implemented Display

Heading, body, secondary, success, error and mono text.

Kumo reference: kumo-ui.com/components/text/

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

Body

Heading

16px heading

Heading large

20px heading

Body

14px content

Emphasized body

14px content

Body secondary

14px content

Monospace

14px content

Monospace secondary

14px content

Success

14px content

Error

14px content

Show template

{% load wdj %}
<div class="grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  <div class="flex flex-col gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">{% include "wdj/components/text.html" with text="Heading" variant="heading" level=3 only %}{% include "wdj/components/text.html" with text="16px heading" variant="mono-secondary" only %}</div>
  <div class="flex flex-col gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">{% include "wdj/components/text.html" with text="Heading large" variant="heading" only %}{% include "wdj/components/text.html" with text="20px heading" variant="mono-secondary" only %}</div>
  <div class="flex flex-col gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">{% include "wdj/components/text.html" with text="Body" only %}{% include "wdj/components/text.html" with text="14px content" variant="mono-secondary" only %}</div>
  <div class="flex flex-col gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">{% include "wdj/components/text.html" with text="Emphasized body" emphasized=True only %}{% include "wdj/components/text.html" with text="14px content" variant="mono-secondary" only %}</div>
  <div class="flex flex-col gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">{% include "wdj/components/text.html" with text="Body secondary" variant="secondary" only %}{% include "wdj/components/text.html" with text="14px content" variant="mono-secondary" only %}</div>
  <div class="flex flex-col gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">{% include "wdj/components/text.html" with text="Monospace" variant="mono" only %}{% include "wdj/components/text.html" with text="14px content" variant="mono-secondary" only %}</div>
  <div class="flex flex-col gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">{% include "wdj/components/text.html" with text="Monospace secondary" variant="mono-secondary" only %}{% include "wdj/components/text.html" with text="14px content" variant="mono-secondary" only %}</div>
  <div class="flex flex-col gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">{% include "wdj/components/text.html" with text="Success" variant="success" only %}{% include "wdj/components/text.html" with text="14px content" variant="mono-secondary" only %}</div>
  <div class="flex flex-col gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">{% include "wdj/components/text.html" with text="Error" variant="error" only %}{% include "wdj/components/text.html" with text="14px content" variant="mono-secondary" only %}</div>
</div>

Headings

Section heading

Subsection heading

Show template

{% load wdj %}
<div class="grid gap-2">{% include "wdj/components/text.html" with variant="heading" level=2 text="Section heading" only %}{% include "wdj/components/text.html" with variant="heading" level=3 text="Subsection heading" only %}</div>

Secondary

Secondary text retains readable contrast in both themes.

Show template

{% load wdj %}
{% include "wdj/components/text.html" with variant="secondary" text="Secondary text retains readable contrast in both themes." only %}

Inline monospace

Edit settings.py to configure your project.

Show template

{% load wdj %}
<p class="text-base">Edit <code class="font-mono text-[0.9em]">settings.py</code> to configure your project.</p>

Truncated text

This long resource title remains available in full.

Show template

{% load wdj %}
<p class="max-w-48 truncate text-base" title="This long resource title remains available in full.">This long resource title remains available in full.</p>

API Reference

Prop	Type	Default	Description
text	string	unset	Text; 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.
variant	string	component-specific	Variant; pass the documented value shown in the examples.
level	number	unset	Level; pass the documented value shown in the examples.
size	string	base	Size; pass the documented value shown in the examples.
emphasized	bool	False	Emphasized; pass the documented value shown in the examples.
truncate	bool	False	Truncate; 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.

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