Device frame

Device frame — a drawn browser window around a product picture: the site’s four product showcases (MAFO, MobuppsX, Echo AI the same), the design lead’s design.

Beta · Content blocks · packages/css/src/components/device-frame.css

.pui-device-host · .pui-device-frame (--browser) · __bar __lights __nav __url __url-text __tools __screen. The site’s browser window, every number a fraction of --pui-device-unit — one design pixel of the 770 window, set from the host’s width.

Device frame — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

Kind browser — the window; the laptop the product pages also draw is the illustrations unit’s (request 8)
Screen — put the product’s page, a picture or a slideshow in it; the frame paints nothing over it
Toolbar true — the window shows what a browser shows: back, forward and reload before the well (Nav), a lock and a star inside it around the address, a shield, a plus and the menu after it (Tools). Every glyph is the library’s — chevron-left, chevron-right, refresh-cw, lock, star, shield, plus, menu — in illustration/chrome/text, 8.32 of the unit in a 13.07 box (7.13 inside the well); the address is centred, in the platform’s UI face as a browser sets it. The site’s product showcases (request 29); without it the bar is the lights and the well

Use when a product page or a slide shows the product as it runs — inside a window, not as a bare screenshot.

Do not use when the picture is the point and needs no chrome (Aspect ratio, a Card’s media); a phone or a laptop (the illustrations’ device objects).

Relates to Aspect ratio, Card, Carousel, the illustration library’s screens.

Anti-patterns a light chrome (the window is dark by design) · the lights in the status colours · a chrome colour typed · the window stretched off its proportions · text typed into the URL well as content.

Keywords: device frame, browser window, browser mockup, showcase, product screenshot, chrome, laptop, macOS window

Figma — page Device frame: Device frame (2 variants)

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens device-frame.css.

<div class="pui-device-host"><div class="pui-device-frame pui-device-frame--browser">
  <div class="pui-device-frame__bar"><span class="pui-device-frame__lights"><i></i><i></i><i></i></span>
    <span class="pui-device-frame__url">mafo.mobupps.com</span></div>
  <div class="pui-device-frame__screen"><img src="…" alt="…"></div></div></div>

The modifiers

	What it is	Note
Kind	--browser (the window; the only kind today)	—
Toolbar	__nav and __tools beside the well, a glyph at each end of __url around __url-text — seven library glyphs in illustration/chrome/text, the site’s window (request 29). Without them the bar is the lights and the well	—
Unit	--pui-device-unit — one design pixel; the host sets it from its width	—

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

No story of this component renders a text pair axe can measure — a component made of surfaces and borders rather than words. The token pairs it uses are in artifacts/contrast-matrix.md.

The focus ring

Nothing in this component takes focus.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).