Recording archive
Panels use the current palette and density settings.
Type and emission
Victor Mono: regular, bold, italic, and bold italic. The website hosts its own font files.
Muted text stays readable against the panel surface.
128 recordings indexed
<h2 class="ph-title">Type and emission</h2>
<span class="ph-metric">128</span>
<p class="ph-muted">Supporting text</p>Panels and actions
<article class="ph-panel">
<h3 class="ph-panel-heading">Archive</h3>
<div class="ph-panel-body">
<button class="ph-button ph-button-primary">
Open
</button>
</div>
</article>Fields and validation
<label class="ph-field" for="name">
Recording name
<input class="ph-input" id="name" required>
</label>
<input class="ph-input" aria-invalid="true"
aria-describedby="error">
<p id="error" class="ph-danger">
Explain how to fix the value.
</p>Status and notices
CompleteNeeds reviewFailedQueued
Use text to explain status. Color is supplementary; notices are ordinary content unless your application makes them live announcements.
<span class="ph-badge ph-success">Complete</span>
<p class="ph-notice">12 recordings are ready to review.</p>Tables
| File | Duration | Format | State |
|---|---|---|---|
| rain-at-the-station.wav | 04:32 | 48 kHz / 24-bit | Complete |
| footsteps-in-the-hall.flac | 01:18 | 48 kHz / 24-bit | Needs review |
<div class="ph-table-scroll" role="region"
aria-label="Recordings" tabindex="0">
<table class="ph-table">
<caption>Sample recording files</caption>
<!-- Native table headings and rows -->
</table>
</div>Tabs and disclosure
Use Left/Right, Home, and End to switch tabs. This example supplies keyboard handling in examples/components.js.
<div class="ph-tabs" role="tablist" aria-label="Information">
<!-- Buttons need tab roles, panel IDs, and keyboard behavior. -->
</div>What does the stylesheet implement?
The appearance of tabs, buttons, fields, and dialogs. Native HTML supplies controls and disclosure behavior. Application code supplies tab selection, submission, and dialog opening.
Technical content
Prose uses a readable line length. Use Tab to move between native controls.
This whole region opts out of text glow, including emphasis.
// Apply to your existing container.
const display = mountPhosphor(root, {
glow: 50,
palette: 'website:amber',
});
// Optional classes:
// ph-prose, ph-sharp, ph-kbd,
// ph-range, ph-progress,
// ph-syntax-keyword/string/number/commentNative dialogs
The action above calls showModal(). Keep the dialog inside the Phosphor scope so it inherits the palette and font.
<dialog class="ph-dialog" aria-labelledby="dialog-title">
<h2 id="dialog-title">Recording details</h2>
<form method="dialog">
<button class="ph-button" autofocus>Close</button>
</form>
</dialog>