Media Object Stable

Media objects are useful to layout repetitive components like comments where content shouldn’t wrap around, for example, an image next to it.

Usage Code

Default media object

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse nihil possimus praesentium et neque omnis distinctio doloremque ullam iste ipsum earum tempora, autem ipsam ex incidunt ipsa totam qui alias?

<div class="media-object">
  <div class="media-object__image">
    <img width="100" src="/ui-marcom/version/2.3/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg" alt="">
  </div>
  <div class="media-object__body">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse nihil possimus  praesentium et neque omnis distinctio doloremque ullam iste ipsum earum tempora, autem  ipsam ex incidunt ipsa totam qui alias?</p> 
  </div>
</div>

Small spacing mod

<div class="media-object media-object--small-spacing">
  <div class="media-object__image">
    <img width="50" src="/ui-marcom/version/2.3/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg" alt="">
  </div>
  <div class="media-object__body">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse nihil possimus praesentium et neque omnis distinctio doloremque ullam iste ipsum earum tempora, autem ipsam ex incidunt ipsa totam qui alias?</p> 
  </div>
</div>

Reversed mod

<div class="media-object media-object--right">
  <div class="media-object__image">
    <img width="100" src="/ui-marcom/version/2.3/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg" alt="">
  </div>
  <div class="media-object__body">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse nihil possimus  praesentium et neque omnis distinctio doloremque ullam iste ipsum earum tempora, autem  ipsam ex incidunt ipsa totam qui alias?</p> 
  </div>
</div>

Stacked mod

Image is stacked above the text on extra-small viewport only.

<div class="media-object media-object--stacked-xs">
  <div class="media-object__image">
    <img width="150" src="/ui-marcom/version/2.3/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg" alt="">
  </div>
  <div class="media-object__body">
    <p>Image is stacked above the text on extra-small viewport only.</p> 
  </div>
</div>

Stacked small-down

Image is stacked above the text on extra-small and small viewport.

<div class="media-object media-object--stacked-sm">
  <div class="media-object__image">
    <img width="150" src="/ui-marcom/version/2.3/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg" alt="">
  </div>
  <div class="media-object__body">
    <p>Image is stacked above the text on extra-small and small viewport.</p> 
  </div>
</div>

Stacked medium-down

Image is stacked above the text from extra-small to medium viewport.

<div class="media-object media-object--stacked-md">
  <div class="media-object__image">
    <img width="150" src="/ui-marcom/version/2.3/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg" alt="">
  </div>
  <div class="media-object__body">
    <p>Image is stacked above the text from extra-small to medium viewport.</p> 
  </div>
</div>