Widgets
A shared content frame, unboxed values and quiet states. Your application owns placement, data and configuration.
Heading, content and footer
Use a real heading and a unique accessible name. Description, header action and footer are optional. A host may choose a scheme and stretch its cell; the body keeps its footer at the bottom.
<section class="widget" aria-labelledby="membership">
<header class="widget-header">
<div class="widget-heading">
<h2 id="membership" class="widget-title">Membership at a glance</h2>
<p class="widget-description">Optional description</p>
</div>
<a class="widget-action" href="/members">Optional action</a>
</header>
<div class="widget-content">Caller content</div>
<footer class="widget-footer">
<a class="more" href="/members">Member directory</a>
</footer>
</section>widget--plain-header removes the header divider. --widget-padding and --widget-border-color provide deliberate presentation choices. Text links inherit the scheme foreground; anchor buttons retain their button colors and focus treatment. Components emit no placement/editor wrapper or layout utility classes.
Unboxed metrics
A standalone metric is a definition list. Groups use dl.widget-metrics with div.widget-metric groups, each containing its own dt and dd. Numeric values appear above labels visually, while terms remain first in the semantic DOM.
<dl class="widget-metric">
<dt>Active</dt>
<dd class="widget-metric-value widget-metric-value--short font-metric tnum"
style="--widget-metric-size: var(--text-4xl);
--widget-metric-weight: 650;
--widget-metric-width: 80%;">42</dd>
<dd class="widget-metric-detail">Optional units or detail</dd>
</dl>| Hook | Property | Unset |
|---|---|---|
--font-metric | font-family via .font-metric | Body font |
--font-metric-size | Initial font-size via .font-metric | Underlying value style |
--font-metric-width | Initial font-stretch via .font-metric | Underlying value style |
--widget-metric-size | font-size | text-2xl, or the short/long variation |
--widget-metric-weight | font-weight | Existing bold weight |
--widget-metric-width | font-stretch | Inherited stretch |
Choose widget-metric-value--short for tall short values (text-4xl) or widget-metric-value--long for compact long values (text-lg). The default is text-2xl. Callers choose after formatting; CSS does not count digits or guarantee a single-line fit. Explicit hooks override these defaults. Size hooks do not change leading or tracking; pair token-sized overrides with the matching short/long variation, or set the matching line-height and letter-spacing locally on the value.
Width means glyph width when the font supports its registered width axis, never widget columns. Static fonts remain readable. Long values wrap without clipping or hiding digits. No font is selected or downloaded.
.font-metric keeps the family expression matching Baseplate's var(--font-metric, var(--font-body, sans-serif)), sans-serif contract. Its optional --font-metric-size and --font-metric-width hooks provide initial value settings; widget-specific size/width hooks take precedence. Unset settings preserve the underlying styles through revert-layer. Labels, units, descriptions and ordinary numbers keep their typography. Callers supply locale, formatted values and units.
Keep size/weight utilities off hook-controlled values: the utilities layer intentionally wins over component hooks. .font-metric and .tnum remain compatible.
Use dd.widget-metric-status for missing, denied or unavailable values; omit the prominent-value and font classes. A known zero stays 0.
Quiet inline messages
<div class="widget-message">
<span class="widget-message-icon" aria-hidden="true">Optional icon</span>
<div class="widget-message-content">
<p>Temporarily unavailable</p>
<p class="widget-message-detail">Try again later or open the full page.</p>
</div>
</div>Omit the icon and detail when unnecessary. The message adds no card or forced live region; the host chooses dynamic feedback semantics. Reuse Timeline, StatusIndicator and ProgressBar inside content slots, and give charts an equivalent table independent of the renderer.
Chart data, progress and video
table.widget-table keeps compact native columns, ordinary type and single quiet row separators at narrow sizes. Keep captions and header scopes; replace table--lined on chart fallback tables.
Use the existing progress height hook for thin card progress: style="--progress-height: var(--line-025)". The default is line-05; progress-bar--thick uses line-1. Fill/background, status and timeline variations remain caller choices.
A video uses the existing .embed inside the content slot. Use a descriptive iframe title and a direct-video link when embedding is unavailable. The YouTube examples show narrow/wide output with autoplay disabled. YouTube needs at least 200px in both dimensions; narrower hosts should show the direct-link state.
<div class="widget-content">
<div class="embed" style="min-block-size: 200px;">
<iframe class="block border-0"
src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=0"
title="YouTube embedded-player demonstration" loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
allow="encrypted-media; picture-in-picture" allowfullscreen
style="min-block-size: 200px;"></iframe>
</div>
</div>
<footer class="widget-footer">
<a href="https://www.youtube.com/watch?v=M7lc1UVf-VE">Watch on YouTube</a>
</footer>Baseplate owns flips and controls on the back: permissions, draft state, saved configuration and reset/Save behavior. Either face can use this frame; the shared references demonstrate output.
Design Machines library coverage
The final read-only comparison inspected 34 admitted widgets: 29 in the library and 5 already placed on the board. The examples cover shared compositions rather than copying domain renderers. The install displayed v1.0.0-beta.2; its exact source SHA was unavailable. Populated Atlas states absent from the live install were compared against the pinned producer templates.
Additional references cover incomplete profile progress and next steps, runtime/backup facts, metric-plus-summary tables, ranked category/place/date lists, populated notifications/activity, sharing-aware metrics and map data fallback. Multi-column data retains every column in a labelled, keyboard-focusable scroll region at narrow sizes.
| Observed widget | Location | Composition | Example |
|---|---|---|---|
| Organization activity | Board | Activity timeline | View example |
| Network map | Board | Empty map + four-column city fallback; no map runtime | View example |
| Open proposals | Board | Proposal list + caller footer | View example |
| Needs my input | Board | Proposal/deadline list | View example |
| Drafts I'm working on | Board | Caller-filtered proposal list | View example |
| Unread notifications | Library | Populated notification list + empty state | View example |
| Profile completion | Library | Thin progress + remaining next actions; optional footer | View example |
| Linked organizations | Library | Identity/link list | View example |
| Membership at a glance | Library | Grouped metrics | View example |
| Membership requirements | Library | Metric + requirements table; empty/unavailable states | View example |
| Circles | Library | Metric + kind/count table | View example |
| Connection requests | Library | Quiet empty message + caller action/footer | View example |
| Connected organizations | Library | Metric + identity list | View example |
| Assembly health | Library | Ordinary facts + status + per-fact action | View example |
| Assembly | Library | Ordinary runtime fact table; optional footer | View example |
| Updates | Library | Ordinary status/message + action | View example |
| Backups | Library | Destination/status table | View example |
| Organizations in the network | Library | Standalone count metric | View example |
| People in the network* | Library | Sharing-aware unavailable metric and detail | View example |
| Network over time | Library | Static illustration + independent data table | View example |
| Sectors | Library | Ranked labels/counts + decorative bars + full table | View example |
| Average organization size | Library | Formatted decimal metric + denominator detail | View example |
| Cities in the network | Library | Standalone metric + ordinary detail | View example |
| Countries in the network | Library | Standalone count metric | View example |
| People over time | Library | Four-column membership-position fallback + provisional observation | View example |
| Organization types | Library | Ranked breakdown with wrapping labels | View example |
| Places in the network | Library | Place label/count list + shown-count note | View example |
| Recently joined | Library | Link/date list | View example |
| Respond by | Library | Proposal/deadline list | View example |
| Recent decisions | Library | Decision timeline | View example |
| Governance at a glance | Library | Grouped metrics + year detail | View example |
| Open proposal count | Library | Standalone prominent value + label/detail | View example |
| Needs my input count | Library | Standalone prominent value + label/detail | View example |
| Decisions this year | Library | Known zero metric | View example |
Back-face controls currently expose Columns, Rows and Colour scheme. Baseplate owns their flip, validation and Save behavior. No production board or configuration was changed.
Sources and ownership
Extracted from Baseplate 1821a8dd, Governance d995f68d and Atlas 03b03b90. Baseplate font-metric producer 257acac4 is merged on trusted main. The source comparison records original labels, deliberate variations and omitted route/editor exceptions.
Baseplate owns validated theme configuration, saved metric overrides, reset and dashboard editor behavior. Entry limits, sort/filter settings and video/embed configuration belong to the owning Go widgets; Live Wires only styles their output. Templ emits semantic slots without bundling CSS. These references do not retest application persistence or migrate consumers.