Media Card

A MediaCard displays an image or video with optional text, buttons and links positioned on top.

Example

Preview

Elite

Fit to Fly

pro

ShopLearn

Shop MoreLearn More

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 { mockMediaCards } from '@hv/mock/cms';

import { Button } from '@hv/ui/button';
import {
  MediaCard,
  MediaCardBackground,
  MediaCardEyebrowText,
  MediaCardCTAs,
  MediaCardContent,
  MediaCardHeader,
  MediaCardLinks,
  MediaCardSubcopy,
  MediaCardTextBlock,
} from '@hv/ui/media-card';

const item = mockMediaCards.mediaCard;

export default function MediaCardExample({
  ctas,
  links,
  textBlockPosition,
  ...variants
}) {
  return (
    <MediaCard className='text-foreground' {...variants}>
      <MediaCardBackground asChild>
        <img
          src={`/img/${item.media.src}`}
          alt='Mock Media Card'
          className='absolute inset-0 h-full w-full object-cover'
        />
      </MediaCardBackground>
      <MediaCardContent>
        <MediaCardTextBlock position={textBlockPosition}>
          <MediaCardEyebrowText {...item?.eyebrowText} />
          <MediaCardHeader {...item?.header} />
          <MediaCardSubcopy {...item?.subcopy} />
        </MediaCardTextBlock>
        <MediaCardCTAs {...ctas}>
          {item?.ctas?.map((cta, idx) => (
            <Button asChild key={idx} variant={cta.variant}>
              <a href={cta.href ?? ''}>{cta.label}</a>
            </Button>
          ))}
        </MediaCardCTAs>
        <MediaCardLinks {...links}>
          {item?.links?.map((link, idx) => (
            <Button asChild key={idx} variant={link.variant}>
              <a href={link.href ?? ''}>{link.label}</a>
            </Button>
          ))}
        </MediaCardLinks>
      </MediaCardContent>
    </MediaCard>
  );
}

Variants

Use theicon above to preview

Variant	Description	Values
MediaCard.desktopOrientation	Orientation of media card content on desktop viewports	top bottom left right center topLeft topRight bottomLeft bottomRight
MediaCard.mobileOrientation	Orientation of media card content on mobile viewports	top bottom left right center topLeft topRight bottomLeft bottomRight
MediaCard.paddingTop	Option to control spacing above the media card	regular extra
MediaCard.paddingBottom	Option to control spacing below the media card	regular extra
MediaCard.height	Height control useful for using media card in various contexts	default hero banner
MediaCardTextBlock.position	Text alignment of rich text block	left right center
MediaCardCTAs.direction	Presentation direction of CTAs	rowStart rowEnd rowCenter columnStart columnEnd columnCenter
MediaCardLinks.direction	Presentation direction of Links	rowStart rowEnd rowCenter columnStart columnEnd columnCenter

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 component source code of in the ui library package directly.
• Otherwise, you can pass className overrides.

Say you wanted to make the header text larger in one particular instance:

<MediaCard>
  ...
  <MediaCardContent>
    <MediaCardTextBlock position={textBlockPosition}>
      <MediaCardEyebrowText>{item?.eyebrowText}</MediaCardEyebrowText>
      <MediaCardHeader className='text-6xl'>{item?.header}</MediaCardHeader>
      <MediaCardSubcopy>{item?.subcopy}</MediaCardSubcopy>
    </MediaCardTextBlock>
  </MediaCardContent>
</MediaCard>