HyCardMedia

Usage examples on this page are written for Lit / plain HTML (<hy-card-media>). The same component ships as HyCardMedia in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

Used inside <hy-card> — it only means something as part of it.

A picture, video or other media inside a card, running to the card's edges while the text around it keeps the card's padding. Place it as a direct child of hy-card, anywhere in the card's content: first, between other content, or last. The card holds the rule — it pulls the media out through its own padding to the side edges, to the top edge when the media is first and to the bottom edge when it is last with no footer, and its clip rounds the outer corners; between other content the media stays square. The space between the media and the text around it is the page's own (a Pages stack size on the content).

The element itself sets nothing but display: block and a zero line height, so an <img> sits with no baseline gap under it. A shape (an aspect ratio, a fit, a color behind the picture) is the page's: a box of your own inside this element, reading the Pages image tokens (--hy-page-media-ratio-*, --hy-page-media-fit-*, --hy-page-media-background).

Accessibility: your part

• Give the image meaningful alt text, or alt="" when it only decorates.

When not to use

• Media that is the whole card (a photo tile with nothing else): a flush card with the picture as its content.
• A picture beside the text (a horizontal card): a flush card with a grid inside, the horizontal-card pattern.
• A gallery of pictures: hy-image-gallery.

Examples

<!-- The picture first, across the top of the card -->
<hy-card>
  <hy-card-media>
    <img src="photo.jpg" alt="A valley at dusk" width="800" height="533" />
  </hy-card-media>
  <h3 class="card-title">Mountain lodge</h3>
  <p>Open all year.</p>
</hy-card>

<!-- The picture between the title and the text, square against both -->
<hy-card>
  <h3 class="card-title">Mountain lodge</h3>
  <hy-card-media>
    <img src="photo.jpg" alt="" width="800" height="533" />
  </hy-card-media>
  <p>Open all year.</p>
</hy-card>

API

Slots

Slot	Description
default	The image, picture or video. Give an <img> its width / height attributes: it fills the card's width and keeps that ratio.

CSS Parts

Part	Description
base	The media's container