Documentation
Data display
CoverImage
Presents responsive editorial artwork with optional hover lift and gradient treatment.
01
See it in context
Preview
02
Copy a working example
Usage
---
import { CoverImage } from '@santi020k/lumen-astro'
import dummyImage from '../assets/cover-dummy.jpg'
---
<div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));">
<CoverImage
alt="Cover image"
image={dummyImage}
sizes="(min-width: 1024px) 400px, 100vw"
/>
<CoverImage
alt="Cover image with hover lift"
hover
image={dummyImage}
sizes="(min-width: 1024px) 400px, 100vw"
/>
<CoverImage
alt="Cover image with bottom gradient"
image={dummyImage}
showBottomGradient
sizes="(min-width: 1024px) 400px, 100vw"
/>
</div>---
import { CoverImage } from '@santi020k/lumen-astro'
import dummyImage from '../assets/cover-dummy.jpg'
---
<div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));">
<CoverImage
alt="Cover image"
image={dummyImage}
sizes="(min-width: 1024px) 400px, 100vw"
/>
<CoverImage
alt="Cover image with hover lift"
hover
image={dummyImage}
sizes="(min-width: 1024px) 400px, 100vw"
/>
<CoverImage
alt="Cover image with bottom gradient"
image={dummyImage}
showBottomGradient
sizes="(min-width: 1024px) 400px, 100vw"
/>
</div>import { CoverImage } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(14rem, 1fr))' }}>
<CoverImage
alt="Cover image"
image={dummyImage}
sizes="(min-width: 1024px) 400px, 100vw"
/>
<CoverImage
alt="Cover image with hover lift"
hover
image={dummyImage}
sizes="(min-width: 1024px) 400px, 100vw"
/>
<CoverImage
alt="Cover image with bottom gradient"
image={dummyImage}
showBottomGradient
sizes="(min-width: 1024px) 400px, 100vw"
/>
</div>
</>
)import { CoverImage } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(14rem, 1fr))' }}>
<CoverImage
alt="Cover image"
image={dummyImage}
sizes="(min-width: 1024px) 400px, 100vw"
/>
<CoverImage
alt="Cover image with hover lift"
hover
image={dummyImage}
sizes="(min-width: 1024px) 400px, 100vw"
/>
<CoverImage
alt="Cover image with bottom gradient"
image={dummyImage}
showBottomGradient
sizes="(min-width: 1024px) 400px, 100vw"
/>
</div>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));">
<lumen-cover-image
alt="Cover image"
image={dummyImage}
sizes="(min-width: 1024px) 400px, 100vw"></lumen-cover-image>
<lumen-cover-image
alt="Cover image with hover lift"
hover
image={dummyImage}
sizes="(min-width: 1024px) 400px, 100vw"></lumen-cover-image>
<lumen-cover-image
alt="Cover image with bottom gradient"
image={dummyImage}
showBottomGradient
sizes="(min-width: 1024px) 400px, 100vw"></lumen-cover-image>
</div><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));">
<lumen-cover-image
alt="Cover image"
image={dummyImage}
sizes="(min-width: 1024px) 400px, 100vw"></lumen-cover-image>
<lumen-cover-image
alt="Cover image with hover lift"
hover
image={dummyImage}
sizes="(min-width: 1024px) 400px, 100vw"></lumen-cover-image>
<lumen-cover-image
alt="Cover image with bottom gradient"
image={dummyImage}
showBottomGradient
sizes="(min-width: 1024px) 400px, 100vw"></lumen-cover-image>
</div>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 CoverImagelumen add CoverImagepnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add CoverImage --target reactlumen add CoverImage --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add CoverImage --target elementslumen add CoverImage --target elementsAPI 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 |
|---|---|---|---|
| image | ImageMetadata | required | Sets the source image processed by astro:assets. |
| alt | string | required | Sets the alt text, or pass ariaHidden for decorative covers. |
| mode | "card" | "detail" | "card" | Switches between the card crop and the contained detail frame. |
| hover | boolean | false | Lifts the cover on hover (respects reduced motion). |
| showBottomGradient | boolean | false | Overlays a bottom-to-top fade for legible captions. |
| 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. |