# File

**File** provides a user interface for file selection, uploading, and management. It offers a clear visual representation of files with customizable styling to match the design system.

## Style settings

<table><thead><tr><th width="199">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong>Loader</strong></td><td></td></tr><tr><td>Background color</td><td>Select the background color for the file component, such as "Background/Primary" for consistent styling.</td></tr><tr><td>Hover color</td><td>Choose the color that appears when users hover over the component, such as "Brand/Hover light" for interactive feedback.</td></tr><tr><td>Icon color</td><td>Select the color for the file icon, such as "Text/Primary" for clear visibility.</td></tr><tr><td>Format label (background)</td><td>Choose the background color for file format labels, such as "Brand/Primary" to highlight file types.</td></tr><tr><td>Format label (text)</td><td>Select the text color for format labels, such as "Text/Light" for readability against the label background.</td></tr><tr><td><strong>Frame</strong></td><td></td></tr><tr><td>Rounding</td><td>Adjust the corner roundness of the file component container.</td></tr><tr><td>Display border</td><td>Toggle between "Yes" or "No" to add or remove borders around the file component.</td></tr><tr><td>Border color</td><td>Select the color for the border when enabled, such as "Brand/Border" for visual definition.</td></tr><tr><td>Thickness</td><td>Adjust the slider to control the thickness of the border around the file component.</td></tr><tr><td><strong>Effects</strong></td><td></td></tr><tr><td>Loader shadow</td><td><p>Add and configure shadow effects for a loader in <strong>File</strong>:</p><ol><li>Click the "+" icon to add shadow effects.</li><li>Select from shadow styles: <strong>None</strong>, <strong>Soft</strong>, <strong>Regular</strong>, or <strong>Retro</strong>.</li></ol></td></tr></tbody></table>

## Typography settings

Customize **File** appearance using rich-text settings. These changes apply only to the **Loader** within the **File** element and do not affect other text elements.

You can modify the following properties:

* Font
* Style
* Size
* Line spacing
* Color

For details on how to configure parameters in rich-text options, see [Typography and fonts](https://help.parta.io/branding/create-branding/typography-and-fonts).