Skip to content
Starlight Save File Component

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.

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


<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.

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


<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.

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>
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.