Downloads
apps/www/src/sections/Downloads.astro · 32 lines · group Gallery & files
Downloads — a narrow column of file rows (<DownloadItem>): certificates, specifications, protocols, price lists. Not a grid. Use for: a list of documents to download on a landing page. Put the files in assets/ and link them as "/assets/<file>". Not for: files inside a <ModelPageSection> (<AttachmentsSection>). Children: <DownloadItem> tags.
In the fleet
Not used by any site yet.
Samples 1
MDX of this sample
<Downloads title="Documents" description="Everything a buyer or an inspector asks for.">
<DownloadItem title="Station N3 datasheet" href="/downloads/datasheet.pdf" />
<DownloadItem title="Mounting guide" href="/downloads/mounting.pdf" />
<DownloadItem title="Certificate of conformity" href="/downloads/certificate.pdf" />
<DownloadItem title="API reference" href="/downloads/api.pdf" linkText="Open" />
</Downloads>Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | anchor of the section | ||
| title | string | the section heading | ||
| description | string | a paragraph under the heading | ||
| theme | 'light' | 'muted' | 'dark' | 'brand' | 'brand-dark' | 'light' | background of the section |
Source apps/www/src/sections/Downloads.astro @ gitt.one
---
/**
* Downloads — a narrow column of file rows (<DownloadItem>): certificates,
* specifications, protocols, price lists. Not a grid.
*
* Use for: a list of documents to download on a landing page. Put the files in
* assets/ and link them as "/assets/<file>".
* Not for: files inside a <ModelPageSection> (<AttachmentsSection>).
* Children: <DownloadItem> tags.
*/
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';
interface Props {
/** anchor of the section */
id?: string;
/** the section heading */
title?: string;
/** a paragraph under the heading */
description?: string;
/** background of the section */
theme?: Theme;
}
const { id, title, description, theme = 'light' } = Astro.props;
---
<Section id={id} title={title} description={description} theme={theme}>
<ul class="mx-auto max-w-3xl list-none space-y-1" data-variant="files">
<slot />
</ul>
</Section>Source links point to engine-astro@7b686388. Samples are demo content: the components are the real ones, the copy and the pictures are made up.