Media
The Media
component renders an image, video or a color fill. It requires a relatively positioned wrapper element; it is absolutely positioned to fill its parent container. While it can be used alone, it is most often used as a sub-component of the Media components (MediaCard
, MediaHero
, etc.).
Examples
Color-fill Media
- Preview
- Code
import { Media } from '@hv/ui/media';
<div className='w-48 h-48 relative'>
<Media media={{
type: 'color',
id: '#ccc',
color: '#ccc'
}} />
</div>
Image Media
- Preview
- Code
import { Media } from '@hv/ui/media';
<div className='w-48 h-48 relative'>
<Media media={{
type: 'image',
id: '123',
src: `/assets/mockImages/mediaBlockHero1.webp`,
alt: 'image description',
title: 'image title',
}} />
</div>
Video Media
- Preview
- Code
import { Media } from '@hv/ui/media';
<div className='w-48 h-48 relative'>
<Media media={{
type: 'video',
id: '456',
alt: 'video description',
title: 'video title',
provider: {
type: 'default',
src: `/img/assets/mockVideos/sampleVideo.mp4`,
},
}} />
</div>
Props
Property | Description | Type |
---|---|---|
media | The medium to display: color, image, or video | MediaType |
priority | NextJS image property to control lazy loading | Boolean |
sizes | NextJS image property used in image optimization | String |
className | Custom CSS classes for styling the element | String |