Skip to main content

Media

    Media

    The basic media object to align images inline with text content utilizing flex and utilities to provide a variety of layouts and alignment options.

    Links:

    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.

    Bob Ross

    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

    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.

    Bob Ross
    <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>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>
      <img class="o-media__img u-m-l" src="/images/placeholder/doctor-300x300.jpg" alt="Bob Ross" style="width: 64px; height: 64px;">
    </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.

    Bob Ross

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

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

    Bob Ross

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

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

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

    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>