UI MarCom 3

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.

<uimc-media-object>
  <img slot="media-object-image" width="" src="/ui-marcom" alt="">
  <div slot="media-object-body"></div>
</uimc-media-object>

AttributeDescriptionValuesDefault
breakpointEnables the stacked version below the given breakpointxs, sm, md, lg, xlnone
gutter-sizeAdjusts the margin between the text and the imagesmall, normal, largenormal
reverseSwap the image to the right sidefalse

SlotSlotted content
media-object-imageSlot for an image to be displayed on the side
media-object-bodySlot for any kind of text content

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?

<uimc-media-object>
  <img slot="media-object-image" width="100" src="/ui-marcom/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg" alt="">
  <div slot="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>
</uimc-media-object>

Use aspect ratio on the image

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?

<uimc-media-object>
  <uimc-aspect-ratio formats='{"xs":"1x1"}' slot="media-object-image">
    <img width="100" src="/ui-marcom/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg" alt="">
  </uimc-aspect-ratio>
  <div slot="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>
</uimc-media-object>

Small spacing mod

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?

<uimc-media-object gutter-size="small">
  <img slot="media-object-image" width="50" src="/ui-marcom/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg" alt="">
  <div slot="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>
</uimc-media-object>

Reversed mod

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?

<uimc-media-object reverse>
  <img slot="media-object-image" width="100" src="/ui-marcom/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg" alt="">
  <div slot="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>
</uimc-media-object>

Stacked mod

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

<uimc-media-object breakpoint="xs">
  <img slot="media-object-image" width="150" src="/ui-marcom/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg" alt="">
  <div slot="media-object-body"><p>Image is stacked above the text on extra-small viewport only.</p></div>
</uimc-media-object>

Stacked small-down

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

<uimc-media-object breakpoint="sm">
  <img slot="media-object-image" width="150" src="/ui-marcom/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg" alt="">
  <div slot="media-object-body"><p>Image is stacked above the text on extra-small and small viewport.</p></div>
</uimc-media-object>

Stacked medium-down

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

<uimc-media-object breakpoint="md">
  <img slot="media-object-image" width="150" src="/ui-marcom/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg" alt="">
  <div slot="media-object-body"><p>Image is stacked above the text from extra-small to medium viewport.</p></div>
</uimc-media-object>