Nesting and layering
A QA harness for PLAN.md §6. Core markup only; nothing on this page is patched with page CSS, so a broken combination is a real finding.
Containers in containers
panel > panel
Outer panel
Outer body text.
Inner panel
Inner body text. The inner panel should step down a surface level and its header should sit flush in its own corners.
panel > card > panel
Panel
Card inside the panel.
Panel inside the card
Third level.
card > card > card
Level 1
Level 2
Level 3
Concentric corners: inner radius should equal outer radius minus padding.
modal > panel
Device details
Network
192.168.1.40, link up 1 Gb/s.
modal > tabs > panel
Preferences
General
drawer > card
columns (2) > panel > table
Orders
| Order | Customer | Status | Total |
|---|---|---|---|
| #10482 | Ava Thompson | Paid | $128.00 |
| #10481 | Marcus Lee | Pending | $64.50 |
| #10480 | Priya Nair | Failed | $212.10 |
Refunds
| Order | Reason | Amount |
|---|---|---|
| #10470 | Duplicate charge | $39.99 |
| #10466 | Not delivered | $88.00 |
columns (3) > panel > table
CPU
| Core | Load | Temp |
|---|---|---|
| 0 | 42% | 61°C |
| 1 | 38% | 59°C |
Disks
| Mount | Used | Free |
|---|---|---|
| / | 71% | 58 GB |
| /data | 93% | 12 GB |
Network
| Iface | In | Out |
|---|---|---|
| eth0 | 12 Mb/s | 3 Mb/s |
| wlan0 | 0 | 0 |
columns (4) > panel > table
North
| Site | kW | State |
|---|---|---|
| N-01 | 412 | Online |
East
| Site | kW | State |
|---|---|---|
| E-07 | 96 | Degraded |
South
| Site | kW | State |
|---|---|---|
| S-03 | 0 | Offline |
West
| Site | kW | State |
|---|---|---|
| W-12 | 1,340 | Online |
columns > columns (nested grid) > card
Nested A
Inner two-column grid, left.
Nested B
Inner two-column grid, right.
Outer side
The outer grid's narrow column.
accordion > accordion
Outer: Playback
Inner: Crossfade
Crossfade between tracks by 4 seconds.
Inner: Gapless
Gapless playback for albums.
Outer: Library
Library options.
accordion > table
Recent sessions (3)
| Started | User | Duration | Result |
|---|---|---|---|
| 09:41 | ava | 00:12:04 | OK |
| 09:12 | marcus | 00:03:51 | Failed |
| 08:30 | priya | 01:02:10 | OK |
tabs > accordion > form
Push
Push settings.
popover > form
dropdown > nested list
- Recent
- Older
- Older
Tables
table in modal (.modal-lg, 12 columns)
Monthly totals
| Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 12,040 | 11,872 | 13,410 | 14,002 | 15,330 | 16,104 | 15,988 | 17,240 | 18,019 | 19,447 | 21,630 | 24,905 |
| -1.2% | -1.4% | +13% | +4.4% | +9.5% | +5.0% | -0.7% | +7.8% | +4.5% | +7.9% | +11% | +15% |
table in card in a two-column row
Top customers
| Customer | Orders | Lifetime value | Last order | Region |
|---|---|---|---|---|
| Northwind Traders | 412 | $20,188.00 | 2026-09-30 | EMEA |
| Contoso Pharmaceuticals | 96 | $18,720.50 | 2026-09-28 | APAC |
Notes
The left card's five-column table must fit or scroll inside its half of the row; it must not push this card off screen.
table in table (expanded row detail)
| Order | Customer | Items | Total | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| #10482 ▾ | Ava Thompson | 3 | $128.00 | ||||||||||||||||
|
|||||||||||||||||||
| #10481 ▸ | Marcus Lee | 1 | $64.50 | ||||||||||||||||
sticky-header table in a scrolling panel inside a modal
Event log
Last 20 events
| Time | Source | Message |
|---|---|---|
| 09:41:20 | web-1 | Deploy finished |
| 09:41:02 | web-2 | Health check OK |
| 09:40:51 | queue | Depth above threshold |
| 09:39:14 | backup | Snapshot complete |
| 09:38:07 | pay | Webhook retry failed |
| 09:37:44 | web-1 | Cache warmed |
| 09:36:12 | auth | Key rotated |
| 09:35:59 | web-3 | Started |
| 09:34:30 | queue | Drained |
| 09:33:01 | db | Vacuum complete |
| 09:32:18 | web-2 | Restarted |
| 09:31:40 | cron | Nightly report sent |
table with every editable cell type and state (§7)
| State | Cell |
|---|---|
| idle editable | Road trip |
| editing text | |
| editing select | |
| editing date | |
| editing number | |
| editing checkbox | |
| dirty | Road trip 2 |
| saving | Road trip 2 |
| saving (htmx) | Road trip 2 |
| error | Required |
| read-only | Locked |
| focusable cell | Arrow-key target |
whole row in edit mode (tr.is-editing)
| Name | Status | Date | Nights | Paid | |
|---|---|---|---|---|---|
| Lisbon | Booked | 2026-11-04 | 3 | ||
| Faro | Planned | 2026-11-09 | 1 |
table inside .columns, stacked card form on Mobile (.table.is-stacked)
| Ticket | Subject | Status | Owner |
|---|---|---|---|
| #4821 | Can't export invoices | Pending | Ava |
| #4820 | SSO loop on Safari | Open |
Sibling column. Below the Tablet tier the table on the left should become one card per row with column labels.
inputs inside table cells, inside a modal
Edit line items
| Description | Category | Date | Qty | |
|---|---|---|---|---|
badges, btn-group, segmented and row-action menu inside table cells
Releases
| Release | Tags | View | Actions |
|---|---|---|---|
| v4.2.0 | stablelts | ||
| v4.1.3 | hotfix |
|
|
| v4.1.2 | old | — |
long unbroken text in narrow cells and headers
Artifact_checksum_sha256_e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855
| Key | Value |
|---|---|
| url | https://example.com/a/very/long/path/without/any/spaces/that/should/not/blow/out/the/column?query=1234567890 |
| hash | e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 |
supercalifragilisticexpialidocious-badge
Upload of /mnt/storage/backups/2026-10-02T09:41:20Z-full-snapshot.tar.zst failed
empty state and skeletons inside a table
| Name | Owner | Updated |
|---|---|---|
|
No documents match
Clear the filter to see all 214 documents.
| ||
carousel > card > table
Forms
field > input-group (icon + input + button)
$
Enter a number.
field-row with mixed widths inside a card
Avoids FAT32 limits
form in a modal in a drawer
— a fixed drawer whose button opens a real popover modal with a form.
vertical tabs beside a form, in a modal
Settings
Some settings apply after restart.
accordion in tabs in a panel in columns
Channel 1
Low band
+2 dB
High band
Off.
Channel 2
Compressor
Master
Outputs
- Main L/R
- Monitor A
panel header holding an input-group, select and buttons (narrow)
Queue
- Job 1
- Job 2
Sibling column; the header on the left has a third of the row.
Another sibling.
Layering
dropdown in a sticky table header in a scrolling modal
Assign tickets
| Ticket |
Status ▾ |
Owner |
|---|---|---|
| #4821 | Pending | Ava |
| #4820 | Open | Leo |
| #4819 | Closed | Ava |
| #4818 | Closed | Priya |
| #4817 | Pending | Sam |
| #4816 | Open | Leo |
| #4815 | Closed | Ava |
| #4814 | Closed | Elena |
| #4813 | Pending | Marcus |
| #4812 | Closed | Ava |
| #4811 | Open | Leo |
| #4810 | Closed | Priya |
| #4809 | Closed | Sam |
| #4808 | Pending | Ava |
| #4807 | Closed | Leo |
| #4806 | Closed | Elena |
| #4805 | Open | Marcus |
| #4804 | Closed | Ava |
| #4803 | Closed | Priya |
| #4802 | Pending | Sam |
| #4801 | Closed | Leo |
| #4800 | Closed | Ava |
— the same scrolling modal in the top layer.
modal over modal (confirm over a form)
toast over an open modal
— then fire a v4 fixed toast and a top-layer toast from inside it.
dropdown inside a scroll-snap carousel slide
window pattern (min/max/close) inside a panel
Workspace
Uploads