Example of OOCSS

oocss-study

<div class="media avatar flip">
    <a href="http://placekitten.com/75/75" class="img">
        <img src="http://placekitten.com/75/75" alt="Purr Avatar" />
    </a>
    <div class="media-hd">
        <h3 class="heading h4">The proper heading, specific to this avatar</h3>
    </div>
    <div class="media-bd">
        <div class="wysiwyg">
            <p>Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis.</p>
        </div>
    </div>
</div>


<aside class="callout callout-content">
    
    <div class="callout-hd">
        <h3 class="heading h2">A Callout Specific Heading</h3>
    </div>
    
    <div class="callout-bd">
        <div class="wysiwyg">
            
            <img src="http://placekitten.com/230/160" alt="Weh Kitteh" class="right" />
            
            <p>Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna.</p>
            
            <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim. Nulla facilisi. Duis aliquet egestas purus in blandit. In pellentesque faucibus vestibulum, nulla at nulla justo.</p>
            
        </div>
    </div>
    
</aside>