<commit_before>--- 
layout: docs 
title: News item 
description: Newslist description 
group: components 
--- 

## Types ## 

### Default news item ### 

{% example html %}

<article class="sv-news-item">
   <div class="sv-news-item__media">
      <img src="https://unsplash.it/467/300/?blur" />
   </div>
   <header class="sv-news-item__headline">
      <div class="sv-news-item__headline__title">
         <h2 class="sv-font sv-font--title">
            <a href="#" class="sv-link sv-link--title"> Lorem ipsum </a>
         </h2>
         <p class="sv-font sv-font--tagline"><NAME>, 12 aug 12:56</p>
      </div>
   </header>
   <section class="sv-news-item__preamble">
      <p class="sv-font"> 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="sv-news-item__footer">
      <a href="#" class="sv-link sv-link--base">Gilla </a>
      <i class="sv-icon--dot"></i>
      <a href="#" class="sv-link sv-link--base">Svara </a>
      <i class="sv-icon--dot"></i>
      <span class="sv-link sv-link--base">12:56</span>
   </footer>
</article>


{% endexample %} 
### Example: Vertical list ### 
`.sv-list--column`
<div class="container" style="width:524px;">
   <ul style="display:flex; flex-direction: column; list-style-type: none;">
      <li>
         <article class="sv-news-item">
            <div class="sv-news-item__media">
               <img src="https://unsplash.it/467/300/?blur" />
            </div>
            <header class="sv-news-item__headline">
               <div class="sv-news-item__headline__title">
                  <h2 class="sv-font sv-font--title">
                     <a href="#" class="sv-link sv-link--title"> Lorem ipsum </a>
                  </h2>
                  <p class="sv-font sv-font--tagline"><NAME>, 12 aug 12:56</p>
               </div>
            </header>
            <div class="sv-news-item__preamble">
               <p class="sv-font"> 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>
            </div>
            <footer class="sv-news-item__footer">
               <a href="#" class="sv-link sv-link--base">Gilla </a>
               <i class="sv-icon--dot"></i>
               <a href="#" class="sv-link sv-link--base">Svara </a>
               <i class="sv-icon--dot"></i>
               <span class="sv-link sv-link--base">12:56</span>
            </footer>
         </article>
      </li>
      <li><commit_msg>Removed whitespace<commit_after>--- 
layout: docs
title: News item
description: Newslist description
group: components
--- 

## Types ## 

### Default news item ### 

{% example html %}

<article class="sv-news-item">
   <div class="sv-news-item__media">
      <img src="https://unsplash.it/467/300/?blur" />
   </div>
   <header class="sv-news-item__headline">
      <div class="sv-news-item__headline__title">
         <h2 class="sv-font sv-font--title">
            <a href="#" class="sv-link sv-link--title"> Lorem ipsum </a>
         </h2>
         <p class="sv-font sv-font--tagline"><NAME>, 12 aug 12:56</p>
      </div>
   </header>
   <section class="sv-news-item__preamble">
      <p class="sv-font"> 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="sv-news-item__footer">
      <a href="#" class="sv-link sv-link--base">Gilla </a>
      <i class="sv-icon--dot"></i>
      <a href="#" class="sv-link sv-link--base">Svara </a>
      <i class="sv-icon--dot"></i>
      <span class="sv-link sv-link--base">12:56</span>
   </footer>
</article>


{% endexample %} 
### Example: Vertical list ### 
`.sv-list--column`
<div class="container" style="width:526px;">
   <ul style="display:flex; flex-direction: column; list-style-type: none;">
      <li>
         <article class="sv-news-item">
            <div class="sv-news-item__media">
               <img src="https://unsplash.it/467/300/?blur" />
            </div>
            <header class="sv-news-item__headline">
               <div class="sv-news-item__headline__title">
                  <h2 class="sv-font sv-font--title">
                     <a href="#" class="sv-link sv-link--title"> Lorem ipsum </a>
                  </h2>
                  <p class="sv-font sv-font--tagline"><NAME>, 12 aug 12:56</p>
               </div>
            </header>
            <div class="sv-news-item__preamble">
               <p class="sv-font"> 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>
            </div>
            <footer class="sv-news-item__footer">
               <a href="#" class="sv-link sv-link--base">Gilla </a>
               <i class="sv-icon--dot"></i>
               <a href="#" class="sv-link sv-link--base">Svara </a>
               <i class="sv-icon--dot"></i>
               <span class="sv-link sv-link--base">12:56</span>
            </footer>
         </article>
      </li>
      <li>
{'fraction_non_alphanumeric': 0.16417139907072792, 'fraction_numerical': 0.013422818791946308, 'mean_word_length': 2.1552660152008687, 'pattern_counts': {'":': 0, '<': 141, '<?xml version=': 0, '>': 141, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3799670', 'n_tokens_mistral': 2027, 'n_tokens_neox': 1878, 'n_words': 452}