# PDF document

The block **PDF document** shows a PDF file from the media library in the browser’s viewer. This page covers choosing the file, its title for screen readers, the zoom on opening and the shape of the viewer.

## Add a PDF document

1. In the editor, open the inserter and choose **PDF document**. [Add a block](https://lovelyrender.com/documentation/add-block/) describes the ways to insert a block.
2. In the **PDF settings** panel, click **Select PDF** and take a PDF file from the media library, or upload one. The button becomes **Replace PDF**.
3. Give the document a **Title (accessibility)**, for example “Pricing 2026”.

The document shows in the browser’s PDF viewer, in the editor and on the site. As long as no PDF is chosen, the block shows nothing on the site.

## Settings tab

| Setting | Effect | Default value |
| --- | --- | --- |
| **Select PDF**, **Replace PDF** | The file shown. The block only accepts PDF files. | No file |
| **Title (accessibility)** | The name of the document, announced by screen readers. When empty, the frame is announced without saying what it contains. | Empty |
| **Initial zoom mode** | How the page fits on opening: **Fit to width**, **Fit entire page**, **Fit to height** or **Automatic**, which lets the browser decide. | **Fit to width** |

![The inspector of a PDF document block, with only the Settings and Styles tabs: the Select PDF button, the Title (accessibility) field and its help, then Initial zoom mode set to Fit to width.](https://static.lovelyrender.com/uploads/2026/10/901-doc-blocs-pdf.png)

The **Advanced** panel contains the **HTML anchor** field, to point to the document with an address ending in `#`.

## Styles tab

The block is set in the **Default**, **Hover** and **Active** states. From the moment it is inserted it carries the **PDF viewer** style, which gives it the shape of a portrait A4 page. Its aspect ratio is 1 to 1.414 and its minimum height is 600 pixels. These two inherited values show in the **Aspect ratio** and **Min H** fields of the **Size & Spacing** panel. You change them there.

| Panel | Guide |
| --- | --- |
| **Colors** | [Color a block](https://lovelyrender.com/documentation/color-block/) |
| **Background images** | [Set a background](https://lovelyrender.com/documentation/set-background/) |
| **Size & Spacing**, **Borders**, **Effects**, **Transitions** | [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/) |

The **PDF viewer** part of the Design catalog gives a frame to all the viewers of the site: **Frameless**, **Bordered**, **Shadowed** or **Rounded** ([Adopt a design from the catalog](https://lovelyrender.com/documentation/adopt-catalog-design/)). The A4 shape stays.

**Tip:** To change the shape of all your viewers at once, set one, then update the **PDF viewer** style. [Save a block’s style](https://lovelyrender.com/documentation/save-block-style/) explains how.

The block has no **Animations** tab: to make the document appear on scroll, animate the [Container](https://lovelyrender.com/documentation/container-block/) around it.

## On a phone

The viewer takes the available width and its height follows the aspect ratio without going under 600 pixels. On a narrow screen, it is a little taller than an A4 page. Some phone browsers open the PDF in an app or offer to download it.

## Accessibility

Always fill in the **Title (accessibility)**: a screen reader announces the frame by this title. To introduce the document, place a [Heading](https://lovelyrender.com/documentation/heading-block/) or a paragraph above the block: the block has no caption.

## Limits

- A block shows a single PDF. For several documents, place several blocks.
- The browser’s viewer always offers to download the file: the block does not restrict downloading.
- The PDF must be in the site’s media library.

## See also

- [Media](https://lovelyrender.com/documentation/media-block/)
- [Embed](https://lovelyrender.com/documentation/embed-block/)
- [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/)