Content display / The visual dictionary

Document preview.

A readable glimpse into a document without opening its editor.

Also calledfile previewpage preview
01

See it in context

UI illustration
PROJECT / 001Project brief
1 of 4

A document preview reproduces enough of a page to help users recognize or inspect it. Page boundaries and zoom or open controls distinguish it from ordinary page content.

When to use it

Use in file browsers, attachments, or review workflows.

Know the difference

A document preview shows content; an attachment preview primarily shows file identity.

WebiOSiPadOSAndroidmacOSWindowsLinuxvisionOS

iOS · iPadOS · macOS · visionOS

Use the native platform presentation and terminology; adapt density and interaction to touch, pointer, remote, or spatial input rather than copying a phone-sized view.

Web · Android · Windows · Linux

Use semantic content structures on the web. Touch, pointer, and remote layouts need different target spacing even when the same information is shown.

Primary documentation for the pattern and its platform conventions.