Download Center Pro

What it is

A download section for HubSpot CMS. Each card carries a title, a description, an icon or an image, and one or more files from your File Manager. Visitors search the cards, narrow them by category and by file type, and download a file with a single click. The file arrives on their device under the name you gave it.

Cards and files

Cards are a repeater, and each card holds its own repeater of files. Per card:

A file is picked from your File Manager. When a document lives somewhere else, leave the file empty and paste the address into Or a link: it opens in a new tab and carries the Link icon in place of the download arrow. A card whose only file is a link gets a button that reads Open, set on Button text for a link.

One file or several

A card with one file gets one button, which reads Download PDF, or whatever your button text is, followed by the type and the size. A card with several files gets a button that reads Download · 3 files, and what that button opens is chosen on a field:

• A menu under the button. It opens below the button, or above it when the window has no room below, and closes on Escape, on a second press or on a click anywhere else. Opening one closes any other.
• A list that opens inside the card. The card grows to show a line per file. Any number of cards can be open at once.
• The list, always open. No button. Every file on the card is on show from the start.
• Automatic. The default. A grid opens a menu, a list of rows opens inside the row. With the grid and list switch on it always opens a menu, so a card behaves the same in both views.

Search and filters

Each is a switch on the Search and filters group.

• Search box. Matches titles, descriptions, categories, badges, small print, file names (the names you typed and the names of the files themselves) and file types as the visitor types. Every word typed has to appear somewhere on the card, in any order. Accents are ignored, so cafe finds café.
• Category pills. Built from the categories typed on the cards, in the order they first appear, with your own word for the first pill. Case and outer spaces are ignored, so Guides and guides are one pill. The row is left out when every card shares one category.
• File type menu. Lists only the types present on the cards. A card matches when any of its files is that type.
• Result count. Off to begin with. Switch it on to show the number of cards that match, with a word for one and a word for several.
• Side by side or stacked. Pills on the left and the search box on the right, or the pills under the search box. When the two do not fit on one line, the search box moves to a line of its own and runs its full width. On a phone the pills scroll sideways and fade at the side that has more.
• Grid and list switch. Lets the visitor change the layout on the page. The grid uses the column counts under Layout and buttons, which stay visible for that reason even when the layout is a list.

When nothing matches, the grid gives way to a message and a button that clears every filter. Both are words you set.

Show more

Set Cards shown before Show more above 0 and the section opens with that many cards and a button under them that brings in the next set. Filters count every card, including the ones not shown yet, and a new search starts back at the first set. Keyboard focus moves to the first card that arrived.

Layouts

Grid of cards. A column count for desktop, tablet and phone. An image can run to the card edges or sit inside the padding, cropped to the shape you choose, and the button sits on the bottom edge so buttons line up across a row.

List of rows. One card per row with the picture on the left, the words in the middle and the button on the right. On a phone the button moves under the words and runs the full width.

File types and sizes

The type is read from the end of the file name, so media-kit.pdf shows as PDF. Set it on the File type field when a file name does not say what the file is. Each type has its own icon in the file list: PDF, Word, Excel, PowerPoint, archive, image, audio, video, code and text.

The size is read from the file when its card comes near the screen, written in the units on the Size units field, with the number written the way the page language writes it, so a German page shows 2,4 MB. Type a size into File size to show that instead. Switch sizes off and the module sends no request for them.

How the download works

Files from your own File Manager are served from your own website's address, which lets the browser save the file under the name you gave it instead of opening it in a tab. A PDF downloads as a PDF. The extension is added to the name for you.

A file from another HubSpot portal or another address is fetched by the page and saved under its name, with the button marked busy while that happens. If the fetch fails or takes longer than twenty seconds, the file opens in a new tab, so a click never does nothing and the page stays where it was. A file known to be larger than 50 MB is handed straight to the browser. A visitor who holds Command or Ctrl while clicking gets the browser's own behaviour.

Tracking

Every download pushes an event to the dataLayer for Google Tag Manager, named file_download unless you change it, carrying file_name, file_type, file_url and card_title. In Tag Manager, add a Custom Event trigger with that event name and read the four values as Data Layer Variables. The section also dispatches a downloadcenterpro:download event on the page, with the same four values, for any script of your own. A double click counts as one download. Switch the dataLayer event off on the Tracking group.

file_download is also an event GA4 records by itself when enhanced measurement is on. If a GA4 tag in Tag Manager forwards this event under the same name, a download can be counted twice, so a name of your own, such as resource_download, is the safer choice.

What it looks like before you touch anything

Dropped onto a page, the module shows a heading, a search box, category pills and a grid of three cards to a row on white. Each card has a hairline border, an icon on a pale tile tinted with your theme's primary colour, a category, a title, a description and a compact dark button. Cards with two files open a small menu. The fonts and the accent colour come from your HubSpot theme settings, so the section already matches the page around it.

Accessibility

The search box and the file type menu carry labels for screen readers. Pills are buttons that report whether they are pressed. Every download button names the card it belongs to, so a screen reader hears Download PDF: Launch checklist and not a list of identical buttons. The order is a field, Screen reader: button with its card. A link that opens a new tab says so. A button that opens a file list reports whether it is open and which list it controls. Escape closes an open list and returns focus to its button. After every search or filter change the number of matching cards is read out, or the nothing-found message when there are none, whether or not the count is shown. A file being fetched keeps its name while it is marked busy. Focus rings are visible on every control and take their colour from a field.

Reduced motion

A visitor whose device asks for less motion gets the cards already in place, no fade-in, no lift on hover and menus that open without travel. That follows the visitor's own setting, so it cannot be switched off from the editor.

Style

Every colour, size, weight, radius, space, duration and easing is a field on the Style tab, grouped by what it affects: fonts, section, section heading, search and filters, cards, card icon, card text, download button, file list, motion and breakpoints. Colour fields carry opacity as well as a colour, and both are used. Body font, heading font and the accent colours inherit from your HubSpot theme settings. The button comes filled, outlined or as text with an icon. Every word visitors see or hear is a field on the Words group, so the section can be translated in full.

Troubleshooting

• A file opens in a tab instead of downloading. The file is on another address that does not allow the page to fetch it, so the visitor is sent to it instead. Upload the file to this portal's File Manager and pick it again.
• No size shows. The address the file is on does not report sizes to other websites. Type the size into File size on that file.
• The wrong type shows. The file name has no extension, or a misleading one. Pick the type on the File type field.
• A pill is missing. The pill row needs at least two different categories. Check the spelling on the cards: case is ignored, spaces inside the word are not.
• The file type menu is missing. It needs at least two different file types across the cards.
• A card shows no button. None of its files has a file or a link. In the editor the card carries a note saying so, which visitors never see.
• The section does not line up with the rest of the page. Set Maximum width and Side padding on the Section group to your page's container width and gutter.
• The menu is cut off. An element around the module has overflow: hidden. Move the module out of that wrapper, or switch Cards with several files to a list inside the card.
• Downloads are not reaching Tag Manager. Check the trigger's event name matches the one on the Tracking group exactly, including case.

Notes on this page

Four instances of one module, differing only in field values, each on the same container as the text above it: a media kit as rows with lists that open inside the row, a searchable library with Show more, a press kit with every file on show, and product documents with thumbnails, a layout switch and a menu that opens upward. Every file on this page is a real document you can download and open. No CSS on this page touches the module.