Stream Articles
Group articles
Active
Firstname Lastname invited you to edit an article
in Groupname
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Article title og:title max 95 chars
Last edited
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Article title og:title max 95 chars
Last edited
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Article title og:title max 95 chars
Last edited
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Article title og:title max 95 chars
Last edited
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Article title og:title max 95 chars
Last edited
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This pattern contains:
atoms-tabs-with-search
molecules-stream-item
HTML
<div class="stream box bc-white">
<header class="sticky">
<figure class="comment__img">
<i class="icon-pen"></i>
</figure>
<h2>Group articles</h2>
<ul class="bare-list nav tabs">
<li><a class="tab tab--active" href="#">Active</a></li>
<li><a class="tab" href="#">Passive</a></li>
<li><a class="tab" href="#">Passive</a></li>
<li class="tabs__search"><a href="#"><i class="icon-search"></i></a></li>
</ul>
<a href="#" class="btn-text fixed-only tabs-as-pulldown">Active <i class="icon-search"></i></a>
</header>
<div class="create-new">
<button class="btn"><i class="icon-pen"></i> Create new a article</button>
</div>
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">invited you to edit an article</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="embedded-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-file_text"></i>
</figure><!-- end embedded item pic -->
<div class="embedded-item__meta">
<a href="#" class="embedded-item__title">Article title og:title max 95 chars</a>
Last edited <time>3 hours ago</time>
</div>
<div class="embedded-item__body">
<figure class="article__img">
<img src="http://placeimg.com/200/200/tech" />
</figure>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul class="bare-list article-actions">
<li>
<a href="#" class="btn-text"><i class="icon-angle_left_circle"></i> View full article <i class="count c-white bc-comp--light" title="Number of edits">3</i></a>
</li>
</ul>
</div>
</div>
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">created a new article</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="embedded-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-file_text"></i>
</figure><!-- end embedded item pic -->
<div class="embedded-item__meta">
<a href="#" class="embedded-item__title">Article title og:title max 95 chars</a>
Last edited <time>3 hours ago</time>
</div>
<div class="embedded-item__body">
<figure class="article__img">
<img src="http://placeimg.com/200/200/tech" />
</figure>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul class="bare-list article-actions">
<li>
<a href="#" class="btn-text"><i class="icon-angle_left_circle"></i> View full article <i class="count c-white bc-comp--light" title="Number of edits">3</i></a>
</li>
</ul>
</div>
</div>
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">invited you to edit an article</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="embedded-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-file_text"></i>
</figure><!-- end embedded item pic -->
<div class="embedded-item__meta">
<a href="#" class="embedded-item__title">Article title og:title max 95 chars</a>
Last edited <time>3 hours ago</time>
</div>
<div class="embedded-item__body">
<figure class="article__img">
<img src="http://placeimg.com/200/200/tech" />
</figure>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul class="bare-list article-actions">
<li>
<a href="#" class="btn-text"><i class="icon-angle_left_circle"></i> View full article <i class="count c-white bc-comp--light" title="Number of edits">3</i></a>
</li>
</ul>
</div>
</div>
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">invited you to edit an article</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="embedded-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-file_text"></i>
</figure><!-- end embedded item pic -->
<div class="embedded-item__meta">
<a href="#" class="embedded-item__title">Article title og:title max 95 chars</a>
Last edited <time>3 hours ago</time>
</div>
<div class="embedded-item__body">
<figure class="article__img">
<img src="http://placeimg.com/200/200/tech" />
</figure>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul class="bare-list article-actions">
<li>
<a href="#" class="btn-text"><i class="icon-angle_left_circle"></i> View full article <i class="count c-white bc-comp--light" title="Number of edits">3</i></a>
</li>
</ul>
</div>
</div>
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">invited you to edit an article</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="embedded-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-file_text"></i>
</figure><!-- end embedded item pic -->
<div class="embedded-item__meta">
<a href="#" class="embedded-item__title">Article title og:title max 95 chars</a>
Last edited <time>3 hours ago</time>
</div>
<div class="embedded-item__body">
<figure class="article__img">
<img src="http://placeimg.com/200/200/tech" />
</figure>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul class="bare-list article-actions">
<li>
<a href="#" class="btn-text"><i class="icon-angle_left_circle"></i> View full article <i class="count c-white bc-comp--light" title="Number of edits">3</i></a>
</li>
</ul>
</div>
</div>
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
</div>
Stream Comments
Group messages
Active
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This pattern contains:
atoms-tabs-with-search
molecules-stream-item
HTML
<div class="stream box bc-white">
<header class="sticky">
<figure class="comment__img">
<i class="fa fa-comments"></i>
</figure>
<h2>Group messages</h2>
<ul class="bare-list nav tabs">
<li><a class="tab tab--active" href="#">Active</a></li>
<li><a class="tab" href="#">Passive</a></li>
<li><a class="tab" href="#">Passive</a></li>
<li class="tabs__search"><a href="#"><i class="icon-search"></i></a></li>
</ul>
<a href="#" class="btn-text fixed-only tabs-as-pulldown">Active <i class="icon-search"></i></a>
</header>
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">created a new discussion</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">created a new discussion</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">created a new discussion</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">created a new discussion</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">created a new discussion</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">created a new discussion</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">created a new discussion</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">created a new discussion</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="pagination"><a href="#" class="btn btn-text">Load more</a></div>
</div>
Stream Votes
Group votes
Active
Voted article title og:title max 95 chars
Voting open for • You voted Yea
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Voted article title og:title max 95 chars
Voting open for • You voted Yea
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Voted article title og:title max 95 chars
Voting open for • You voted Yea
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This pattern contains:
atoms-tabs-with-search
molecules-stream-item
HTML
<div class="stream box bc-white">
<header class="sticky">
<figure class="comment__img">
<i class="icon-legal"></i>
</figure>
<h2>Group votes</h2>
<ul class="bare-list nav tabs">
<li><a class="tab tab--active" href="#">Active</a></li>
<li><a class="tab" href="#">Passive</a></li>
<li><a class="tab" href="#">Passive</a></li>
<li class="tabs__search"><a href="#"><i class="icon-search"></i></a></li>
</ul>
<a href="#" class="btn-text fixed-only tabs-as-pulldown">Active <i class="icon-search"></i></a>
</header>
<div class="create-new">
<button class="btn"><i class="icon-legal"></i> Create new a vote</button>
</div>
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">called a vote</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="embedded-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-legal"></i>
</figure><!-- end embedded item pic -->
<div class="embedded-item__meta">
<a href="#" class="embedded-item__title">Voted article title og:title max 95 chars</a>
Voting open for <time>3 days</time> • You voted <span class="action-taken">Yea</span>
</div>
<div class="embedded-item__body ">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul class="bare-list article-actions">
<li>
<a href="#" class="btn-text"><i class="icon-angle_left_circle"></i> View full article</a>
</li>
</ul>
</div>
</div>
<!--
<div class="article-type-specifics">
<ul class="bare-list article-actions vote-btns">
<li>
<a href="#" class="btn btn-vote"><i class="icon-ok"></i>Yea</a>
<div class="article-actions__meta">
<a href="#"><i class="icon-legal"></i> 3</a>
<a href="#"><i class="fa fa-comments"></i> 1</a>
</div>
</li>
<li>
<a href="#" class="btn-alt btn-vote">Nay</a>
<div class="article-actions__meta">
<a href="#"><i class="icon-legal"></i> 5</a>
<a href="#"><i class="fa fa-comments"></i> 3</a>
</div>
</li>
<li>
<a href="#" class="btn-alt btn-vote">Abstain</a>
<div class="article-actions__meta">
<a href="#"><i class="icon-legal"></i> 13</a>
<a href="#"><i class="fa fa-comments"></i> 8</a>
</div>
</li>
</ul>
</div>
-->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">called a vote</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="embedded-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-legal"></i>
</figure><!-- end embedded item pic -->
<div class="embedded-item__meta">
<a href="#" class="embedded-item__title">Voted article title og:title max 95 chars</a>
Voting open for <time>3 days</time> • You voted <span class="action-taken">Yea</span>
</div>
<div class="embedded-item__body ">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul class="bare-list article-actions">
<li>
<a href="#" class="btn-text"><i class="icon-angle_left_circle"></i> View full article</a>
</li>
</ul>
</div>
</div>
<!--
<div class="article-type-specifics">
<ul class="bare-list article-actions vote-btns">
<li>
<a href="#" class="btn btn-vote"><i class="icon-ok"></i>Yea</a>
<div class="article-actions__meta">
<a href="#"><i class="icon-legal"></i> 3</a>
<a href="#"><i class="fa fa-comments"></i> 1</a>
</div>
</li>
<li>
<a href="#" class="btn-alt btn-vote">Nay</a>
<div class="article-actions__meta">
<a href="#"><i class="icon-legal"></i> 5</a>
<a href="#"><i class="fa fa-comments"></i> 3</a>
</div>
</li>
<li>
<a href="#" class="btn-alt btn-vote">Abstain</a>
<div class="article-actions__meta">
<a href="#"><i class="icon-legal"></i> 13</a>
<a href="#"><i class="fa fa-comments"></i> 8</a>
</div>
</li>
</ul>
</div>
-->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">called a vote</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="embedded-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-legal"></i>
</figure><!-- end embedded item pic -->
<div class="embedded-item__meta">
<a href="#" class="embedded-item__title">Voted article title og:title max 95 chars</a>
Voting open for <time>3 days</time> • You voted <span class="action-taken">Yea</span>
</div>
<div class="embedded-item__body ">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul class="bare-list article-actions">
<li>
<a href="#" class="btn-text"><i class="icon-angle_left_circle"></i> View full article</a>
</li>
</ul>
</div>
</div>
<!--
<div class="article-type-specifics">
<ul class="bare-list article-actions vote-btns">
<li>
<a href="#" class="btn btn-vote"><i class="icon-ok"></i>Yea</a>
<div class="article-actions__meta">
<a href="#"><i class="icon-legal"></i> 3</a>
<a href="#"><i class="fa fa-comments"></i> 1</a>
</div>
</li>
<li>
<a href="#" class="btn-alt btn-vote">Nay</a>
<div class="article-actions__meta">
<a href="#"><i class="icon-legal"></i> 5</a>
<a href="#"><i class="fa fa-comments"></i> 3</a>
</div>
</li>
<li>
<a href="#" class="btn-alt btn-vote">Abstain</a>
<div class="article-actions__meta">
<a href="#"><i class="icon-legal"></i> 13</a>
<a href="#"><i class="fa fa-comments"></i> 8</a>
</div>
</li>
</ul>
</div>
-->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
</div>
Stream
Activity
Active
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Article title og:title max 95 chars
Last edited
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Voted article title og:title max 95 chars
Voting open for • You voted Yea
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This pattern contains:
atoms-tabs-with-search
molecules-stream-item
HTML
<div class="stream box bc-white">
<header class="sticky">
<figure class="comment__img">
<i class="fa fa-comments"></i>
</figure>
<h2>Activity</h2>
<ul class="bare-list nav tabs">
<li><a class="tab tab--active" href="#">Active</a></li>
<li><a class="tab" href="#">Passive</a></li>
<li><a class="tab" href="#">Passive</a></li>
<li class="tabs__search"><a href="#"><i class="icon-search"></i></a></li>
</ul>
<a href="#" class="btn-text fixed-only tabs-as-pulldown">Active <i class="icon-search"></i></a>
</header>
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">created a new discussion</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">invited you to edit an article</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="embedded-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-file_text"></i>
</figure><!-- end embedded item pic -->
<div class="embedded-item__meta">
<a href="#" class="embedded-item__title">Article title og:title max 95 chars</a>
Last edited <time>3 hours ago</time>
</div>
<div class="embedded-item__body">
<figure class="article__img">
<img src="http://placeimg.com/200/200/tech" />
</figure>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul class="bare-list article-actions">
<li>
<a href="#" class="btn-text"><i class="icon-angle_left_circle"></i> View full article <i class="count c-white bc-comp--light" title="Number of edits">3</i></a>
</li>
</ul>
</div>
</div>
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">created a new discussion</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">called a vote</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="embedded-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-legal"></i>
</figure><!-- end embedded item pic -->
<div class="embedded-item__meta">
<a href="#" class="embedded-item__title">Voted article title og:title max 95 chars</a>
Voting open for <time>3 days</time> • You voted <span class="action-taken">Yea</span>
</div>
<div class="embedded-item__body ">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul class="bare-list article-actions">
<li>
<a href="#" class="btn-text"><i class="icon-angle_left_circle"></i> View full article</a>
</li>
</ul>
</div>
</div>
<!--
<div class="article-type-specifics">
<ul class="bare-list article-actions vote-btns">
<li>
<a href="#" class="btn btn-vote"><i class="icon-ok"></i>Yea</a>
<div class="article-actions__meta">
<a href="#"><i class="icon-legal"></i> 3</a>
<a href="#"><i class="fa fa-comments"></i> 1</a>
</div>
</li>
<li>
<a href="#" class="btn-alt btn-vote">Nay</a>
<div class="article-actions__meta">
<a href="#"><i class="icon-legal"></i> 5</a>
<a href="#"><i class="fa fa-comments"></i> 3</a>
</div>
</li>
<li>
<a href="#" class="btn-alt btn-vote">Abstain</a>
<div class="article-actions__meta">
<a href="#"><i class="icon-legal"></i> 13</a>
<a href="#"><i class="fa fa-comments"></i> 8</a>
</div>
</li>
</ul>
</div>
-->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">created a new discussion</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">invited you to an event</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="embedded-item">
<figure class="comment__img event-date">
<div class="event-date__month">Dec</div>
<div class="event-date__day">16</div>
</figure><!-- end embedded item pic -->
<div class="embedded-item__meta">
<a href="#" class="embedded-item__title">Event title og:title max 95 chars</a>
<time>Dec 16, 2014</time> in <a href="#" class="place">Tha Place 2 Be</a>
</div>
<div class="embedded-item__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul class="bare-list article-actions">
<li>
<a href="#" class="btn-text"><i class="icon-angle_left_circle"></i> View event details</a>
</li>
</ul>
</div>
</div>
<!--
<div class="article-type-specifics">
<ul class="bare-list article-actions vote-btns">
<li>
<a href="#" class="btn-alt">Going</a>
<div class="article-actions__meta">
<a href="#"><i class="icon-avatar"></i> 13</a>
</div>
</li>
<li>
<a href="#" class="btn-alt">Maybe</a>
<div class="article-actions__meta">
<a href="#"><i class="icon-avatar_outline"></i> 13</a>
</div>
</li>
<li>
<a href="#" class="btn-alt">Not going</a>
<div class="article-actions__meta">
<a href="#"><s><i class="icon-avatar_outline"></i></s> 13</a>
</div>
</li>
</ul>
</div>
-->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">created a new discussion</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="stream-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-avatar_circle"></i>
</figure><!-- end comment pic -->
<div class="comment__meta">
<a href="#" class="name">Firstname Lastname</a> <span class="action">assigned you a task</span>
<time>About an hour ago</time> in <a href="#" class="group-name">Groupname</a>
</div><!-- end comment meta -->
<div class="comment__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- end comment body -->
<div class="embedded-item">
<figure class="comment__img">
<!--img class="img--round" src="http://placeimg.com/40/40/tech" alt="Person Name" /-->
<i class="icon-tasks"></i>
</figure><!-- end embedded item pic -->
<div class="embedded-item__meta">
<a href="#" class="embedded-item__title">Task title og:title max 95 chars</a>
Due <time>in five days</time>
</div>
<div class="embedded-item__body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul class="bare-list article-actions">
<li>
<a href="#" class="btn-text"><i class="icon-angle_left_circle"></i> View task details</a>
</li>
</ul>
</div>
</div>
<!--
<div class="article-type-specifics">
<ul class="bare-list article-actions vote-btns">
<li>
<a href="#" class="btn-alt">Accept</a>
</li>
<li>
<a href="#" class="btn-alt">Decline</a>
</li>
<li>
<a href="#" class="btn-alt">Delegate</a>
</li>
</ul>
</div>
-->
<div class="tags">
<a href="#" class="tag">Lorem ipsum</a>
<a href="#" class="tag">Punavuori</a>
<a href="#" class="tag">Mea transmittee sursum</a>
</div>
<div class="comment__actions actions-general">
<span><a href="#" title="More actions, such as share and flag as inappropriate">+</a></span>
<span class="comment-toggle js-comment-toggle">Comment <i class="fa fa-comments"></i></span>
<span class="like-toggle js-like-toggle">Like <i class="fa fa-thumbs-o-up"></i></span>
</div>
</div><!-- end single comment -->
<div class="pagination"><a href="#" class="btn btn-text">Load more</a></div>
</div>