{% trans "Use " %}dcr-tabs{% trans " to switch between related views or sections. The active tab gets an accent-colour underline indicator. Works with " %}<a>{% trans " links or " %}<button>{% trans " elements." %}
{% trans "Usage" %}
<nav class="dcr-tabs">
<a href="..." class="dcr-tabs__tab active" aria-current="page">Layout</a>
<a href="..." class="dcr-tabs__tab">Color tokens</a>
<a href="..." class="dcr-tabs__tab">Components</a>
<a href="..." class="dcr-tabs__tab">Patterns</a>
</nav>{% trans "Usage" %}
<!-- Works with <button> for JS-driven tab panels -->
<nav class="dcr-tabs">
<button class="dcr-tabs__tab" aria-selected="true">Overview</button>
<button class="dcr-tabs__tab">Events</button>
<button class="dcr-tabs__tab">Config</button>
</nav>{% trans "Use " %}dcr-back-link{% trans " to navigate up one level from a detail page. The left arrow is injected by CSS - do not include it in the HTML. When placed as the first child inside a " %}dcr-page-header{% trans ", it spans the full width of the header above the title row." %}
{% trans "Usage" %}
<a href="..." class="dcr-back-link">Back to all errors</a>{% trans "views.product_list · last seen 2 min ago" %}
{% trans "Usage" %}
<div class="dcr-page-header">
<!-- Back link as first child sits above the title row -->
<a href="..." class="dcr-back-link">Back to all errors</a>
<div class="dcr-page-header__main">
<div class="dcr-page-header__icon" style="background:var(--dcr-color-danger)">...</div>
<div class="dcr-page-header__body">
<div class="dcr-page-header__title-row">
<h1 class="dcr-page-header__title">ValueError: list index out of range</h1>
<span class="dcr-badge dcr-badge--danger">UNRESOLVED</span>
</div>
<p class="dcr-page-header__subtitle">views.product_list · last seen 2 min ago</p>
</div>
</div>
<div class="dcr-page-header__actions">
<button class="dcr-btn dcr-btn--success">Resolve</button>
<button class="dcr-btn dcr-btn--ghost">Ignore</button>
</div>
</div>