{% trans "The page header sits at the top of every panel view. It supports four compositions: plain title, panel overview (icon + title + status pill + subtitle), detail page (back link + icon + title + badge(s) + meta + actions), and minimal with actions." %}
{% trans "Usage" %}
<div class="dcr-page-header">
<h1 class="dcr-page-header__title">Cache Keys</h1>
<div class="dcr-page-header__actions">
<button class="dcr-btn">Flush All</button>
</div>
</div>{% trans "Track unhandled exceptions captured from views, middleware, and Celery tasks. Drill into any event for traceback and frame locals." %}
{% trans "Inspect every signal registered in your Django project, including built in and custom signals." %}
{% trans "Usage" %}
<div class="dcr-page-header">
<div class="dcr-page-header__main">
<div class="dcr-page-header__icon" style="background:var(--dcr-color-danger)">
<svg ...></svg>
</div>
<div class="dcr-page-header__body">
<div class="dcr-page-header__title-row">
<h1 class="dcr-page-header__title">Errors Panel</h1>
<span class="dcr-pill dcr-pill--danger"><span class="dcr-pill__dot"></span>19 UNRESOLVED</span>
</div>
<p class="dcr-page-header__subtitle">Track unhandled exceptions…</p>
</div>
</div>
</div>'stripe_customer_id'
{% trans "Usage" %}
<a href="..." class="dcr-back-link">Back to all errors</a>
<div class="dcr-page-header">
<div class="dcr-page-header__main">
<div class="dcr-page-header__icon" style="background:var(--dcr-color-danger)">
<svg ...></svg>
</div>
<div class="dcr-page-header__body">
<div class="dcr-page-header__title-row">
<h1 class="dcr-page-header__title">KeyError</h1>
<span class="dcr-badge dcr-badge--solid dcr-badge--danger">ERROR</span>
</div>
<p class="dcr-page-header__subtitle">'stripe_customer_id'</p>
<p class="dcr-page-header__meta">event evt-9f3a2b1c · group g-9c1</p>
</div>
</div>
<div class="dcr-page-header__actions">
<button class="dcr-btn dcr-btn--ghost dcr-btn--sm">Copy event ID</button>
<button class="dcr-btn dcr-btn--success dcr-btn--ghost dcr-btn--sm">✓ Resolve</button>
<button class="dcr-btn dcr-btn--ghost dcr-btn--sm">✕ Ignore</button>
</div>
</div>{% trans "Sent at the end of a model's save() method. Receivers can react to updated rows by inspecting the created flag and the instance." %}
{% trans "Usage" %}
<a href="..." class="dcr-back-link">Back to all signals</a>
<div class="dcr-page-header">
<div class="dcr-page-header__main">
<div class="dcr-page-header__icon" style="background:var(--dcr-color-accent)">
<svg ...></svg>
</div>
<div class="dcr-page-header__body">
<div class="dcr-page-header__title-row">
<h1 class="dcr-page-header__title" style="font-family:var(--dcr-font-mono)">post_save</h1>
<span class="dcr-badge dcr-badge--muted">BUILT-IN</span>
<span class="dcr-pill dcr-pill--success"><span class="dcr-pill__dot"></span>4 RECEIVERS</span>
</div>
<p class="dcr-page-header__subtitle">Sent at the end of a model's save() method…</p>
</div>
</div>
</div>{% trans "Centered, max-width wrappers for panel content. Wrap your " %}dcr-page-header{% trans " and body content in " %}dcr-content{% trans " with a size modifier. Most panels should use " %}--lg{% trans "." %}
{% trans "Usage" %}
<!-- modifiers: sm (640px) · md (960px) · lg (1280px) · xl (1600px) · full -->
<div class="dcr-content dcr-content--lg">
<div class="dcr-page-header">…</div>
<!-- panel body -->
</div>{% trans "Uppercase label used to head sub-sections on a panel page. Default variant extends a midline rule to full width. Add " %}--plain{% trans " to suppress the rule. Optionally place a badge inline." %}
{% trans "Usage" %}
<!-- default: midline rule -->
<div class="dcr-section-header">
<h2 class="dcr-section-header__title">Key Information</h2>
</div>
<!-- with inline badge -->
<div class="dcr-section-header">
<h2 class="dcr-section-header__title">Stored Value</h2>
<span class="dcr-badge dcr-badge--warning">HASH</span>
</div>
<!-- plain: no rule -->
<div class="dcr-section-header dcr-section-header--plain">
<h2 class="dcr-section-header__title">Overview</h2>
</div>{% trans "Static informational panel with a left-border accent. For persistent guidance, not flash messages." %}
Default callout with no modifier.
Info
Use for contextual guidance and configuration notes.
Success
Operation completed without errors.
Warning
Check your configuration before proceeding.
Danger
This action cannot be undone.
{% trans "Usage" %}
<!-- modifiers: (none) · info · success · warning · danger -->
<div class="dcr-callout dcr-callout--info">
<p class="dcr-callout__title">Info</p>
<p class="dcr-callout__body">Contextual guidance here.</p>
</div>{% trans "Visually isolated section for irreversible operations. Always pair with a confirmation mechanism." %}
{% trans "Flush all cache keys" %}
{% trans "Permanently deletes every key in the selected cache backend. This cannot be undone." %}
{% trans "Usage" %}
<div class="dcr-danger-zone">
<p class="dcr-danger-zone__title">Flush all cache keys</p>
<p class="dcr-danger-zone__body">Permanently deletes every key…</p>
<button class="dcr-btn dcr-btn--danger">Flush cache</button>
</div>{% trans "Monospace display for keys, values, payloads, or any machine-readable content. Inline and block variants." %}
{% trans "Cache key:" %} sessions:abc123def456
{"status": "ok", "workers": 4, "queues": ["default", "high"]}
{% trans "Usage" %}
{# Inline #}
<code class="dcr-code">sessions:abc123</code>
{# Block #}
<code class="dcr-code dcr-code--block">{"status": "ok"}</code>