Usage

To display a link to a downloadable asset, use the <SaveFile> component.

component.preview

Example PDF

Import

import { SaveFile } from "starlight-save-file-component";

Usage

Display a downloadable asset using the <SaveFile> component. Each <SaveFile> requires a title and an href attribute.

MDX

import { SaveFile } from "starlight-save-file-component";

<SaveFile title="Example PDF" href="../../../example.pdf" />

Markdoc

{% SaveFile title="Example PDF" href="../../../example.pdf" /%}

component.preview

Example PDF

Add a description to the save file component

Add a short description to the component using the description attribute.

MDX

import { SaveFile } from "starlight-save-file-component";

<SaveFile
  title="Example PDF"
  href="../../../example.pdf"
  description="A sample PDF file."
/>

Markdoc

{% SaveFile
   title="Example PDF"
  href="../../../example.pdf"
  description="A sample PDF file." /%}

component.preview

Example PDF A sample PDF file.

Group save file components

Display multiple save file components side-by-side when there’s enough space by grouping them using the <CardGrid> component. See the Starlight documentation guide on “Group link cards” for an example.

MDX

import { CardGrid } from '@astrojs/starlight/components';
import { SaveFile } from "starlight-save-file-component";

<CardGrid>
  <SaveFile title="Example PDF" href="../../../example.pdf" />
  <SaveFile title="Example PDF 2" href="../../../example.pdf" />
</CardGrid>

Markdoc

{% cardgrid %}
{% SaveFile title="Example PDF" href="../../../example.pdf" /%}

{% SaveFile title="Example PDF 2" href="../../../example.pdf" /%}
{% /cardgrid %}

component.preview

Example PDF

Example PDF 2

<SaveFile> Props

Implementation: SaveFile.astro

The <SaveFile> component accepts the following props, as well as all other <a> element attributes:

title

required
type: string

The title of the save file component to display.

href

required
type: string

The asset to download when the card is interacted with.

description

type: string

An optional description to display below the title.

fileName

type: string

An optional file name for the downloaded file.