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