Cover

A background image with configurable overlay and positioned content. Uses <img> with object-fit: cover for better responsive/loading behavior and accessible alt text. The video prop is reserved but not yet implemented.

File: src/core/components/ui/Cover.astro

Props

Prop	Type	Default	Notes
image	{ src: string; alt: string }	required	Background image source and alt text
video	{ src: string; type?: string }	—	Reserved — emits console warning if passed
minHeight	string	"24rem"	Minimum height of the cover area
overlayOpacity	number	0.5	Overlay opacity (0–1)
overlayColor	string	"var(--st-color-surface-contrast)"	Overlay color (semantic token reference)
contentPosition	"center" | "start" | "end"	"center"	Vertical position of content within the overlay
class	string	—	Additional CSS classes

Usage

---
import Cover from "@core/components/ui/Cover.astro";
---

{/* Basic cover with centered content */}
<Cover image={{ src: "/images/hero.jpg", alt: "Hero background" }}>
  <h2>Welcome</h2>
  <p>Overlay content with readable text.</p>
</Cover>

{/* Custom overlay and position */}
<Cover
  image={{ src: "/images/feature.jpg", alt: "Feature background" }}
  overlayOpacity={0.7}
  contentPosition="end"
  minHeight="32rem"
>
  <h2>Feature Highlight</h2>
</Cover>

Accessibility

• Background image uses an <img> element with alt text (not CSS background-image), making it accessible to screen readers.
• Overlay opacity and color should be chosen to ensure sufficient contrast for overlaid text. The default (0.5 opacity, dark overlay) provides reasonable contrast for most images, but authors must verify on a per-image basis.
• The --st-color-surface-contrast token adapts between light and dark themes.