{% trans "KPI tiles for at-a-glance numeric summaries. Wrap tiles in " %}dcr-metric-grid{% trans " for automatic responsive columns." %}
{% trans "Usage" %}
<!-- value modifiers: (none) · success · warning · danger · disabled -->
<div class="dcr-metric-grid">
<div class="dcr-metric">
<span class="dcr-metric__label">Tasks Processed</span>
<span class="dcr-metric__value dcr-metric__value--success">847</span>
</div>
</div>{% trans "Label / value pairs on a subtle background. Two layouts: " %}{% trans "vertical" %}{% trans " (stacked rows, default) and " %}{% trans "horizontal" %}{% trans " (inline info bar, add " %}--horizontal{% trans ")." %}
{% trans "Vertical (default)" %}
{% trans "Usage" %}
<dl class="dcr-dl">
<div class="dcr-dl__row">
<dt class="dcr-dl__label">Key</dt>
<dd class="dcr-dl__value dcr-dl__value--mono">user:42:profile</dd>
</div>
<div class="dcr-dl__row">
<dt class="dcr-dl__label">Type</dt>
<dd class="dcr-dl__value"><span class="dcr-badge dcr-badge--warning">HASH</span></dd>
</div>
<div class="dcr-dl__row">
<dt class="dcr-dl__label">TTL</dt>
<dd class="dcr-dl__value">1h <span class="dcr-dl__secondary">(31m remaining)</span></dd>
</div>
</dl>{% trans "Horizontal (--horizontal)" %}
{% trans "Usage" %}
<dl class="dcr-dl dcr-dl--horizontal">
<div class="dcr-dl__item">
<dt class="dcr-dl__label">Host</dt>
<dd class="dcr-dl__value dcr-dl__value--mono">redis-prod-1.internal:6379</dd>
</div>
<div class="dcr-dl__item">
<dt class="dcr-dl__label">Version</dt>
<dd class="dcr-dl__value">7.2.4</dd>
</div>
</dl>{% trans "Horizontal with action (--horizontal + __actions)" %}
{% trans "Usage" %}
<dl class="dcr-dl dcr-dl--horizontal">
<div class="dcr-dl__item">
<dt class="dcr-dl__label">Total Events</dt>
<dd class="dcr-dl__value">1,842</dd>
</div>
<div class="dcr-dl__item">
<dt class="dcr-dl__label">Unresolved</dt>
<dd class="dcr-dl__value" style="color:var(--dcr-color-danger)">19</dd>
</div>
<!-- __actions is pushed to the far right via margin-left:auto -->
<div class="dcr-dl__actions">
<a href="…" class="dcr-btn dcr-btn--ghost dcr-btn--sm">View grouped</a>
</div>
</dl>{% trans "Responsive grid for the panel index page. Use " %}dcr-panel-grid{% trans " as the container and " %}dcr-panel-card{% trans " for each item. Wrap the icon in " %}dcr-panel-card__icon-wrap{% trans " with a colour modifier. Use " %}dcr-badge{% trans " variants for install status. Add " %}dcr-panel-card--coming-soon{% trans " to dim unavailable panels." %}
{% trans "Monitor connections, memory, keys, and throughput." %}
{% trans "Inspect cached entries, hit/miss ratios." %}
{% trans "Monitor errors, stack traces, and exceptions." %}
{% trans "Core framework for Django Control Room panels." %}
{% trans "Usage" %}
<!-- section label -->
<div class="dcr-section-header">
<h3 class="dcr-section-header__title">Featured Panels</h3>
</div>
<div class="dcr-panel-grid">
<!-- installed - accent icon wrap -->
<div class="dcr-panel-card">
<div class="dcr-panel-card__top">
<div class="dcr-panel-card__icon-wrap dcr-panel-card__icon-wrap--accent">
<svg class="dcr-panel-card__icon" …></svg>
</div>
<span class="dcr-badge dcr-badge--success">INSTALLED</span>
</div>
<h3 class="dcr-panel-card__title">Redis Panel</h3>
<p class="dcr-panel-card__desc">Monitor connections…</p>
<div class="dcr-panel-card__footer">
<a href="/redis/" class="dcr-panel-card__link">View panel</a>
</div>
</div>
<!-- icon wrap colour variants -->
<!-- (none) · accent · success · warning · danger · info · muted · purple · indigo -->
<!-- not installed -->
<div class="dcr-panel-card">
…
<span class="dcr-badge dcr-badge--muted">NOT INSTALLED</span>
…
<a href="#" class="dcr-panel-card__link">Install panel</a>
</div>
<!-- coming soon -->
<div class="dcr-panel-card dcr-panel-card--coming-soon">
…
<span class="dcr-badge dcr-badge--warning">COMING SOON</span>
…
<span class="dcr-panel-card__link dcr-panel-card__link--muted">Coming soon</span>
</div>
</div>
</div>{% trans "A full-width bordered card divided into equal columns by vertical rules. Add as many " %}dcr-split-card__section{% trans " children as needed - the dividers are generated automatically. Stacks vertically on narrow viewports. Compose freely with " %}dcr-panel-card__icon-wrap{% trans " and " %}dcr-panel-card__link{% trans " inside each section." %}
{% trans "We're building more tools to bring full observability to your Django admin. Follow our progress on GitHub." %}
{% trans "Django Control Room is built to be extended. Use our cookiecutter template to scaffold a fully structured panel plugin in seconds." %}
{% trans "Usage" %}
<div class="dcr-split-card">
<div class="dcr-split-card__section">
<div class="dcr-panel-card__icon-wrap dcr-panel-card__icon-wrap--info">
<svg class="dcr-panel-card__icon" …></svg>
</div>
<h3 class="dcr-split-card__title">More panels on the way</h3>
<p class="dcr-split-card__desc">Description text.</p>
<div class="dcr-split-card__footer">
<a href="#" class="dcr-panel-card__link">GitHub</a>
</div>
</div>
<div class="dcr-split-card__section">
<!-- second section … -->
</div>
</div>{% trans "MIT-licensed and fully open. Inspect the code, file issues, or contribute on GitHub." %}
{% trans "Full API reference, configuration options, and how-to guides for panel authors." %}
{% trans "Ask questions, share panels, and stay up to date in the Django Control Room Discord." %}
{% trans "Usage" %}
<!-- 3-way split: just add a third section -->
<div class="dcr-split-card">
<div class="dcr-split-card__section">…</div>
<div class="dcr-split-card__section">…</div>
<div class="dcr-split-card__section">…</div>
</div>{% trans "Generic bordered container for building any card-like panel UI. Compose " %}dcr-card__header{% trans ", " %}dcr-card__body{% trans ", " %}dcr-card__row{% trans ", and " %}dcr-card__footer{% trans " as needed. Add " %}dcr-card__header--subtle{% trans " to tint the header. Use " %}dcr-card__body--flush{% trans " to remove padding from the body (e.g. when the body contains a table or list)." %}
{% trans "Body content goes here. Use " %}dcr-card__body{% trans " for padded content." %}
{% trans "Use " %}dcr-card__header--subtle{% trans " for a tinted header row." %}
{% trans "Cards don't require a header. Drop any zone you don't need." %}
{% trans "Usage" %}
<!-- header + body -->
<div class="dcr-card">
<div class="dcr-card__header">
<h3 class="dcr-card__title">
<svg class="dcr-card__title-icon" …></svg>
Card title
</h3>
<span class="dcr-card__meta">meta</span>
</div>
<div class="dcr-card__body">…</div>
<div class="dcr-card__footer">Footer note</div>
</div>
<!-- subtle (tinted) header -->
<div class="dcr-card">
<div class="dcr-card__header dcr-card__header--subtle">…</div>
…
</div>
<!-- flush body (no padding - use for tables, lists) -->
<div class="dcr-card">
<div class="dcr-card__header">…</div>
<div class="dcr-card__body dcr-card__body--flush">…</div>
</div>{% trans "Use " %}dcr-card{% trans " with " %}dcr-card__row{% trans " items. Each row uses " %}dcr-card__row-source{% trans " (badge), " %}dcr-card__row-text{% trans ", and " %}dcr-card__row-time{% trans "." %}
{% trans "Usage" %}
<div class="dcr-card">
<div class="dcr-card__header">
<h3 class="dcr-card__title">
<svg class="dcr-card__title-icon" …></svg>
Recent activity
</h3>
<span class="dcr-card__meta">Across all panels</span>
</div>
<div class="dcr-card__row">
<span class="dcr-card__row-source"><span class="dcr-badge dcr-badge--warning">ERRORS</span></span>
<span class="dcr-card__row-text">KeyError in checkout.views.create_order</span>
<span class="dcr-card__row-time">2m ago</span>
</div>
</div>{% trans "Use " %}dcr-card{% trans " with " %}dcr-card__row{% trans " items. Each row uses " %}dcr-card__row-label{% trans " and " %}dcr-card__row-value{% trans " (add " %}--bold{% trans " for emphasis). " %}dcr-card__footer{% trans " adds a muted note below the rows." %}
{% trans "Usage" %}
<div class="dcr-card">
<div class="dcr-card__header">
<h3 class="dcr-card__title">System</h3>
</div>
<div class="dcr-card__row">
<span class="dcr-card__row-label">Django</span>
<span class="dcr-card__row-value">5.0.6</span>
</div>
<div class="dcr-card__row">
<span class="dcr-card__row-label">Database</span>
<span class="dcr-card__row-value dcr-card__row-value--bold">PostgreSQL 16</span>
</div>
<div class="dcr-card__footer">Last refreshed just now.</div>
</div>{% trans "Use " %}dcr-code-viewer{% trans " as the outer wrapper. " %}dcr-code-viewer__header{% trans " / " %}__label{% trans " / " %}__meta{% trans " style the labelled header strip. " %}dcr-code-viewer__body{% trans " holds the highlight.js code block. Optionally add a " %}dcr-code-viewer__title{% trans " zone for function signatures." %}
{"id": "42", "username": "ada", "theme": "dark"}{% trans "Usage" %}
<div class="dcr-code-viewer">
<div class="dcr-code-viewer__header">
<span class="dcr-code-viewer__label"><> Raw Value</span>
<span class="dcr-code-viewer__meta">412 B</span>
</div>
<pre class="dcr-code-viewer__body"><code class="language-json">{"key": "value"}</code></pre>
</div>
<!-- With optional title zone -->
<div class="dcr-code-viewer">
<div class="dcr-code-viewer__title">
<div class="dcr-code-viewer__title-main">
<div class="dcr-code-viewer__title-sig">
<span class="dcr-code-viewer__title-lineno">1</span>
<span class="dcr-code-viewer__title-name">create_profile</span>
<span class="dcr-code-viewer__title-params">sender = auth.User</span>
</div>
<div class="dcr-code-viewer__title-path">profiles/signals.py:14</div>
</div>
<div class="dcr-code-viewer__title-tags">
<span class="dcr-badge">profiles</span>
</div>
</div>
<div class="dcr-code-viewer__header">…</div>
<pre class="dcr-code-viewer__body">…</pre>
</div>