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.

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.

Oversized Image Left Aligned

Media Shelf oversized image left aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Alternative text describing the image.

Oversized Image Right Aligned

Media Shelf oversized image right aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Alternative text describing the image.

Non-oversized Image Left Aligned

Non-oversized image, left aligned, with ample title text

Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.

Alternative text describing the image.

Non-oversized Image Right Aligned

Non-oversized image, right aligned, with ample title text

Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.

Alternative text describing the image.

With Video Link + 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.