Object Console
ID: object_console
Category: navigation
Required slots: primary_panel
Live example
Pattern Demo: Object Console
Split-panel primary record and timeline view.
Membership Record
Status: Active
Overview
Read more
Split-panel console layout with primary record and related timeline.
When to use / When not to use
When to use
- This pattern appears frequently in the navigation category and has reusable slot anatomy.
When not to use
- Avoid this pattern when a simpler native element can meet the same user goal with less cognitive load.
Accessibility notes
- Keyboard keys: .
- ARIA attributes: .
- Visible focus required: No.
Implementation
<x-ui.object-console title="Pattern Demo: Object Console" subtitle="Split-panel primary record and timeline view.">
<x-slot:primary>
<x-ui.record-card title="Membership Record">
<p class="dig-meta">Member: Jane Smith</p>
<p>Status: <x-ui.badge-status status="active" /></p>
</x-ui.record-card>
</x-slot:primary>
<x-slot:timeline>
<ul class="dig-list">
<li>Profile updated</li>
<li>Renewal notice sent</li>
<li>Event RSVP confirmed</li>
</ul>
</x-slot:timeline>
</x-ui.object-console>