···1212## Installation
13131414import { Steps } from "@astrojs/starlight/components";
1515-import PackageManagers from "starlight-package-managers";
1515+import { PackageManagers } from "starlight-package-managers";
16161717<Steps>
1818···2525 ```mdx title="src/content/docs/example.mdx"
2626 import { DownloadLink } from "starlight-download-link";
27272828- <DownloadLink title="Example PDF" href="../assets/example.pdf" />
2828+ <DownloadLink title="Example PDF" href="../../../public/example.pdf" />
2929 ```
303031313. [Start the development server](https://starlight.astro.build/getting-started/#start-the-development-server) to preview the component.
32323333</Steps>
34343535-The Starlight Download Link component has various [properties](/properties).
3535+Visit the [usage guide](/usage/) for more information.
-7
docs/src/content/docs/properties.mdx
···11----
22-title: Available Properties
33----
44-55-import { DownloadLink } from "starlight-download-link";
66-77-<DownloadLink title="Example PDF" href="../assets/example.pdf" />
+151
docs/src/content/docs/usage.mdx
···11+---
22+title: Usage
33+description: Learn how to display a link to a downloadable asset.
44+---
55+66+import { Preview } from '@hideoo/starlight-plugins-docs-components'
77+import { DownloadLink } from "starlight-download-link";
88+import { CardGrid } from '@astrojs/starlight/components';
99+1010+To display a link to a downloadable asset, use the `<DownloadLink>` component.
1111+1212+<Preview>
1313+1414+<DownloadLink slot="preview" title="Example PDF" href="../../../public/example.pdf" />
1515+1616+</Preview>
1717+1818+## Import
1919+2020+```tsx
2121+import { DownloadLink } from "starlight-download-link";
2222+```
2323+2424+## Usage
2525+2626+Display a downloadable asset using the `<DownloadLink>` component.
2727+Each `<DownloadLink>` requires a [`title`](#title) and an [`href`](#href) attribute.
2828+2929+<Preview>
3030+3131+```mdx
3232+import { DownloadLink } from "starlight-download-link";
3333+3434+<DownloadLink title="Example PDF" href="../../../public/example.pdf" />
3535+```
3636+3737+<Fragment slot="markdoc">
3838+3939+```markdoc
4040+{% downloadlink title="Example PDF" href="../../../public/example.pdf" /%}
4141+```
4242+4343+</Fragment>
4444+4545+<DownloadLink slot="preview" title="Example PDF" href="../../../public/example.pdf" />
4646+4747+</Preview>
4848+4949+### Add a download description
5050+5151+Add a short description to a download link using the [`description`](#description) attribute.
5252+5353+<Preview>
5454+5555+```mdx {6}
5656+import { DownloadLink } from "starlight-download-link";
5757+5858+<DownloadLink
5959+ title="Example PDF"
6060+ href="../../../public/example.pdf"
6161+ description="A sample PDF file."
6262+/>
6363+```
6464+6565+<Fragment slot="markdoc">
6666+6767+```markdoc {4}
6868+{% downloadlink
6969+ title="Example PDF"
7070+ href="../../../public/example.pdf"
7171+ description="A sample PDF file." /%}
7272+```
7373+7474+</Fragment>
7575+7676+<DownloadLink
7777+ slot="preview"
7878+ title="Example PDF"
7979+ href="../../../public/example.pdf"
8080+ description="A sample PDF file."
8181+/>
8282+8383+</Preview>
8484+8585+### Group download links
8686+8787+Display multiple download links side-by-side when there’s enough space by grouping them using the [`<CardGrid>`](https://starlight.astro.build/components/card-grids/) component.
8888+See the [Starlight documentation guide on “Group link cards”](https://starlight.astro.build/components/card-grids/#group-link-cards) for an example.
8989+9090+<Preview>
9191+9292+```mdx {4,7}
9393+import { CardGrid } from '@astrojs/starlight/components';
9494+import { DownloadLink } from "starlight-download-link";
9595+9696+<CardGrid>
9797+ <DownloadLink title="Example PDF" href="../../../public/example.pdf" />
9898+ <DownloadLink title="Example PDF 2" href="../../../public/example.pdf" />
9999+</CardGrid>
100100+```
101101+102102+<Fragment slot="markdoc">
103103+104104+```markdoc {1,5}
105105+{% cardgrid %}
106106+{% downloadlink title="Example PDF" href="../../../public/example.pdf" /%}
107107+108108+{% downloadlink title="Example PDF 2" href="../../../public/example.pdf" /%}
109109+{% /cardgrid %}
110110+```
111111+112112+</Fragment>
113113+114114+<CardGrid slot="preview">
115115+ <DownloadLink title="Example PDF" href="../../../public/example.pdf" />
116116+ <DownloadLink title="Example PDF 2" href="../../../public/example.pdf" />
117117+</CardGrid>
118118+119119+</Preview>
120120+121121+## `<DownloadLink>` Props
122122+123123+**Implementation:** [`DownloadLink.astro`](https://github.com/trueberryless-org/starlight-download-link/blob/main/packages/starlight-download-link/components/DownloadLink.astro)
124124+125125+The `<DownloadLink>` component accepts the following props, as well as all other [`<a>` element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a):
126126+127127+### `title`
128128+129129+**required**
130130+**type:** `string`
131131+132132+The title of the download link to display.
133133+134134+### `href`
135135+136136+**required**
137137+**type:** `string`
138138+139139+The asset to download when the card is interacted with.
140140+141141+### `description`
142142+143143+**type:** `string`
144144+145145+An optional description to display below the title.
146146+147147+### `fileName`
148148+149149+**type:** `string`
150150+151151+An optional file name for the downloaded file.