Library · Media & Buttons

Media

Responsive media component with support for various aspect ratios (1:1, 4:3, 16:9, 21:9, auto) and configurable loading strategies.

Figma: Primitives / Media ↗

Live preview — edit theme bottom-right

---
import Media from "../components/primitives/media/Media.astro";
---
<Media
  src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&q=60"
  alt="Collaboration"
  ratio="16:9"
/>
<Media
  src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&q=60"
  alt="Collaboration"
  ratio="1:1"
/>

Props

Name	Type	Required	Description
`class`	`string`	—	Additional classes to apply to the media wrapper
`src`	`string`	—	Source URL for the media (default: "https://fakeimg.pl/640x360")
`alt`	`string`	—	Alt text for the media (default: "")
`ratio`	`'1:1' \| '4:3' \| '16:9' \| '21:9' \| 'auto'`	—	Aspect ratio of the media (default: "auto")
`loading`	`'lazy' \| 'eager'`	—	Loading strategy (default: "lazy")
`decoding`	`'async' \| 'sync' \| 'auto'`	—	Decoding strategy (default: "async")
`fetchpriority`	`'high' \| 'low' \| 'auto'`	—	Fetch priority (default: "auto")
`[key: string]`	`string \| number \| boolean \| undefined`	—	HTML attributes to spread on the media wrapper

Example with all props

<Media
  class="hero-media"
  src="https://example.com/streetscape.jpg"
  alt="Streetscape render"
  ratio="16:9"
  loading="eager"
  decoding="async"
  fetchpriority="high"
/>