Full-width media block for use inside a card body.
The image fills the available body width and uses object-fit: cover within its aspect-ratio box.
object-fit: cover
<ui-card-body> <ui-card-image src="/hero.jpg" alt="Mountain lake" /> <p>Supporting card content.</p></ui-card-body> Copy
<ui-card-body> <ui-card-image src="/hero.jpg" alt="Mountain lake" /> <p>Supporting card content.</p></ui-card-body>
Readonly
Alt text forwarded to the native image element.
Accessible label forwarded to the native image element when needed.
Aspect ratio used to size the image block.
Image source URL.
Full-width media block for use inside a card body.
The image fills the available body width and uses
object-fit: coverwithin its aspect-ratio box.Example