PDF Block

The PDF block embeds a real PDF document directly in a Luna page so visitors can read it without leaving the surrounding content.

Use it for guides, reports, menus, specifications, or downloadable resources that benefit from an in-page preview.

Properties

Select the PDF block and open Edit block. Choose the document first, then set the inline viewer height that matches the reading task.

The Properties panel contains the file source and, in inline content, the Size control shown above.

PDF File

PDF File uploads or selects the real document used by the viewer. Keep a meaningful .pdf filename so the browser viewer and download action identify the resource clearly.

Size

In inline content, Size sets the viewer height: Small is 420px, Medium is 600px, and Large is 780px. Choose enough height for comfortable reading without letting the document dominate a short article.

Inside a section grid, the authored desktop, tablet, and mobile row spans control viewer height instead of the inline Size option. PDF is frame-driven, so keep an intentional readable proportion rather than shrinking it to natural DOM height.

Style Panel

Frame is the PDF block’s only Style Panel area. Its Default state exposes Spacing, Background, Borders, and Effects for the outer viewer frame.

The Frame does not expose an On Hover tab. Use solid borders where a boundary is needed, keep the surrounding surface readable, and reserve shadows or other effects for subtle separation from the page background.

Responsive behavior

In inline content, the viewer follows the available article width while Size controls its height. Verify the document toolbar, page navigation, zoom, and scrolling at desktop, tablet, and mobile widths.

A browser PDF viewer may simplify its controls on a narrow screen. Keep the page free of horizontal overflow and confirm that the document itself still opens and remains readable.

Accessibility

Use a descriptive filename and introduce the document in surrounding text so visitors understand its purpose before entering the embedded viewer.

Provide a nearby text link or Button to the same PDF when a direct download or fallback path is important. This helps visitors whose browser, assistive technology, or network cannot use the embedded viewer reliably.

Confirm keyboard access to the browser viewer, visible focus, logical reading order, and sufficient contrast around the frame. Do not claim that controls inside the browser-provided PDF toolbar are styled by Luna.

Tips & tricks

1. Use a real, final PDF with a meaningful filename before refining the frame.

2. Match the viewer height to the document’s reading pattern: compact for quick reference, taller for multi-page review.

3. Check loading, scrolling, toolbar access, and download behavior at all three responsive breakpoints.

4. Keep an explicit fallback link when the document is essential.

Common mistakes

• Using a screenshot of a document instead of a functional PDF block.

• Choosing an oversized viewer without checking the actual page count and reading task.

• Omitting a direct fallback or download path for an essential document.

Quick recipe

Upload the final PDF, select it in PDF File, choose Small, Medium, or Large for inline content, style only the Frame when needed, add a fallback link for essential documents, then verify the real viewer at desktop, tablet, and mobile widths.