Media Objects - Joystick Design System

Media objects are used to display content with multiple types of components.

A classic example of a media object is a Facebook status. Each individual item in a Facebook feed is a media object: they all contain a user's avatar and name, and the content of the status. The content can be a video, a picture, or just plain text. But the status itself is contained within a media object.

Base

This is the base version of the media object. The container for this object can be any HTML element. It should have the class .joy-media placed on the container. Inside are the two required elements. The figure (image, icon, etc) should be placed inside an element with the .joy-media__figure class. The information associated with it should be placed in an element with the .joy-media__body class. By default, the text starts at the top of the figure. Use the centered variant to center the text and figure.

Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.

<div class="joy-media">
  <div class="joy-media__figure">
    <img src="/images/avatar--bd.png" style="height: 100px;" alt="Alt Text">
  </div>
  <div class="joy-media__body">
    <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>
  </div>
</div>

Center

With the centered media object, the text remains vertically centered next to the figure. In addition to the .joy-media class, add the .joy-media--center class to the container.

<div class="joy-media joy-media--center">
  <div class="joy-media__figure">
    <img src="/images/avatar--bd.png" style="height: 150px;" alt="Alt Text">
  </div>
  <div class="joy-media__body">
    <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>
  </div>
</div>

Reverse

To place the text to the left of the figure, simply place the .joy-media__figure after the .joy-media__body element and add the class .joy-media__figure--reverse to apply the appropriate spacing.

<div class="joy-media">
  <div class="joy-media__body">
    <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>
  </div>
  <div class="joy-media__figure joy-media__figure--reverse">
    <img src="/images/avatar--bd.png" style="height: 100px;" alt="Alt Text">
  </div>
</div>

Double

Use the double media object to place a figure on both the right and left of the text. As in the base media object, place both the .joy-media__figure elements before the .joy-media__body. The figure that displays on the right also receives the .joy-media__figure--reverse class.

<div class="joy-media joy-media--double">
  <div class="joy-media__figure">
    <img src="/images/avatar--bd.png" style="height: 100px;" alt="Alt Text">
  </div>
  <div class="joy-media__figure joy-media__figure--reverse">
    <img src="/images/joystick-context.svg" style="height: 100px;" alt="Alt Text">
  </div>
  <div class="joy-media__body">
    <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>
  </div>
</div>

Responsive

This responsive media object stacks on small screens using the media query mq-small-max and then switches to the regular side-by-side display for larger screens.

<div class="joy-media joy-media--responsive">
  <div class="joy-media__figure">
    <img src="/images/avatar--bd.png" style="height: 100px;" alt="Alt Text">
  </div>
  <div class="joy-media__body">
    <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>
  </div>
</div>