# Elements: Layout, structure and containers, further examples > Plainkit 0.28.0. Generated by scripts/build-skills.mjs from core/dist/elements/api.full.json. Do not edit: change the source and run the generator. The element sections in `elements-layout.md` show the first example of each element; these are the rest. ## `pk-app-frame` Example: One module, no search ```html ``` ## `pk-app-shell` Example: Contain: the one child fills the body ```html

With contain the single child takes the height of the body with no wrapper, and @container page queries answer to the body width.

 ``` Example: Back link ```html Edit

The page title is the page's own pk-page-header; the back link goes to the list.

 ``` ## `pk-canvas` Example: Millimetre rulers with an adaptive grid ```html

Sign

Zoom: the grid and the rulers keep their spacing readable.

 ``` Example: Pan and zoom surface with a grid ```html

Page

Drag the ground, or use Ctrl and the wheel to zoom.

 ``` ## `pk-card` Example: Error tone with a footer ```html

The channel rejected the update.

Retry ``` Example: Media, horizontal ```html

First printing, near mint.

 ``` ## `pk-cluster` Example: Spread to the ends ```html LeftRight ``` Example: Vertical ```html FirstSecond ``` ## `pk-container` Example: Scrolling region ```html 
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('world'));
 ``` ## `pk-cta-band` Example: Neutral, start aligned ```html

Questions before you buy?

Talk to a person on the team.

Contact us ``` ## `pk-design-surface` Example: Hidden and empty nodes on a phone frame ```html A visible paragraph. A hidden paragraph. ``` Example: Empty page ```html Drag an element here. ``` ## `pk-detail-layout` Example: Sidebar first, two-up once collapsed ```html

Main content.

Total

$412.00

Items

3

 ``` Example: Record page with phone tabs ```html

Name, SKU

Price, cost

Active

Web, store

 ``` Example: Phone tabs without the Next button ```html

Name, SKU

Price, cost

 ``` Example: Tabs from the page header ```html

Name, SKU

Price, cost

 ``` ## `pk-divider` Example: Plain ```html ``` ## `pk-doc-page` Example: Static slotted mode: plain markup, no script (the current item is the one marked aria-current) ```html Getting startedTheming

Theming

Tokens

Shown as written.

 ``` Example: Home as cards, with a breadcrumb ```html ``` ## `pk-dock` Example: Tab groups and a bottom panel ```html
app.jsREADME.md
run()render()
Choose Files or Outline to switch the left tab.
Ready.
 ``` Example: Declared panels and a centre ```html
Palette
The centre
Always there
Floats from the start
 ``` Example: Persisted layout ```html
SelectRectangle
Resize a separator or move a tab, then reload the page: the arrangement comes back.
Width 120Height 80
 ``` ## `pk-grid` Example: Uneven tracks ```html 1.5 parts1 part ``` Example: Auto columns ```html ABCD ``` Example: A 2:1 split ```html WideNarrow ``` Example: At most three columns ```html 1234 ``` Example: A sticky section nav beside a long article ```html OverviewDetailsA long article scrolls past the nav, which stays in view. ``` ## `pk-heading` Example: Level and look decoupled ```html Page titleA quiet section headingA section that must look bigger than its outline level ``` Example: Tone and weight ```html Archived ``` Example: Truncated ```html A very long record title that will not fit in a narrow card header ``` ## `pk-list` Example: Ordered ```html Create an account.Verify the email address.Add a payment method. ``` Example: Checklist marker ```html Free returns within 30 days.Two-day shipping.24/7 support. ``` Example: Dense, no marker ```html BackendBillingUrgent ``` ## `pk-master-detail-page` Example: Things and their record (set config, load and mountDetail from script: an inline script cannot run under this site's CSP, so wire it the way pk-list-page's load is wired) ```html ``` ## `pk-not-found-page` Example: Custom text with a Go home action ```html ``` ## `pk-page-header` Example: Sticky only from a width up ```html ``` Example: Page: crumbs, title and actions ```html Stock Purchase orders PO 1042 Receive Print ``` Example: Crumbs from data, home crumb and back link ```html Receive ``` Example: Section: title, action and note ```html Refresh Latest 50 ยท in 40 / out 28 ``` Example: Actions in an overflow menu ```html Open Acme Supply Receive Print Archive ``` Example: Record: home crumb, chips, actions and docked tabs ```html Products Blue mug Active On hand 1 Save Details History ``` Example: Record: a long title wrapped on a phone (wrap-title) ```html Open Paid in full Receive goods ``` Example: Record: a long title cut to one line ```html Open Paid in full Late Receive goods ``` Example: Record: status chips and actions ```html Open Acme Supply Print Receive ``` Example: Spacious: opt back into the multi-row breakdown ```html Products A very long product name that would crowd the actions off a single row Active On hand 1 Backordered Print Save Updated moments ago ``` ## `pk-page-shell` Example: A whole-page error state ```html Hidden while the error shows. ``` ## `pk-record-page` Example: Sections around the fields (main-before, main-after, side-after) ```html Created by the import on 3 March.Two open orders. ``` ## `pk-sortable` Example: Horizontal, accepting an external drop ```html Urgent Needs review ``` ## `pk-splitter` Example: Stacked ```html
Editor
Console
 ``` ## `pk-stack` Example: With dividers ```html
Profile
Billing
Notifications
 ``` ## `pk-states-page` Example: Error, with Retry ```html ``` Example: Empty ```html ``` ## `pk-text` Example: Inline runs ```html Status: Paid, due 14 June. ``` Example: Lead text under a heading ```html

Billing

Invoices, payment methods and the billing contact. ``` Example: Variants ```html Revenue$48,210.00Up 12% on last month ``` Example: Truncated ```html A very long file name that will not fit in a narrow column - quarterly-report-final-v3-reviewed.pdf ``` Example: Keeps line breaks ```html Line one Line two, kept. ``` Example: Inline code ```html Run npm install and set PORT=4000 before starting the server. ``` ## `pk-toolbar` Example: Title only ```html ``` ## `pk-workspace` Example: A wide nav pane ```html

Tables

nav-width takes sm, md, lg, xl or a CSS length. A tree label that is still too long is cut with an ellipsis and shows its full text as a tooltip.

 ``` Example: With a docked aside ```html
app.jsREADME.md

app.js

The aside is a docked column on a wide screen, floats over the main pane on a tablet and is its own pane on a phone.

Outline

run()

 ```