# Attachment

The Attachment component allows you add a downloadable document. The component displays a title, the last updated date and a [configurable document title](#configuring).

### Add an Attachment

1. On the page where you want to add the Attachment, open the from the dropdown list.

<figure><img src="/files/06D4P0AYTgJNwGeq4Xaw" alt=""><figcaption></figcaption></figure>

2. Add a Title to display at the top of the component.
3. Add Content, optional. Useful to describe the document.
4. Add one or more files to the Attachment component.
5. Save.

### Styling

<div align="left"><figure><img src="/files/pKXURTHnZDKPIAg8dx4S" alt="" width="375"><figcaption></figcaption></figure></div>

#### Theme

Every component in CivicTheme, such as the "Attachment" component, can be shown as a `Light` or `Dark` theme component variant. This allows you to build more engaging landing pages with a mix of light and dark theme components.

Use "Theme" radio button selector to change between themes.

Below illustrates the `Light` theme, using the "Content" field, and the media "Name".

<figure><img src="/files/VFBHvjpU7swKJV8hf7Id" alt=""><figcaption></figcaption></figure>

Below illustrates the `Dark` theme and the document file name.

<figure><img src="/files/7ILluvXinzaO3vdpkbzl" alt=""><figcaption></figcaption></figure>

#### Vertical spacing

Vertical spacing adds space before, after or both before and after a component. It is used to visually separate a component from other components when they are vertically stacked on the page. Use "Vertical spacing" dropdown to chose the appropriate values.

You may need to adjust the vertical spacing on adjacent components to create visual balance.

#### Background

**DO NOT USE**. Don't use the "Background" on the "Attachment" component Selecting `Light` or `Dark` theme adds the appropriate background.

### Configuring

Some site-wide configuration can be made for this component. You need to be logged in as a "Site administrator" role in order to make such changes.

You can configure the "Attachment" component to display the actual file name, or the editable "Name" you give to the file when you upload it.

#### Configure to use the "Name"

1. When you upload the file, ensure you create a descriptive, human-readable "Name".

<div align="left"><figure><img src="/files/ZML0GoAFRjBGYyyzi89G" alt="" width="375"><figcaption></figcaption></figure></div>

2. Go to `/admin/appearance/settings/<site-name>`
3. Check the "Use name of media" box.

<div align="left"><figure><img src="/files/jMxUFZY7kiThbTTxHAQ3" alt="" width="375"><figcaption></figcaption></figure></div>

#### Configure to use the document file name

1. Go to `/admin/appearance/settings/<site-name>`
2. Uncheck the "Use name of media" box.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.civictheme.io/content-authoring/components/attachment.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.