Window

A window frame with squared traffic lights. For product shots and apps that want to feel native.

.windowCSS only

Examples

Window

Northlight — Overview

Window content.

ReadyLn 12, Col 48

Anatomy

`.window`	Surface with a large shadow. A grid: title bar, then a body row that takes the rest and clips.
`> header`	Title bar on a tinted fill with a hairline below. Draws the three squared lights itself, before its content.
`header > span`	The title, centred in the space after the lights.
`> div`	The body: anything. Give it its own padding; the window adds none.
`> .statusbar`	Optional third child, a strip along the bottom.

Accessibility

The traffic lights are a ::before pseudo-element: they are not buttons and screen readers skip them. Don't imply they close or minimise anything.
When the window is a product shot, mark it inert so its sample buttons stay out of the tab order.
The title is a plain <span>. If it names a real region, label the window with aria-labelledby pointing at it.