Media Block Hero

A MediaBlockHero displays an image or video on one side, with optional text, buttons and links on the other.

Example

Preview

NEW!

lorem ipsum dolor

Voluptate velit esse eu fugiat nulla pariatur. Only $10.

Code

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,
  MediaBlockHeroPrimaryMedia,
  MediaBlockHeroBackground,
  MediaBlockHeroTextBlock,
  MediaBlockHeroHeader,
  MediaBlockHeroEyebrow,
  MediaBlockHeroSubcopy,
  MediaBlockHeroCTAs,
  MediaBlockHeroLinks,
} from '@hv/ui/hero';
import { Button } from '@hv/ui/button';
import { ImageLink } from '@hv/ui/image-link';

export default function MediaBlockHeroExample({
  ctas,
  links,
  imageLinks,
  textBlockPosition,
  mediaPrimary,
  mediaSecondary,
  eyebrowText,
  header,
  subcopy,
  ...variants
}) {
  return (
    <MediaBlockHero {...variants}>
      <MediaBlockHeroPrimaryMedia>
        <img
          src={`/img/${mediaPrimary.src}`}
          alt={mediaPrimary.alt}
          className='absolute inset-0 h-full w-full object-cover'
        />
      </MediaBlockHeroPrimaryMedia>
      <MediaBlockHeroContent>
        <MediaBlockHeroBackground asChild>
          <div
            className={`absolute inset-0 z-0 h-full w-full`}
            style={{ backgroundColor: mediaSecondary.color }}
          />
        </MediaBlockHeroBackground>
        <MediaBlockHeroTextBlock position={textBlockPosition}>
          <MediaBlockHeroEyebrow {...eyebrowText} />
          <MediaBlockHeroHeader {...header} />
          <MediaBlockHeroSubcopy {...subcopy} />
        </MediaBlockHeroTextBlock>
        <MediaBlockHeroCTAs
          {...ctas}
          direction={variants?.ctaDirection ?? 'rowCenter'}
        >
          {ctas?.map((cta, idx) => (
            <Button key={idx} variant={cta.variant}>
              {cta.label}
            </Button>
          ))}
        </MediaBlockHeroCTAs>
        <MediaBlockHeroLinks direction={variants?.linkDirection ?? 'rowCenter'}>
          {links?.map((link, idx) => (
            <Button key={idx} variant={link.variant}>
              {link.label}
            </Button>
          ))}
        </MediaBlockHeroLinks>
        {imageLinks?.length > 0 && (
          <MediaBlockHeroLinks
            direction={variants?.imageLinkDirection ?? 'rowCenter'}
          >
            {imageLinks?.map((link, idx) => (
              <ImageLink
                key={idx}
                imageUrl={link.imageUrl ?? ''}
                href={link.href ?? ''}
                label={link.label}
                size={link.size ?? 'button'}
                {...link}
              />
            ))}
          </MediaBlockHeroLinks>
        )}
      </MediaBlockHeroContent>
    </MediaBlockHero>
  );
}

Variants

Use theicon above to preview

Variant	Description	Values
MediaBlockHero.desktopOrientation		top bottom left right center topLeft topRight bottomLeft bottomRight
MediaBlockHero.mobileOrientation		top bottom left right center topLeft topRight bottomLeft bottomRight
MediaBlockHero.paddingTop		regular extra
MediaBlockHero.paddingBottom		regular extra
MediaBlockHero.height		default hero banner
MediaBlockHeroTextBlock.position		left right center
MediaBlockHeroCTAs.direction		rowStart rowEnd rowCenter columnStart columnEnd columnCenter
MediaBlockHeroLinks.direction		rowStart rowEnd rowCenter columnStart columnEnd columnCenter
MediaBlockHeroLinks.imageLinkDirection		rowStart rowEnd rowCenter columnStart columnEnd columnCenter

Customization

The 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 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>