Media object

by Rob Carroll

HTML

<div class="media">
    <img src=http://placekitten.com/96/96 alt="" class=media__img>
    <p class=media__body>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="media">
    <img src=http://placekitten.com/96/96 alt="" class=media__img>
    <p class=media__body>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

CSS

/**
 * These demo styles sit on top of inuit.css
 * github.com/csswizardry/inuit.css/blob/master/inuit.css/objects/_media.scss
 */

html{
    font:1em/1.5 Georgia, serif;
    padding:5%;
    background-color:#fff;
    color:#333;
}

.media{
    display:block;
}

.media:after{
        content:"";
        display:table;
        clear:both;
}

.media__img{
  float:left;
  margin-right:1rem;
}

.media__body{
  overflow:hidden;
}
    
.media__body,
.media__body > :last-child{
  margin-bottom:0;
}