---
title: Document style preview
description: Preview document and print styles using illustrative content and layout, not a document template.
version: 0.0.0-development
generatedAt: 2026-10-23T12:32:44.491Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

```tsx
render(<div className={styles.preview} data-document-preview>
      <div className={`dnb-print-hidden ${styles.controls}`}>
        <H1>Document style preview</H1>
        <P>Beta: These styles are subject to change.</P>
        <P>
          This page previews typography, spacing, branding and print
          behavior. The fictional content and letter layout are
          illustrative, not a document template. Create your own layout and
          content when using these styles.
        </P>
        <Dropdown id="document-preview-brand" label="Brand" labelDirection="horizontal" data={brands} value={activeBrand} onChange={({
      data
    }) => setTheme({
      brand: data.selectedKey as DocumentBrand
    })} />
        <Checkbox label="Multi-page table" checked={long} onChange={({
      checked
    }) => setLong(checked)} />
        <Button text="Print / save PDF" variant="secondary" onClick={async () => {
      await document.fonts.ready;
      window.print();
    }} />
        <P>Application text outside the document keeps its normal size.</P>
      </div>
      <DocumentLetter long={long} />
    </div>)
```