The Clot Clot Club Banner - 2

Component

Download component

A gray square icon representing a download action, with the word “Download” displayed above and below the icon.

Download component

The Download component provides a clear and accessible way for users to download files such as PDFs, brochures, or technical documents. It supports multiple file types and ensures compliance with accessibility standards. 

Usage

Use the Download component to offer downloadable resources in a structured and user-friendly way. It is ideal for providing product documentation, clinical guidelines, or marketing collateral. 

Download component works only works .zip files.

Common usage includes:

  • Product brochures 
  • Clinical procedure guides 
  • Regulatory documents  
  • Marketing assets 

Dos and don'ts

Do:

  • Clearly label the file type and size
  • Ensure files are optimized for quick download 
  • Use descriptive, unique wording for each call-to-action such as "Download WATCHMAN brochure"

Don’t:

  • Use vague labels like “Click here” 
  • Use this component on assertive or accent container backgrounds
  • Remove the download action, even though it is technically possible to do so
  • Hide important download links behind multiple steps

Styles

Styles are used to visually amplify the Boston Scientific brand. Styles carry different brand or functional treatments that bring a distinctive look to our webpages while also helping to emphasize key information.  


Using the functional treatment

The functional treatment should be used to change the way a component operates to make it better fit the use case on a web page. 


Top margin

The top margin will only apply to the first element of the Download component. If the title is removed, the top margin will be set to the first configured element’s spacing settings. Options include: default, increase, decrease, remove. 


Authoring


AEM guidelines

Download is available as a Core Component in AEM for allowing users to download files, and can display metadata such as file size and format.

For general information about the Download Core Component, refer to AEM’s Download Component documentation.


Title

Titles should be added to differentiate between other downloadable - or downloaded - components. The Download title is always an h3; remove titles only to avoid a download link in the title, or in cases where the heading does not allow an h3.


Description

Add a description if title or properties are turned off, or if they are not descriptive enough. Remove the description if the title or properties contains all necessary information.

 

Download title

Download description lorem ipsum

Filename
diversity-feature-991x661.jpg
Size
129 KB
Format
image/jpeg
Download action text

Download component


Properties

Add properties to clearly show the user what they will be downloading. Make sure that the file name is UI-friendly before showing properties. Remove properties if the file name is not UI-friendly - or if you want to cut down on vertical height - but keep in mind that properties tell the user exactly what they are downloading, and should be removed only after carefully considering users' needs in context.

 

Download title

Download description lorem ipsum

Filename
diversity-feature-991x661.jpg
Size
129 KB
Format
image/jpeg
Download action text

Download component


Accessibility


Related components