Ripple Design System


The File component shows a link, with additional metadata, and lets a user download a file attachment.


Use the File component to let users download an attachment. It is accompanied by an optional description so you can give the user more information.

File is made up of:

  • the file name
  • metadata including file type, size and updated date
  • a document description.

When and how to use

  • Use on any page type.
  • Include in page content areas only.
  • Add an optional description.
  • Add optional updated data if it’s relevant to users.
  • Always include metadata.

When and how not to use

  • Don’t use with a non-descriptive file name.


File uses colour for:

  • indicating to users that they may have an action to complete
  • interactive states.

To create your own theme, see theming guidance for designers or theming guidance for developers.