We are working on something new! Check it out here!

Feed

New generation social feed apparence

Modifiers

  • .social-compressed - Apperance is adjusted to fit a narrow view horizontally.

Example

View all posts
<ul class="social social-feed-v2 grid no-gutter" data-packery='{ "itemSelector": ".social-item", "percentPosition": true, "transitionDuration": 0 }'>
 <li class="social-item grid-xs-12 grid-sm-6 grid-md-6 grid-lg-4">
     <div class="material">
         <div class="social-image">
             <a href="#post" class="ratio-16-9" style="background-image: url('https://unsplash.it/300/200?image=468');"></a>
         </div>
         <div class="social-user">
             <div class="user-image material-shadow-md">
                 <img src="https://unsplash.it/75/75?image=469"/>
             </div>
             <div class="social-post-details">
                 <a class="social-author" rel="author" href="#author">John Doe</a>
                 <time class="social-publish">9 hours ago</time>
             </div>
         </div>
         <div class="social-content">
             <a href="#post" class="social-text" class="social-text">
                 Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus.
             </a>
         </div>
         <div class="social-footer clearfix">
             <span class="text-left"><i class="pricon pricon-thumbs-up"></i> 394 likes</span>
             <span class="text-right">posted on facebook</span>
         </div>
     </div>
 </li>
 <li class="social-item grid-xs-12 grid-sm-6 grid-md-6 grid-lg-4">
     <div class="material">
         <div class="social-image">
             <a href="#post" class="ratio-16-9" style="background-image: url('https://unsplash.it/300/200?image=468');"></a>
         </div>
         <div class="social-user">
             <div class="user-image material-shadow-md">
                 <img src="https://unsplash.it/75/75?image=469"/>
             </div>
             <div class="social-post-details">
                 <a class="social-author" rel="author" href="#author">John Doe</a>
                 <time class="social-publish">9 hours ago</time>
             </div>
         </div>
         <div class="social-content">
             <a href="#post" class="social-text" class="social-text">
                 Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus.
             </a>
         </div>
         <div class="social-footer clearfix">
             <span class="text-left"><i class="pricon pricon-thumbs-up"></i> 394 likes</span>
             <span class="text-right">posted on facebook</span>
         </div>
     </div>
 </li>
 <li class="social-item grid-xs-12 grid-sm-6 grid-md-6 grid-lg-4">
     <div class="material">
         <div class="social-image">
             <a href="#post" class="ratio-16-9" style="background-image: url('https://unsplash.it/300/200?image=468');"></a>
         </div>
         <div class="social-user">
             <div class="user-image material-shadow-md">
                 <img src="https://unsplash.it/75/75?image=469"/>
             </div>
             <div class="social-post-details">
                 <a class="social-author" rel="author" href="#author">John Doe</a>
                 <time class="social-publish">9 hours ago</time>
             </div>
         </div>
         <div class="social-content">
             <a href="#post" class="social-text" class="social-text">
                 Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus.
             </a>
         </div>
         <div class="social-footer clearfix">
             <span class="text-left"><i class="pricon pricon-thumbs-up"></i> 394 likes</span>
             <span class="text-right">posted on facebook</span>
         </div>
     </div>
 </li>
 <li class="social-item grid-xs-12 grid-sm-6 grid-md-6 grid-lg-4">
     <div class="material">
         <div class="social-image">
             <a href="#post" class="ratio-16-9" style="background-image: url('https://unsplash.it/300/200?image=468');"></a>
         </div>
         <div class="social-user">
             <div class="user-image material-shadow-md">
                 <img src="https://unsplash.it/75/75?image=469"/>
             </div>
             <div class="social-post-details">
                 <a class="social-author" rel="author" href="#author">John Doe</a>
                 <time class="social-publish">9 hours ago</time>
             </div>
         </div>
         <div class="social-content">
             <a href="#post" class="social-text" class="social-text">
                 Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus.
             </a>
         </div>
         <div class="social-footer clearfix">
             <span class="text-left"><i class="pricon pricon-thumbs-up"></i> 394 likes</span>
             <span class="text-right">posted on facebook</span>
         </div>
     </div>
 </li>
 <li class="social-item grid-xs-12 grid-sm-6 grid-md-6 grid-lg-4">
     <div class="material">
         <div class="social-image">
             <a href="#post" class="ratio-16-9" style="background-image: url('https://unsplash.it/300/200?image=468');"></a>
         </div>
         <div class="social-user">
             <div class="user-image material-shadow-md">
                 <img src="https://unsplash.it/75/75?image=469"/>
             </div>
             <div class="social-post-details">
                 <a class="social-author" rel="author" href="#author">John Doe</a>
                 <time class="social-publish">9 hours ago</time>
             </div>
         </div>
         <div class="social-content">
             <a href="#post" class="social-text" class="social-text">
                 Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus.
             </a>
         </div>
         <div class="social-footer clearfix">
             <span class="text-left"><i class="pricon pricon-thumbs-up"></i> 394 likes</span>
             <span class="text-right">posted on facebook</span>
         </div>
     </div>
 </li>
 <li class="social-item grid-xs-12 grid-sm-6 grid-md-6 grid-lg-4">
     <div class="material">
         <div class="social-image">
             <a href="#post" class="ratio-16-9" style="background-image: url('https://unsplash.it/300/200?image=468');"></a>
         </div>
         <div class="social-user">
             <div class="user-image material-shadow-md">
                 <img src="https://unsplash.it/75/75?image=469"/>
             </div>
             <div class="social-post-details">
                 <a class="social-author" rel="author" href="#author">John Doe</a>
                 <time class="social-publish">9 hours ago</time>
             </div>
         </div>
         <div class="social-content">
             <a href="#post" class="social-text" class="social-text">
                 Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus.
             </a>
         </div>
         <div class="social-footer clearfix">
             <span class="text-left"><i class="pricon pricon-thumbs-up"></i> 394 likes</span>
             <span class="text-right">posted on facebook</span>
         </div>
     </div>
 </li>
 <li class="social-item grid-xs-12 grid-sm-6 grid-md-6 grid-lg-4">
     <div class="material">
         <div class="social-image">
             <a href="#post" class="ratio-16-9" style="background-image: url('https://unsplash.it/300/200?image=468');"></a>
         </div>
         <div class="social-user">
             <div class="user-image material-shadow-md">
                 <img src="https://unsplash.it/75/75?image=469"/>
             </div>
             <div class="social-post-details">
                 <a class="social-author" rel="author" href="#author">John Doe</a>
                 <time class="social-publish">9 hours ago</time>
             </div>
         </div>
         <div class="social-content">
             <a href="#post" class="social-text" class="social-text">
                 Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus.
             </a>
         </div>
         <div class="social-footer clearfix">
             <span class="text-left"><i class="pricon pricon-thumbs-up"></i> 394 likes</span>
             <span class="text-right">posted on facebook</span>
         </div>
     </div>
 </li>
 <li class="social-item grid-xs-12 grid-sm-6 grid-md-6 grid-lg-4">
     <div class="material">
         <div class="social-image">
             <a href="#post" class="ratio-16-9" style="background-image: url('https://unsplash.it/300/200?image=468');"></a>
         </div>
         <div class="social-user">
             <div class="user-image material-shadow-md">
                 <img src="https://unsplash.it/75/75?image=469"/>
             </div>
             <div class="social-post-details">
                 <a class="social-author" rel="author" href="#author">John Doe</a>
                 <time class="social-publish">9 hours ago</time>
             </div>
         </div>
         <div class="social-content">
             <a href="#post" class="social-text" class="social-text">
                 Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus.
             </a>
             <a href="#link" class="social-link">
                 <span class="social-link-image" style="background-image: url(https://unsplash.it/75/75?image=169);"></span>
                 <span class="social-link-text">
                     <h4>Magna Bibendum Fermentum</h4>
                     <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum.</p>
                 </span>
             </a>
         </div>
         <div class="social-footer clearfix">
             <span class="text-left"><i class="pricon pricon-thumbs-up"></i> 394 likes</span>
             <span class="text-right">posted on facebook</span>
         </div>
     </div>
 </li>
</ul>
<a class="btn btn-primary btn-block" href="#feed">View all posts</a>
Source file: ~/source/sass/components/social/feed.scss