Demo Topbar layout
Prose, tables, figures, lists, code, and document structure styled by the shared stylesheet.
The quick design brief, tested as normal content.
Heading stack, inline text, and rhythm.
Body text can include links, marked text, strong text, emphasis, HTML, inline code, Tab, and sample output.
A realistic article with mixed semantic content.
Classic interfaces should make structure obvious. This paragraph checks rhythm, contrast, and spacing against adjacent lists, quoted material, and dense metadata.
Depth can be a usability affordance when it tells the eye what is interactive, grouped, or foregrounded.
Inline SVG stands in for screenshots, diagrams, or product images.
Wide tables should scroll horizontally on small screens.
| Element | Purpose | Default Treatment | State Hook | Status |
|---|---|---|---|---|
article |
Independent content block | Raised panel with header and footer support | None | Ready |
details |
Native disclosure | Low elevation disclosure block | open |
Review |
button |
Primary command | Beveled physical control | aria-pressed, aria-busy |
Ready |
input |
Form entry | Sunken text field or custom native control | aria-invalid |
Expanded |
Tests overflow, monospace color, and keyboard hints.
Use Tab and Shift + Tab to inspect focus states in the test pages.
button[aria-busy="true"] {
pointer-events: none;
}
body.layout-sidebar {
grid-template-columns: 16rem minmax(0, 1fr);
}Buttons, tabs, notices, menus, pagination, stats, progress indicators, dialogs, and compact app surfaces.
Variants, busy state, pressed state, disabled state, and role-based buttons.
Default, info, success, warning, and danger variants.
Driven by ARIA roles; switching behavior belongs to a paired script.
This panel is a static mockup. Behavior can be added by a small paired script later.
Command lists, shortcut text, and compact tool surfaces.
Native details and summary styling.
Text, links, lists, tables, code, forms, buttons, articles, details, dialogs, and ARIA-driven states.
No for the basics. Classes are used for layout helpers, notices, badges, and app-oriented compositions.
The page shells collapse into vertical flow, and toolbars become stacked full-width controls.
Native progress and meter elements.
A static preview of native dialog styling.
A framed application surface with titlebar, pane, and statusbar.
Window container with titlebar, pane, and statusbar.
Avatars, badges, statuses, and dense rows.
Chapter refresh
Button and layout pass
Links get tactile edges without needing button classes.