Ready

Document Download Preview

This pattern uses design system styles and inputs to allow users to see a visual preview of the document they wish to generate and download.

Ready

Document Download Preview

This pattern uses design system styles and inputs to allow users to see a visual preview of the document they wish to generate and download.

Ready

Document Download Preview

This pattern uses design system styles and inputs to allow users to see a visual preview of the document they wish to generate and download.

Anatomy

Anatomy

Anatomy

Page styles and layout

  1. Page background: alabaster-grey

  2. Container styles: border-radius-md, shadow-3, pure-white, width: use a layout width class

Content

  1. Introduction: Displays the document name and a description of the document's purpose

  2. Branding: Displays the logo for Basis or 3rd party entity

  3. Inputs: Allows users to configure additional information

  4. Readonly Inputs: Displays non-editable information

  5. Terms and Conditions

  6. Mock Fields: Displays a mockup of fields that will be visible in the document download

  7. Actions

Best Practices

Best Practices

Best Practices

1. When to use

Use the pattern to represent a document that will be printed or shared as a digital file outside of the application. This pattern should not be used to represent native items, reports, etc.

2. Editable input vs readonly inputs

Use editable inputs to display data that is configurable and specific to the document. Use the readonly inputs to display static data that is set at a higher entity level.

3. Actions Text

Use a primary button to display an action to download the document. The text should specify the document name.

More

More

More

Additional Reading

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

© 2025 Basis Technologies
© 2025 Basis Technologies
© 2025 Basis Technologies