Component with the SuitCSS conventions demo of a component using conventions of SuitCSS for component-based dev // source http://jsbin.com/lumeqa

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Component with the SuitCSS conventions</title>
  <meta name="description" content="demo of a component using conventions of SuitCSS for component-based dev">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<style id="jsbin-css">
/* base */
button{
  border:0 none;
  background:#eee none;
  cursor:pointer;
  color:#222;
}

/* component */
.Excerpt{
  padding:11px;
  background-color:#222;
  color:#eee;
  margin-top:22px;
  max-width:75%;
}

.Excerpt-thumbnail{
  width:44px;
  margin:0;
}

.Excerpt--hasImage .Excerpt-info{
  margin-left:66px;
}

.Excerpt-title{
  margin:2px 0;
}

.Excerpt-p{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* utils */

.u-floatLeft{
  float:left; 
}

.is-expanded{
  white-space:normal;
  overflow:visible;
}
</style>
</head>
<body>
<article class="Excerpt Excerpt--hasImage">
  
  
  <img class="Excerpt-thumbnail u-floatLeft" src="https://static.jsbin.com/images/dave.min.svg"/>
  
  
  <div class="Excerpt-info">
    
    <h1 class="Excerpt-title">Title</h1>
    
   <p class="Excerpt-p js-expandTarget">Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph</p>
    
    
    <button type="button" class="Excerpt-readMore js-readMore">Read More</button>
    
  </div>
</article>
  
<article class="Excerpt">
  
  
  <div class="Excerpt-info">
    
    <h1 class="Excerpt-title">Title</h1>
    
   <p class="Excerpt-p js-expandTarget">Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph</p>
    
    
    <button type="button" class="Excerpt-readMore js-readMore">Read More</button>
    
  </div>
</article>
<script id="jsbin-javascript">
$('.js-readMore').on('click', function(e){
  var $this = $(this);
  if( $this.text() === "Read More"){
    $(this).siblings('.js-expandTarget').addClass('is-expanded');
    $this.text("Read Less");
  }else{
    $(this).siblings('.js-expandTarget').removeClass('is-expanded');
    $this.text("Read More");
  }
});
</script>