Component

Media Shelf

SCSS Location: /styles/scss/partial/_media-shelf.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

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.

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.

Dark

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Lorem Ipsum
Alt text describing the image.

Light

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem Ipsum
Alt text describing the image.

Neutral

Lorem Ipsum

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Alt text describing the image.

Neutral with Cards

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.