Featured article modules re-using abstractions and creating generic class names.

featured-article.html

<!-- Current Markup -->
<div class="category-and-time">
  <p class="feature-category">Food &amp; Beverage</p>
  <p class="feature-time">2 hours ago</p>
</div>

<!--
  Re-using current abstractions and more generic naming convention:
  
  Also, I'd argue a list is more-semantic than two paragraph tags in this situation.
  I'd see this as a list of meta properties to the "article/story".
-->
<ul class="v-list featured__meta">
  <li class="text--caps">Food &amp; Beverage</li>
  <li>2 hours ago</li>
</ul>

style.scss

// Instead of introducing all of these rules
.category-and-time {
  background: url(../images/icon-speech-bub.png) no-repeat 0 0;
  padding-left: 32px;
}
.feature-category, .feature-time {
  margin: 0 0 2px;
  padding: 0;
}
.feature-category {
  text-transform: uppercase;
}


// The only required style to be added then is this one class.
// This also makes it a little more generic/abstracted in case category/time is
// removed, or if any other data is added then the classname still makes sense.
.featured__meta {
  padding-left: 32px;
  background: url(../images/icon-speech-bub.png) no-repeat 0 0;
}

more info on the BEM naming convention
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/