Media

Media Object

The media object pattern is a common paradigm and poster child for OOCSS, introduced by Nicole Sullivan . It's a relatively simple pattern, but also extremely common and utilizing it as an object gives us the flexibility to use it in many different components without increasing the complexity of or duplication of our CSS.

Just think about these things in your mind

Then bring them into your world. That's why I paint - because I can create the kind of world I want - and I can make this world as happy as I want it. A thin paint will stick to a thick paint.

<div class="o-media">
  <img class="o-media__img u-m-r" src="/images/placeholder/doctor-300x300.jpg" alt="Bob Ross" style="width: 64px; height: 64px;">
  <div class="o-media__body">
    <h3 class="nyp-type-h4 u-text-semibold">Just think about these things in your mind</h3>
    <p>Then bring them into your world. That's why I paint - because I can create the kind of world I want - and I can make this world as happy as I want it. A thin paint will stick to a thick paint.</p>
  </div>
</div>

Just think about these things in your mind

You can make the image a circle by adding o-media__img--circle. You can also adjust the width and height if the image. Then bring them into your world.

<div class="o-media">
  <div class="o-media__body">
    <h3 class="nyp-type-h4 u-text-semibold">Just think about these things in your mind</h3>
    <p>You can make the image a circle by adding <code>o-media__img--circle</code>. You can also adjust the <code>width</code> and <code>height</code> if the image. Then bring them into your world.</p>
  </div>
  <img class="o-media__img o-media__img--circle u-m-l" src="/images/placeholder/doctor-300x300.jpg" alt="Bob Ross" style="width: 100px; height: 100px;">
</div>

Alignment

You can align your media and content element in the o-media object with by using the flex utilities available in NYP Framework. Keep in mind that you can apply utilities to either the o-media parent or its direct descendants o-media__content and o-media__img.

Align Everything Center

<div class="o-media u-f-align-center">
  <img class="o-media__img u-m-r" src="/images/placeholder/doctor-300x300.jpg" alt="Bob Ross" style="width: 64px; height: 64px;">
  <div class="o-media__body">
    <h3 class="nyp-type-h4 u-text-semibold">Align Everything Center</h3>
  </div>
</div>

Align Only Image End

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

<div class="o-media">
  <img class="o-media__img o-media__img--circle u-m-r u-f-align-self-end" src="/images/placeholder/doctor-300x300.jpg" alt="Bob Ross" style="width: 64px; height: 64px;">
  <div class="o-media__body">
    <h3 class="nyp-type-h4 u-text-semibold">Align Only Image End</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
  </div>
</div>

Sizes

There are a few prebuilt image sizing options if you don't want to inline the dimensions of the image. You are of course free to add any dimensions you want by not specifying a size modifier and inline the dimensions.

Size Prefixes

When you see a size prefix like xl on components and objects in NYP Framework, it often corresponds directly to the available global spacing units. If you see a suffix prefixed with an @ it's attached to a breakpoint size and not a spacing unit, like @xl.

I need a really tiny image.

<div class="o-media o-media--sm u-f-align-center">
  <img class="o-media__img u-m-r-xs" src="/images/placeholder/doctor-300x300.jpg" alt="Bob Ross">
  <div class="o-media__body">
    <p>I need a really tiny image.</h3>
  </div>
</div>

I need bigger image.

<div class="o-media o-media--xl">
  <img class="o-media__img u-m-r" src="/images/placeholder/doctor-300x300.jpg" alt="Bob Ross">
  <div class="o-media__body">
    <h3 class="nyp-type-h4 u-text-semibold">I need bigger image.</h3>
  </div>
</div>

I need an even bigger image.

<div class="o-media o-media--xxl">
  <img class="o-media__img u-m-r" src="/images/placeholder/doctor-300x300.jpg" alt="Bob Ross" >
  <div class="o-media__body">
    <h3 class="nyp-type-h4 u-text-semibold">I need an even bigger image.</h3>
  </div>
</div>

I need the biggest image.

<div class="o-media o-media--xxxl">
  <img class="o-media__img u-m-r" src="/images/placeholder/doctor-300x300.jpg" alt="Bob Ross">
  <div class="o-media__body">
    <h3 class="nyp-type-h4 u-text-semibold">I need the biggest image.</h3>
  </div>
</div>