Media Block Hero
A MediaBlockHero
displays an image or video on one side, with optional text, buttons and links on the other.
Example
- Preview
- Code
NEW!
lorem ipsum dolor sit amet
Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Only $10.
tip
If using this component in a NextJS app, replace the <img/>
element used in this code example with the NextJS Image
component.
import {
MediaBlockHero,
MediaBlockHeroContent,
MediaBlockHeroBackground,
MediaBlockHeroTextBlock,
MediaBlockHeroHeader,
MediaBlockHeroEyebrow,
MediaBlockHeroSubcopy,
MediaBlockHeroCTAs,
MediaBlockHeroLinks,
} from '@hv/ui/hero';
import { Button } from '@hv/ui/button';
import { mockMediaBlockHero } from '@hv/mock/cms';
export default function MediaBlockHeroExample({
ctas,
links,
textBlockPosition,
...variants
}) {
return (
<MediaBlockHero {...variants}>
<MediaBlockHeroContent>
<img
src={`/img/${mockMediaBlockHero.mediaPrimary.src}`}
alt={mockMediaBlockHero.mediaPrimary.alt}
className='absolute inset-0 h-full w-full object-cover'
/>
</MediaBlockHeroContent>
<MediaBlockHeroContent>
<MediaBlockHeroBackground asChild>
<div
className={`absolute inset-0 z-0 h-full w-full`}
style={{ backgroundColor: mockMediaBlockHero.mediaSecondary.color }}
/>
</MediaBlockHeroBackground>
<MediaBlockHeroTextBlock position={textBlockPosition}>
<MediaBlockHeroEyebrow {...mockMediaBlockHero?.eyebrowText} />
<MediaBlockHeroHeader {...mockMediaBlockHero?.header} />
<MediaBlockHeroSubcopy {...mockMediaBlockHero?.subcopy} />
</MediaBlockHeroTextBlock>
<MediaBlockHeroCTAs {...ctas}>
{mockMediaBlockHero?.ctas?.map((cta, idx) => (
<Button key={idx} variant={cta.variant}>
{cta.label}
</Button>
))}
</MediaBlockHeroCTAs>
<MediaBlockHeroLinks {...links}>
{mockMediaBlockHero?.links?.map((link, idx) => (
<Button key={idx} variant={link.variant}>
{link.label}
</Button>
))}
</MediaBlockHeroLinks>
</MediaBlockHeroContent>
</MediaBlockHero>
);
}
Variants
Use theicon above to preview
Variant | Description | Values |
---|---|---|
MediaBlockHero.desktopOrientation |
| |
MediaBlockHero.mobileOrientation |
| |
MediaBlockHero.paddingTop |
| |
MediaBlockHero.paddingBottom |
| |
MediaBlockHero.height |
| |
MediaBlockHeroTextBlock.position |
| |
MediaBlockHeroCTAs.direction |
| |
MediaBlockHeroLinks.direction |
|
Customization
Approach for customization will vary depending on if the customization is intended to be global for all consumers of the ui component or if it is only an override for a particular instance.
- If the customization is necessary for all users, update the source code of in the ui component library directly.
- Otherwise, you can pass
className
overrides.
Say you wanted to make the eyebrow text italic for one particular use case:
<MediaHero>
...
<MediaHeroContent>
<MediaHeroTextBlock>
<MediaHeroEyebrow className='italic'>Eyebrow Text</MediaHeroEyebrow>
<MediaHeroHeader>HeaderText</MediaHeroHeader>
<MediaHeroSubcopy>Subcopy</MediaHeroSubcopy>
</MediaHeroTextBlock>
</MediaHeroContent>
</MediaHero>