Download

Download Title is always an h3. For more information on heading structure, refer to Anatomy: Anatomy, Accessibility – Heading elements

All fields in the Download Component are technically optional. The variations shown below illustrate what can be shown or hidden and why. The download action, while optional, should never be excluded. Do not remove the download action.

Do not use this component on assertive or accent container backgrounds.

For more information on how to write unique link text, refer to the Anatomy section for Accessibility, Links.

The download action must be uniquely worded. The Download component hides the download title from screenreaders. This means that users who rely on screenreaders to use our websites will not be able to read or access the download title and can only act on the download CTA. Because of this, the download CTA must be unique 

Titles should be added to differentiate between other download components.

The title should only be removed to avoid a download link in the title or if the heading structure does not allow for an h3.

Add a description if title or properties are turned off or if they are not descriptive enough.

Remove description if the title or properties contains all necessary information.

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 careful consideration.

Use an action link only if there is additional descriptive content that tells the user what they will be downloading. Functionally, downloading should be a link.

Use an action button only if there is additional descriptive content that tells the user what they will be downloading. Functionally, downloading should be a link, but a button style can be applied to emphasize the download action.

Add the download icon to emphasize the download action. Only add the icon when there are less than three download components on the page to avoid overloading the page with icons.

Use a display inline action only when you want the user to view the downloadable content within the browser. The action text should reflect that the user will not be downloading the asset from the page, only viewing it within the browser.

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.