News item

Types

Default news item

Lorem ipsum

Eric Ericsson, aug 12 12:56

Bacon ipsum dolor amet leberkas jowl tail, cow rump pork loin pancetta corned beef. Drumstick pork shank, salami turkey t-bone jerky corned beef picanha jowl brisket frankfurter shankle. Meatball jowl sausage pork belly chicken hamburger, andouille pork loin capicola.

<article class="env-news-item">
   <div class="env-news-item__media">
      <img src="https://unsplash.it/467/300/?blur" alt="" />
   </div>
   <header class="env-news-item__headline">
      <div class="env-news-item__headline__title">
         <h2 class="env-text">
            <a href="#">Lorem ipsum</a>
         </h2>
         <p class="env-text env-text--muted">Eric Ericsson, aug 12 12:56</p>
      </div>
   </header>
   <section class="env-news-item__preamble">
      <p class="env-text">Bacon ipsum dolor amet leberkas jowl tail, cow rump pork loin pancetta corned beef. Drumstick pork shank, salami turkey
         t-bone jerky corned beef picanha jowl brisket frankfurter shankle. Meatball jowl sausage pork belly chicken hamburger,
         andouille pork loin capicola.</p>
   </section>
   <footer class="env-news-item__footer">
      <ul class="env-list env-list--horizontal env-list-dividers--left">
         <li class="env-list__item">
            <a href="#" class="env-text">Like</a>
         </li>
         <li class="env-list__item">
            <a href="#" class="env-text">Reply</a>
         </li>
         <li class="env-list__item">
            <span class="env-text">12:56</span>
         </li>
      </ul>
   </footer>
</article>

Example: Vertical list

.env-list

Example: Horizontal list

env-list env-list--horizontal--fixed env-list--horizontal--fixed--2