Media Shelf

Description

A component comprised of a full-width shelf that can contain an eyebrow, heading, paragraph, and image or video, and an optional card list below the shelf.

Guidelines

The video will appear in a modal.

Usage

If there is a card list provided to the component, the outermost container should be given a class of media-shelf--has-cards.

If eyebrow text is provided, the eyebrow should use an h2 tag and the heading below in the copy should be an h3 tag. If no eyebrow text is provided, the heading should use an h2 tag.

If oversized is selected, the outermost media-shelf__container should be given the modifier of media-shelf__container--oversized. If the intention is to have the media shelf left aligned, the modifier media-shelf__container--left can be added.

Based on the CMS choice of background color, provide the outermost Media Shelf container with a modifier class of media-shelf--dark, media-shelf--light, or media-shelf--neutral.

Provide the appropriate button styling based on the Media Shelf background color:

• Buttons within a dark background Media Shelf should use the classes btn btn--secondary.
• Buttons within a light or neutral background Media Shelf should use btn btn--primary.