Imposter

Preview Available in release assets

Center a bounded authored surface over a containing region without removing the underlying content from its truthful source order.

Imposter primary example

<section class="thin-imposter" aria-labelledby="imposter-demo-title">
  <h2 id="imposter-demo-title">Centered confirmation</h2>
  <div data-imposter-boundary>
    <article data-imposter aria-labelledby="confirm-title">
      <h3 id="confirm-title">Draft saved</h3>
      <p>Your changes remain available. This in-flow example demonstrates bounded centering without changing document order.</p>
      <p><a href="/drafts/current">Open draft</a></p>
    </article>
  </div>
</section>

Show code

<section class="thin-imposter" aria-labelledby="imposter-demo-title">
  <h2 id="imposter-demo-title">Centered confirmation</h2>
  <div data-imposter-boundary>
    <article data-imposter aria-labelledby="confirm-title">
      <h3 id="confirm-title">Draft saved</h3>
      <p>Your changes remain available. This in-flow example demonstrates bounded centering without changing document order.</p>
      <p><a href="/drafts/current">Open draft</a></p>
    </article>
  </div>
</section>

Anatomy

Positioning boundary
Bounded centered surface
Semantic heading
Durable actions

Variants and sizes

Block and inline anchors
Viewport edge
Narrow container
RTL
Long localized content

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

In flow fallback
Open
Closed
Viewport collision
Scrolled anchor
400% zoom
RTL
Forced colors
Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Positioning is visual only. If used for a modal task, pair this layout with native dialog semantics and a durable non-modal destination; this recipe does not manufacture modality.

Accessibility

Do not use visual centering as modal semantics. Preserve headings, reading order, focus visibility, bounded size, and a usable in-flow fallback at zoom or print.

Contract

PLATFORM

Basis

Native DOM/source order with positioned layout; no APG widget

Evidence

tests/unit/library/anchored-placement.test.ts

API

Use data-imposter-boundary around data-imposter. Set --thin-imposter-max-inline and --thin-imposter-margin as needed; modality requires a real dialog.

Behavior tier: native

Custom properties

PropertyDefaultDescription

--thin-imposter-max-inline32remMaximum inline size of the centered surface.

--thin-imposter-marginvar(--thin-space-m)Minimum space between the surface and its boundary.

Fallback

Without advanced positioning CSS, authored content remains readable in flow; native popover, links, forms, and durable destinations retain their browser behavior.

Assets and dependencies

/layouts.css
/components.css

Dependencies: None

Source: packages/ui/src/style/layouts.ts