Detail w/ sidebar

Master-detail record page: order header with status and actions, line items and timeline beside a metadata sidebar. Built from live Canvas components.

Order detail

Anatomy. Breadcrumb + header Row (title, status Badge, toast-backed actions) over a two-thirds/one-third split: items DataTable and shipment Feed in the main Column; customer identity, copyable ID DescriptionList rows, shipping address, and totals Cards in the sidebar. The split is a Row stacks of span-8 and span-4 columns that stacks once the section is md wide or narrower, where a third no longer fits the ID rows.

ORD-2847

Fulfilled
Placed May 20, 2026

Items

Product
Qty
Price
2
$198.00
1
$49.00
1
$29.00

Timeline

  • DE
    Delivered handed to the customer
    May 22, 2026, 2:15 PM
  • SH
    Shipped left the fulfillment center
    May 21, 2026, 9:30 AM
  • PC
    Payment confirmed card charged $300.84
    May 20, 2026, 11:02 AM
  • OP
    Order placed submitted through checkout
    May 20, 2026, 10:58 AM

Customer

RC
Rachel Chen
rachel.chen@example.com
Order ID
ORD-2847
Payment ID
pay_9f3k82aq
Customer ID
cus_8c3177fe

Shipping

Rachel Chen
42 Innovation Drive
San Francisco, CA 94107
United States

Summary

Subtotal
$276.00
Shipping
$0.00
Tax
$24.84
Total
$300.84
← Dashboard
Errors & empty →