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

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

Attribute	Description	Values	Default
breakpoint	Enables the stacked version below the given breakpoint	`xs`, `sm`, `md`, `lg`, `xl`	none
gutter-size	Adjusts the margin between the text and the image	`small`, `normal`, `large`	`normal`
reverse	Swap the image to the right side	–	false

Slot	Slotted content
media-object-image	Slot for an image to be displayed on the side
media-object-body	Slot 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

<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

<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

<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>