Documentation
Data displayGlass surface
Attachment
Displays a file attachment with metadata.
01
See it in context
Preview
lumen-logo.svg1 KB · downloadbuild-report.txtProcessing…
02
Copy a working example
Usage
---
import { Attachment } from '@santi020k/lumen-astro'
---
<Attachment href="/logo.svg">
<strong>lumen-logo.svg</strong>
<span>1 KB · download</span>
</Attachment>
<Attachment>
<strong>build-report.txt</strong>
<span>Processing…</span>
</Attachment>---
import { Attachment } from '@santi020k/lumen-astro'
---
<Attachment href="/logo.svg">
<strong>lumen-logo.svg</strong>
<span>1 KB · download</span>
</Attachment>
<Attachment>
<strong>build-report.txt</strong>
<span>Processing…</span>
</Attachment>import { Attachment } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Attachment href="/logo.svg">
<strong>lumen-logo.svg</strong>
<span>1 KB · download</span>
</Attachment>
<Attachment>
<strong>build-report.txt</strong>
<span>Processing…</span>
</Attachment>
</>
)import { Attachment } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Attachment href="/logo.svg">
<strong>lumen-logo.svg</strong>
<span>1 KB · download</span>
</Attachment>
<Attachment>
<strong>build-report.txt</strong>
<span>Processing…</span>
</Attachment>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-attachment href="/logo.svg">
<strong>lumen-logo.svg</strong>
<span>1 KB · download</span>
</lumen-attachment>
<lumen-attachment>
<strong>build-report.txt</strong>
<span>Processing…</span>
</lumen-attachment><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-attachment href="/logo.svg">
<strong>lumen-logo.svg</strong>
<span>1 KB · download</span>
</lumen-attachment>
<lumen-attachment>
<strong>build-report.txt</strong>
<span>Processing…</span>
</lumen-attachment>03
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add Attachmentlumen add Attachmentpnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add Attachment --target reactlumen add Attachment --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add Attachment --target elementslumen add Attachment --target elementsGlass
Add the glass prop to apply the shared blur, saturation, border, and highlight tokens. Glass reads best over vivid content, so place the surface above imagery or color.
---
import { Attachment } from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo docs-glass-demo--stack">
<Attachment href="/logo.svg" glass>
<strong>lumen-glass-kit.zip</strong>
<span>24 KB</span>
</Attachment>
<Attachment href="/logo.svg" glass>
<strong>brand-tokens.json</strong>
<span>3 KB</span>
</Attachment>
</div>---
import { Attachment } from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo docs-glass-demo--stack">
<Attachment href="/logo.svg" glass>
<strong>lumen-glass-kit.zip</strong>
<span>24 KB</span>
</Attachment>
<Attachment href="/logo.svg" glass>
<strong>brand-tokens.json</strong>
<span>3 KB</span>
</Attachment>
</div>import { Attachment } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo docs-glass-demo--stack">
<Attachment href="/logo.svg" glass>
<strong>lumen-glass-kit.zip</strong>
<span>24 KB</span>
</Attachment>
<Attachment href="/logo.svg" glass>
<strong>brand-tokens.json</strong>
<span>3 KB</span>
</Attachment>
</div>
</>
)import { Attachment } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo docs-glass-demo--stack">
<Attachment href="/logo.svg" glass>
<strong>lumen-glass-kit.zip</strong>
<span>24 KB</span>
</Attachment>
<Attachment href="/logo.svg" glass>
<strong>brand-tokens.json</strong>
<span>3 KB</span>
</Attachment>
</div>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo docs-glass-demo--stack">
<lumen-attachment href="/logo.svg" glass>
<strong>lumen-glass-kit.zip</strong>
<span>24 KB</span>
</lumen-attachment>
<lumen-attachment href="/logo.svg" glass>
<strong>brand-tokens.json</strong>
<span>3 KB</span>
</lumen-attachment>
</div><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo docs-glass-demo--stack">
<lumen-attachment href="/logo.svg" glass>
<strong>lumen-glass-kit.zip</strong>
<span>24 KB</span>
</lumen-attachment>
<lumen-attachment href="/logo.svg" glass>
<strong>brand-tokens.json</strong>
<span>3 KB</span>
</lumen-attachment>
</div>API reference
Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.
| Attribute | Values | Default | Description |
|---|---|---|---|
| glass | boolean | "subtle" | "strong" | false | Applies the tokenized liquid-glass surface treatment with backdrop-filter fallbacks; "subtle" and "strong" adjust the fill intensity. |
| href | string | - | Renders the root as a link when provided; otherwise renders an article. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |