#222222, RGB 34,34,34, titles, body text, icon focus
#690055, RGB 105,0,85, button and notification text
#00444A, RGB 0,68,74 titles, body text
When using color combinations the main D-CENT color must always be the dominant one. Keep the ratio at 80-20 or better, 90-10. When ratio for any reason is closer to 50/50, (eg. voting pie chart) use a lighter version of one, and a darker of the other.
The Header
Is Always Darker Than The Subheader
Magenta combinations are only for special highlights, like visited links, rather than for general purpose content / material. Unvisited links should always be in the D-CENT color: #007E84
Instead of full black, we use a #222222 / RGB 34, 34, 34 to soften the look slightly. Otherwise, feel free to use blacks and gray-scales in any combination with the other colors. For grays, the ratio can vary from 50-50 to 80-20 (gray-color). Be wary of too much black as it can easily get too heavy. For print use straight black (0,0,0,100) and keep the ratio 50-50 or ideally 20-80 black/color.
HTML
<h3>Main Colors</h3>
<h5>(logged in / not logged in)</h5>
<ul class="sg-colors title-colors">
<li>
<span class="sg-swatch" style="background: #222222;"></span>
<span class="sg-label">#222222, RGB 34,34,34</span>
</li>
<li>
<span class="sg-swatch" style="background: #007E84;"></span>
<span class="sg-label">#007E84, RGB 0,126,132</span>
</li>
</ul>
<br>
<h3>Background colors</h3>
<h5>(disabled buttons, buttons, backgrounds)</h5>
<ul class="sg-colors background-colors">
<li>
<span class="sg-swatch" style="background: #EEEEEE;"></span>
<span class="sg-label">#EEEEEE, RGB 238,238,238, disabled buttons</span>
</li>
<li>
<span class="sg-swatch" style="background: #FFEAFC;"></span>
<span class="sg-label">#FFEAFC, RGB 255,234,252, buttons and backgrounds</span>
</li>
<li>
<span class="sg-swatch" style="background: #D3FFFD;"></span>
<span class="sg-label">#D3FFFD, RGB 211,255,253 buttons and backgrounds</span>
</li>
</ul>
<br>
<h3>Light colors</h3>
<h5>(Passive icons, notification and button borders, metadata, time-stamps)</h5>
<ul class="sg-colors light-colors">
<li>
<span class="sg-swatch" style="background: #AAAAAA;"></span>
<span class="sg-label">#AAAAAA, RGB 170,170,170, Passive icons</span>
</li>
<li>
<span class="sg-swatch" style="background: #FF69E8;"></span>
<span class="sg-label">#FF69E8, RGB 255, 105, 232, notification/button borders, metadata</span>
</li>
<li>
<span class="sg-swatch" style="background: #00D3CA;"></span>
<span class="sg-label">#00D3CA, RGB 0,211,202 notification/button borders, metadata, time-stamps</span>
</li>
</ul>
<br>
<h3>Subheader colors</h3>
<h5>(Subheaders, links, visited links, icon focus)</h5>
<ul class="sg-colors subheader-colors">
<li>
<span class="sg-swatch" style="background: #666666;"></span>
<span class="sg-label">#666666, RGB 102,102,102, Subheaders</span>
</li>
<li>
<span class="sg-swatch" style="background: #9E2E8D;"></span>
<span class="sg-label">#9E2E8D, RGB 158,46,141, visited links</span>
</li>
<li>
<span class="sg-swatch" style="background: #007E84;"></span>
<span class="sg-label">#007E84, RGB 0,126,132, Subheaders, links, icon focus</span>
</li>
</ul>
<br>
<h3>Title colors</h3>
<h5>(and body colors)</h5>
<ul class="sg-colors title-colors">
<li>
<span class="sg-swatch" style="background: #222222;"></span>
<span class="sg-label">#222222, RGB 34,34,34, titles, body text, icon focus</span>
</li>
<li>
<span class="sg-swatch" style="background: #690055;"></span>
<span class="sg-label">#690055, RGB 105,0,85, button and notification text</span>
</li>
<li>
<span class="sg-swatch" style="background: #00444A;"></span>
<span class="sg-label">#00444A, RGB 0,68,74 titles, body text</span>
</li>
</ul>
<p style="color: #00444A">
When using color combinations the main D-CENT color must always be the dominant one. Keep the ratio at 80-20 or better, 90-10. When ratio for any reason is closer to 50/50, (eg. voting pie chart) use a lighter version of one, and a darker of the other.<h1 style="color:#00444A">The Header</h1> <h3 style="color: #007E84">Is Always Darker Than The Subheader</h3>
</p>
<p style="color: #00444A">
<span style="color: #FF69E8">Magenta combinations </span>are only for special highlights, like <span style="color: #9E2E8D">visited links,</span><span> rather than for general purpose content / material. </span><a href="">Unvisited links</a> should always be in the D-CENT color: #007E84
</p>
<p>
Instead of full black, we use a #222222 / RGB 34, 34, 34 to soften the look slightly. Otherwise, feel free to use blacks and gray-scales in any combination with the other colors. For grays, the ratio can vary from 50-50 to 80-20 (gray-color). Be wary of too much black as it can easily get too heavy. For print use straight black (0,0,0,100) and keep the ratio 50-50 or ideally 20-80 black/color. </span>
</p>
<style>
.sg-colors li {
width: 8em;
}
</style>
<p class="hide-small">This text is hidden on smaller screens</p>
<p class="hide-med hide-large"><em>This text is only visible on smaller screens</em></p>
<p class="hide-med">This text is hidden on medium screens only</p>
<p class="hide-small hide-large"><em>This text is only visible on medium screens</em></p>
<p class="hide-large">This text is hidden on large screens</p>
<p class="hide-small hide-med"><em>This text is only visible on large screens</em></p>
Muli is the font for all content. Body is 16px (1em), highlighted text, intro to a longer text or blockquotes are 20px (1.25em) bold. Body text when not in a feed is always in black (#22222). A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
HTML
<p>Muli is the font for all content. Body is 16px (1em), highlighted text, intro to a longer text or blockquotes are 20px (1.25em) bold. Body text when not in a feed is always in black (#22222). A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
For intros that needs highlighting, or a blockquote, make it Muli 20px, bold in subheader color. (A block quotation is a quotation in a Article, that is set off from the main text as a paragraph,should be distinguished visually using indentation and different font types to highlight it. It serves as an intro paragraph. To bring in the reader grab attention.) - Article OG Description 297 chars
HTML
<blockquote>
<p>For intros that needs highlighting, or a blockquote, make it Muli 20px, bold in subheader color. (A block quotation is a quotation in a Article, that is set off from the main text as a paragraph,should be distinguished visually using indentation and different font types to highlight it. It serves as an intro paragraph. To bring in the reader grab attention.) - Article OG Description 297 chars</p>
</blockquote>
The b element is stylistically different text from normal text, without any special importance
The i element is text that is set off from the normal text
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
This text is deleted and This text is inserted
This text has a strikethrough
Superscript®
Subscript for things like H2O
This small text is small for for fine print, etc.
Abbreviation: HTML
Keybord input: Cmd
This text is a short inline quotation
This is a citation
The dfn element indicates a definition.
The mark element indicates a highlight
This is what inline code looks like.
This is sample output from a computer program
The variable element, such as x = y
HTML
<div class="text">
<p><a href="http://www.fastcodesign.com/3021522/innovation-by-design/mit-invents-a-shapeshifting-display-you-can-reach-through-and-touch">This is a text link</a></p>
<p><strong>Strong is used to indicate strong importance</strong></p>
<p><em>This text has added emphasis</em></p>
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>
<p>The <i>i element</i> is text that is set off from the normal text</p>
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
<p><s>This text has a strikethrough</s></p>
<p>Superscript<sup>®</sup></p>
<p>Subscript for things like H<sub>2</sub>O</p>
<p><small>This small text is small for for fine print, etc.</small></p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p>Keybord input: <kbd>Cmd</kbd></p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
<p><cite>This is a citation</cite>
</p><p>The <dfn>dfn element</dfn> indicates a definition.</p>
<p>The <mark>mark element</mark> indicates a highlight</p>
<p><code>This is what inline code looks like.</code></p>
<p><samp>This is sample output from a computer program</samp></p>
<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var></p>
</div><!--end .text-->
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
HTML
<pre>
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
</pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis iaculis viverra. Quisque mollis vestibulum justo, a aliquam lacus sodales quis. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor. Nunc ligula sapien, bibendum nec laoreet eu, hendrerit et est. Vestibulum volutpat, tellus pretium iaculis malesuada, metus leo condimentum elit, vitae bibendum augue dolor vitae quam. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis iaculis viverra. Quisque mollis vestibulum justo, a aliquam lacus sodales quis. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor. Nunc ligula sapien, bibendum nec laoreet eu, hendrerit et est. Vestibulum volutpat, tellus pretium iaculis malesuada, metus leo condimentum elit, vitae bibendum augue dolor vitae quam. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor.
<div class="fadeout">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis iaculis viverra. Quisque mollis vestibulum justo, a aliquam lacus sodales quis. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor. Nunc ligula sapien, bibendum nec laoreet eu, hendrerit et est. Vestibulum volutpat, tellus pretium iaculis malesuada, metus leo condimentum elit, vitae bibendum augue dolor vitae quam. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis iaculis viverra. Quisque mollis vestibulum justo, a aliquam lacus sodales quis. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor. Nunc ligula sapien, bibendum nec laoreet eu, hendrerit et est. Vestibulum volutpat, tellus pretium iaculis malesuada, metus leo condimentum elit, vitae bibendum augue dolor vitae quam. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor.
</p>
<p class="read-more icon-small_arrow_down"> <a href="">Read more</a></p>
</div>
An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
Lists can be nested inside of each other
This is a nested list item
This is another nested list item in an unordered list
This is the last list item
HTML
<div class="text">
<ul>
<li>This is a list item in an unordered list</li>
<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
<li>
Lists can be nested inside of each other
<ul>
<li>This is a nested list item</li>
<li>This is another nested list item in an unordered list</li>
</ul>
</li>
<li>This is the last list item</li>
</ul>
</div>
An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
Lists can be nested inside of each other
This is a nested list item
This is another nested list item in an ordered list
This is the last list item
HTML
<div class="text">
<ol>
<li>This is a list item in an ordered list</li>
<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
<li>
Lists can be nested inside of each other
<ol>
<li>This is a nested list item</li>
<li>This is another nested list item in an ordered list</li>
</ol>
</li>
<li>This is the last list item</li>
</ol>
</div>
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
And it gets a definition too, which is this line.
HTML
<dl>
<dt>Definition List</dt>
<dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
<dt>This is a term.</dt>
<dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
<dt>Here is another term.</dt>
<dd>And it gets a definition too, which is this line.</dd>
<dt>Here is term that shares a definition with the term below.</dt>
<dd>And it gets a definition too, which is this line.</dd>
</dl>
<div class="comment">
<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="#">Syksy Tyrskynen</a>
<time>About an hour ago</time>
</div><!-- end comment meta -->
<div class="comment__body">
Saako tähän vielä fuusioenergian mukaan? Ennustan, että jo ensi vuonna sillä ruokitaan maailman köyhät.
</div><!-- end comment body -->
<a href="#renewable-part11" class="tag">Tuotanto: tuuli…</a>
<div class="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
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.
Comment Like
HTML
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
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.
HTML
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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><!-- end single comment -->
Another message speaking to user what's going on.
×
HTML
<div class="message message--another">
<div class="message__body">
Another message speaking to user what's going on.
<span class="message__close">×</span>
</div>
</div>
Different message speaking to user what's going on.
×
HTML
<div class="message message--different">
<div class="message__body">
Different message speaking to user what's going on.
<span class="message__close">×</span>
</div>
</div>
<div class="message message--main">
<div class="message__body">
Main message speaking to user what's going on.
<span class="message__close">×</span>
</div>
</div>
Heading Level 2 - Lorem ipsum dolor sit amet, consectetuer adi piscing elit - OG Title 95 chars
Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Dus autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel - Article OG Description 297 chars.
HTML
<div class="media">
<figure class="media__img--rev">
<img class="img--round" src="http://placeimg.com/60/60/tech" alt="Square Thumbnail" />
</figure>
<div class="media__body">
<h2>Heading Level 2 - Lorem ipsum dolor sit amet, consectetuer adi piscing elit - OG Title 95 chars</h2>
<p>Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Dus autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel - Article OG Description 297 chars.</p>
</div>
</div>
Heading Level 2 - Lorem ipsum dolor sit amet, consectetuer adi piscing elit - OG Title 95 chars
Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Dus autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel - Article OG Description 297 chars.
HTML
<div class="media">
<figure class="media__img">
<img class="img--round" src="http://placeimg.com/60/60/tech" alt="Square Thumbnail" />
</figure>
<div class="media__body">
<h2>Heading Level 2 - Lorem ipsum dolor sit amet, consectetuer adi piscing elit - OG Title 95 chars</h2>
<p>Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Dus autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel - Article OG Description 297 chars.</p>
</div>
</div>
Sähkön- ja lämmöntuotannossa täysin uusiutuvalla energialla toimivaan järjestelmään siirrytään vuoteen 2035 mennessä. Päätös ei koske ydinvoimaloita, joista periaatepäätös on jo tehty. Laaditaan energiastrategia, jossa muutokseen tarvittava polku linjataan. Käynnistetään toimenpideohjelma, jolla kivihiilestä sähkön- ja lämmöntuotannossa luovutaan 2025 mennessä. Energiaremontissa korostuvat energiatehokkuuden parantaminen, uusiutuvan energian tuotanto, kestävyys sekä älykkäiden järjestelmien käyttöönotto sekä cleantech-viennin kasvu.
Perusteet:
Energiamarkkinat Euroopassa ja maailmalla ovat rajujen muutosten edessä. Tämä haastaa vanhat toimijat, kuten Suomessakin on viime vuosina nähty ja toisaalta avaa suuria mahdollisuuksia uusien ratkaisujen tuottajille.
IEA ennakoi energiamurroksen luovan maailmanlaajuisesti 35 000 miljardin euron kumulatiivisen markkinan seuraavan 20 vuoden aikana. Tämä tarkoittaa valtavaa kysyntää erityisesti uusiutuvan energiantuotannon, energiatehokkuuden ja älykkäiden järjestelmien ratkaisuille. Komissio on arvoinut, että vihreään talouteen voitaisiin luoda Euroopassa jopa 20 miljoonaa työpaikkaa vuoteen 2020 mennessä.
Menestyäkseen yritykset tarvitsevat toimivat kotimarkkinat. Uudet työpaikat syntyvätkin sinne, missä uuden energian ratkaisuja hyödynnetään. Suomen nykyinen energiapolitiikka on johtanut siihen, että kansainvälisessä uusiutuvan energian investointiympäristöjen vertailussa sijoitumme heikosti, mistä johtuen investoinnit ja työpaikat Suomeen jäävät syntymättä.
Toimintaympäristön muutokseen voidaan vastata kirkastamalla energiapolitiikan tavoite ja käynnistämällä energiaremontti. Toteutuessaan energiaremontti parantaisi vaihtotasetta miljardeilla sekä lisäisi nopeasti taloudellista toimeliaisuutta ja työpaikkoja. Toteutuessaan energiaremontti parantaisi myös merkittävästi suomalaisten energiateknologiayritysten kilpailukykyä nopeasti kasvavilla globaaleilla markkinoilla. Myönteisten talousvaikutusten lisäksi energiaremontti nostaisi Suomen kärkijoukkoihin ilmastonmuutoksen vastaisessa taistelussa, minimoisi uusiutumattoman energian ympäristöhaitat ja riskit sekä rakentaisi vahvaa Suomi-brändiä.
Energia- ja teknologiamarkkinoilla toimiville yrityksille politiikan pitkäjänteisyys on tärkeää. Pitkäjänteisyys syntyy ainoastaan katsomalla tulevaisuuteen. Ainoa kansainvälisesti uskottava pitkän aikavälin tavoitetila modernille energiajärjestelmälle on suuntautuminen täysin uusiutuvaan energiaan. Asettamalla selvät määräajat järjestelmän eri osien irrottamiseksi uusiutumattomasta energiasta, Suomi voi antaa markkinoille riittävän vahvan signaalin investointien houkuttelmiseksi ja innovaatioiden ruokkimiseksi.
Energiaremontti käynnistyy välittömästi seuraavilla askeleilla:
Merkittäviä investointeja uusiutumattomaan energiantuotantoon ei enää tehdä. Kaikkien energiainvestointien on tähdättävä täysin uusiutuvilla toimivaan järjestelmään.
Vuoden 2020 ja 2030 tavoitteita päivitetään reippaasti ylöspäin
Energiatehokkuus: olemassa olevat kiinteistöt, teollisuus ja liikenne
<div class="full-article box bc-white">
<header class="sticky">
<div class="clearfix">
<figure class="comment__img">
<i class="icon-legal"></i>
</figure>
<ul class="bare-list article-actions">
<li>
<a href="#" class="btn-text fixed-only"><i class="icon-legal"></i> Vote <i class="icon-double_angle_down"></i></a>
</li>
</ul>
<h2 id="renewable-title">Energiaremontti 2050</h2>
<div class="full-article__meta">
<i class="icon-avatar"></i> <a href="#">5 editors</a> <i class="icon-pencil"></i> <time>About an hour ago</time> <i class="icon-group"></i> <a href="#">Suomen uusenergiset</a>
</div><!-- end full-article__meta -->
</div>
<div id="renewable-part0" class="excerpt">
Käynnistetään energiaremontti, joka tähtää siihen, että Suomi siirtyy käyttämään ainoastaan uusiutuvaa energiaa vuoteen 2050 mennessä.
</div>
<!--
<div class="tags">
<table class="invited">
<thead>
<tr>
<th>Invited</th>
</tr>
</thead>
<td><a href="#" class="tag">Elina Esimerkki</a></td>
<td><a href="#" class="tag">Syksy Tyrskynen</a></td>
<td><a href="#" class="tag">Mikko Mallikas</a></td>
<td><textarea class="newtag" placeholder="new person"></textarea></td>
</tr>
</table>
</div>
-->
<div class="tags">
Invited:
<a href="#" class="tag">Elina Esimerkki</a>
<a href="#" class="tag">Syksy Tyrskynen</a>
<a href="#" class="tag">Mikko Mallikas</a>
<textarea class="newtag" placeholder="Person"></textarea>
</div>
<div class="tags">
Tags:
<a href="#" class="tag">Uusiutuva energia</a>
<a href="#" class="tag">Ilmastonmuutos</a>
<a href="#" class="tag">Uusi talous</a>
<textarea class="newtag" placeholder="Tag"></textarea>
</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>
</header>
<div class="full-article__body">
<figure class="article__img">
<img width=400px src="../../assets/img/renewable-energy-2050.jpg"/>
</figure>
<p id="renewable-part1" class="commentable">
Sähkön- ja lämmöntuotannossa täysin uusiutuvalla energialla toimivaan järjestelmään siirrytään vuoteen 2035 mennessä. Päätös ei koske ydinvoimaloita, joista periaatepäätös on jo tehty. Laaditaan energiastrategia, jossa muutokseen tarvittava polku linjataan. Käynnistetään toimenpideohjelma, jolla kivihiilestä sähkön- ja lämmöntuotannossa luovutaan 2025 mennessä. Energiaremontissa korostuvat energiatehokkuuden parantaminen, uusiutuvan energian tuotanto, kestävyys sekä älykkäiden järjestelmien käyttöönotto sekä cleantech-viennin kasvu.
</p>
<h3 class="commentable">
Perusteet:
</h3>
<p id="renewable-part2" class="commentable">
Energiamarkkinat Euroopassa ja maailmalla ovat rajujen muutosten edessä. Tämä haastaa vanhat toimijat, kuten Suomessakin on viime vuosina nähty ja toisaalta avaa suuria mahdollisuuksia uusien ratkaisujen tuottajille.
</p>
<p id="renewable-part3" class="commentable">
IEA ennakoi energiamurroksen luovan maailmanlaajuisesti 35 000 miljardin euron kumulatiivisen markkinan seuraavan 20 vuoden aikana. Tämä tarkoittaa valtavaa kysyntää erityisesti uusiutuvan energiantuotannon, energiatehokkuuden ja älykkäiden järjestelmien ratkaisuille. Komissio on arvoinut, että vihreään talouteen voitaisiin luoda Euroopassa jopa 20 miljoonaa työpaikkaa vuoteen 2020 mennessä.
</p>
<div class="comments-in-context hidden discussion box bc-white">
<div class="comment">
<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="#">Mikko Mallikas</a>
<time>About an hour ago</time>
</div><!-- end comment meta -->
<div class="comment__body">
Luvut ovat niin nannaa, että tuossa kannattaisi suoraan linkata alkuperäiseen lähteeseen epäilijöiden vakuuttamiseksi.
</div><!-- end comment body -->
<a href="#renewable-part3" class="tag">IEA ennakoi…</a>
<div class="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
<div class="comment">
<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="#">Mikko Mallikas</a>
<time>About an hour ago</time>
</div><!-- end comment meta -->
<div class="comment__body">
Ai niin, viitatkaa myös YK:n raporttiin XYZ.
</div><!-- end comment body -->
<a href="#renewable-part3" class="tag">IEA ennakoi…</a>
<div class="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
</div>
<p id="renewable-part4" class="commentable">
Menestyäkseen yritykset tarvitsevat toimivat kotimarkkinat. Uudet työpaikat syntyvätkin sinne, missä uuden energian ratkaisuja hyödynnetään. Suomen nykyinen energiapolitiikka on johtanut siihen, että kansainvälisessä uusiutuvan energian investointiympäristöjen vertailussa sijoitumme heikosti, mistä johtuen investoinnit ja työpaikat Suomeen jäävät syntymättä.
</p>
<p id="renewable-part5" class="commentable">
Toimintaympäristön muutokseen voidaan vastata kirkastamalla energiapolitiikan tavoite ja käynnistämällä energiaremontti. Toteutuessaan energiaremontti parantaisi vaihtotasetta miljardeilla sekä lisäisi nopeasti taloudellista toimeliaisuutta ja työpaikkoja. Toteutuessaan energiaremontti parantaisi myös merkittävästi suomalaisten energiateknologiayritysten kilpailukykyä nopeasti kasvavilla globaaleilla markkinoilla. Myönteisten talousvaikutusten lisäksi energiaremontti nostaisi Suomen kärkijoukkoihin ilmastonmuutoksen vastaisessa taistelussa, minimoisi uusiutumattoman energian ympäristöhaitat ja riskit sekä rakentaisi vahvaa Suomi-brändiä.
</p>
<div class="comments-in-context hidden discussion box bc-white">
<div class="comment">
<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="#">Elina Esimerkki</a>
<time>About an hour ago</time>
</div><!-- end comment meta -->
<div class="comment__body">
Sana "parantaisi" toistuu. Joku muu saa miettiä korvaavan ilmaisun, kun täältä loppui kahvi.
</div><!-- end comment body -->
<a href="#renewable-part5" class="tag">Toimintaympäristön muutokseen…</a>
<div class="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
</div>
<p id="renewable-part6" class="commentable">
Energia- ja teknologiamarkkinoilla toimiville yrityksille politiikan pitkäjänteisyys on tärkeää. Pitkäjänteisyys syntyy ainoastaan katsomalla tulevaisuuteen. Ainoa kansainvälisesti uskottava pitkän aikavälin tavoitetila modernille energiajärjestelmälle on suuntautuminen täysin uusiutuvaan energiaan. Asettamalla selvät määräajat järjestelmän eri osien irrottamiseksi uusiutumattomasta energiasta, Suomi voi antaa markkinoille riittävän vahvan signaalin investointien houkuttelmiseksi ja innovaatioiden ruokkimiseksi.
</p>
<h3 id="renewable-part7" class="commentable">
Energiaremontti käynnistyy välittömästi seuraavilla askeleilla:
</h3>
<ol>
<li id="renewable-part8" class="commentable">
Merkittäviä investointeja uusiutumattomaan energiantuotantoon ei enää tehdä. Kaikkien energiainvestointien on tähdättävä täysin uusiutuvilla toimivaan järjestelmään.
</li>
<li id="renewable-part9" class="commentable">
Vuoden 2020 ja 2030 tavoitteita päivitetään reippaasti ylöspäin
<ul>
<li id="renewable-part10" class="commentable">
Energiatehokkuus: olemassa olevat kiinteistöt, teollisuus ja liikenne
</li>
<li id="renewable-part11" class="commentable">
Tuotanto: tuuli, aurinko, bio ja lämpöpumput
</li>
<div class="comments-in-context hidden discussion box bc-white">
<div class="comment">
<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="#">Syksy Tyrskynen</a>
<time>About an hour ago</time>
</div><!-- end comment meta -->
<div class="comment__body">
Saako tähän vielä fuusioenergian mukaan? Ennustan, että jo ensi vuonna sillä ruokitaan maailman köyhät.
</div><!-- end comment body -->
<a href="#renewable-part11" class="tag">Tuotanto: tuuli…</a>
<div class="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
</div>
<li id="renewable-part12" class="commentable">
Älykkäät järjestelmät: älykäs sähköverkko, energian varastointi ja älykäs liikenne
</li>
</ul>
</li>
<li id="renewable-part13" class="commentable">
Fossiilisen energian tuotannon ja kulutuksen tukeminen lopetetaan.
</li>
<li id="renewable-part14" class="commentable">
Lähienergian esteet poistetaan.
</li>
</ol>
</div>
</div>
<div class="comment-field article-editor">
<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 -->
<textarea placeholder="Comment">
# Energiaremontti 2050
Käynnistetään energiaremontti, joka tähtää siihen, että Suomi siirtyy käyttämään ainoastaan uusiutuvaa energiaa vuoteen 2050 mennessä.
Sähkön- ja lämmöntuotannossa täysin uusiutuvalla energialla toimivaan järjestelmään siirrytään vuoteen 2035 mennessä. Päätös ei koske ydinvoimaloita, joista periaatepäätös on jo tehty. Laaditaan energiastrategia, jossa muutokseen tarvittava polku linjataan. Käynnistetään toimenpideohjelma, jolla kivihiilestä sähkön- ja lämmöntuotannossa luovutaan 2025 mennessä. Energiaremontissa korostuvat energiatehokkuuden parantaminen, uusiutuvan energian tuotanto, kestävyys sekä älykkäiden järjestelmien käyttöönotto sekä cleantech-viennin kasvu.
## Perusteet:
Energiamarkkinat Euroopassa ja maailmalla ovat rajujen muutosten edessä. Tämä haastaa vanhat toimijat, kuten Suomessakin on viime vuosina nähty ja toisaalta avaa suuria mahdollisuuksia uusien ratkaisujen tuottajille.
IEA ennakoi energiamurroksen luovan maailmanlaajuisesti 35 000 miljardin euron kumulatiivisen markkinan seuraavan 20 vuoden aikana. Tämä tarkoittaa valtavaa kysyntää erityisesti uusiutuvan energiantuotannon, energiatehokkuuden ja älykkäiden järjestelmien ratkaisuille. Komissio on arvoinut, että vihreään talouteen voitaisiin luoda Euroopassa jopa 20 miljoonaa työpaikkaa vuoteen 2020 mennessä.
Menestyäkseen yritykset tarvitsevat toimivat kotimarkkinat. Uudet työpaikat syntyvätkin sinne, missä uuden energian ratkaisuja hyödynnetään. Suomen nykyinen energiapolitiikka on johtanut siihen, että kansainvälisessä uusiutuvan energian investointiympäristöjen vertailussa sijoitumme heikosti, mistä johtuen investoinnit ja työpaikat Suomeen jäävät syntymättä.
Toimintaympäristön muutokseen voidaan vastata kirkastamalla energiapolitiikan tavoite ja käynnistämällä energiaremontti. Toteutuessaan energiaremontti parantaisi vaihtotasetta miljardeilla sekä lisäisi nopeasti taloudellista toimeliaisuutta ja työpaikkoja. Toteutuessaan energiaremontti parantaisi myös merkittävästi suomalaisten energiateknologiayritysten kilpailukykyä nopeasti kasvavilla globaaleilla markkinoilla. Myönteisten talousvaikutusten lisäksi energiaremontti nostaisi Suomen kärkijoukkoihin ilmastonmuutoksen vastaisessa taistelussa, minimoisi uusiutumattoman energian ympäristöhaitat ja riskit sekä rakentaisi vahvaa Suomi-brändiä.
Energia- ja teknologiamarkkinoilla toimiville yrityksille politiikan pitkäjänteisyys on tärkeää. Pitkäjänteisyys syntyy ainoastaan katsomalla tulevaisuuteen. Ainoa kansainvälisesti uskottava pitkän aikavälin tavoitetila modernille energiajärjestelmälle on suuntautuminen täysin uusiutuvaan energiaan. Asettamalla selvät määräajat järjestelmän eri osien irrottamiseksi uusiutumattomasta energiasta, Suomi voi antaa markkinoille riittävän vahvan signaalin investointien houkuttelmiseksi ja innovaatioiden ruokkimiseksi.
## Energiaremontti käynnistyy välittömästi seuraavilla askeleilla:
1. Merkittäviä investointeja uusiutumattomaan energiantuotantoon ei enää tehdä. Kaikkien energiainvestointien on tähdättävä täysin uusiutuvilla toimivaan järjestelmään.
2. Vuoden 2020 ja 2030 tavoitteita päivitetään reippaasti ylöspäin
- Energiatehokkuus: olemassa olevat kiinteistöt, teollisuus ja liikenne
- Tuotanto: tuuli, aurinko, bio ja lämpöpumput
- Älykkäät järjestelmät: älykäs sähköverkko, energian varastointi ja älykäs liikenne
3. Fossiilisen energian tuotannon ja kulutuksen tukeminen lopetetaan.
4. Lähienergian esteet poistetaan.
</textarea>
</div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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.
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.
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 class="full-article box bc-white">
<header class="sticky">
<div class="clearfix">
<figure class="comment__img">
<i class="icon-legal"></i>
</figure>
<ul class="bare-list article-actions">
<li>
<a href="#" class="btn"><i class="icon-pencil"></i> Edit<i class="count c-white bc-comp--light" title="Number of edits">3</i></a>
</li>
</ul>
<h2>Argumented article title og:title max 95 chars</h2>
<div class="full-article__meta">
<i class="icon-avatar"></i> <a href="#">5 editors</a> <i class="icon-pencil"></i> <time>About an hour ago</time> <i class="icon-group"></i> <a href="#">Groupname</a>
</div><!-- end full-article__meta -->
</div>
<div class="excerpt">
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>
<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>
</header>
<div class="full-article__body">
<figure class="article__img">
<img src="http://placeimg.com/200/200/tech" />
</figure>
<p>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
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.
</p>
<p>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
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.
</p>
<p>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
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.
</p>
<p>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
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.
</p>
</div>
<div class="full-article__comments">
<header>
<h3>Discussion</h3>
<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>
</header>
<div class="create-new">
<div class="comment-field comment-field-argumentation">
<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="btn-group">
<button class="btn">Agree</button>
<button class="btn">Disagree</button>
</div>
<textarea placeholder="Comment"></textarea>
</div>
</div>
<div class="grid">
<div class="g g--half">
<h3>Agree</h3>
<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>
<div class="g g--half">
<h3>Disagree</h3>
<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>
</div>
<div class="pagination"><a href="#" class="btn btn-text">Load more</a></div>
</div>
</div>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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.
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 class="full-article box bc-white">
<header class="sticky">
<div class="clearfix">
<figure class="comment__img">
<i class="icon-legal"></i>
</figure>
<ul class="bare-list article-actions">
<li>
<a href="#" class="btn-text fixed-only"><i class="icon-legal"></i> Vote <i class="icon-double_angle_down"></i></a>
</li>
<li>
<a href="#" class="btn-text"><i class="icon-pencil"></i> Edit<i class="count c-white bc-comp--light" title="Number of edits">3</i></a>
</li>
</ul>
<h2>Voted article title og:title max 95 chars</h2>
<div class="full-article__meta">
<i class="icon-avatar"></i> <a href="#">5 editors</a> <i class="icon-pencil"></i> <time>About an hour ago</time> <i class="icon-group"></i> <a href="#">Groupname</a>
</div><!-- end full-article__meta -->
</div>
<div class="excerpt">
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>
<div class="article-type-specifics">
<div class="article-type-specifics__intro">Voting open for <time>3 days</time>.</div>
<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>
</header>
<div class="full-article__body">
<figure class="article__img">
<img src="http://placeimg.com/200/200/tech" />
</figure>
<p>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
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.
</p>
<p>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
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.
</p>
</div>
<div class="full-article__comments">
<header>
<h3>Discussion</h3>
<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>
</header>
<div class="create-new">
<div class="comment-field">
<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 -->
<textarea placeholder="Comment"></textarea>
</div>
</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">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>
</div>
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 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 -->
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.
Comment Like
HTML
<div class="argumenting box bc-white">
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
<div class="grid block--large">
<div class="g g--half">
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
</div>
<div class="g g--half">
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
</div>
</div>
<div class="grid">
<div class="g g--half block--large text--right">
<i class="icon-avatar_circle"></i>
<div class="btn-group">
<button class="btn">Agree</button>
<button class="btn">Disagree</button>
</div>
</div>
<div class="g g--half block--large">
<div class="comment-field">
<textarea placeholder="Comment"></textarea>
</div>
</div>
</div>
</div>
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.
Comment Like
HTML
<div class="discussion box bc-white">
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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="comment__actions">
<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><!-- end comment actions -->
<div class="comment__field">
</div><!-- end comment field -->
</div><!-- end single comment -->
<div class="comment-field">
<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 -->
<textarea placeholder="Comment"></textarea>
</div>
</div>
Soreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Dus autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequatvel - Article OG Description 297 chars.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sapien massa, suscipit vulputate erat eget, auctor imperdiet lectus. Morbi lectus arcu, semper scelerisque eros id
tempor pretium odio. Praesent a condimentum ligula. In id dui eu magna aliquet tristique. Suspendisse sed dolor vitae mauris hendrerit laoreet id a erat. Donec interdum imperdiet quam, semper
dapibus turpis imperdiet non. Fusce varius, arcu faucibus convallis eleifend, diam mauris luctus orci, ut posuere eros leo euismod dolor.
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.
<article class="event" role="main">
<div class="article__head">
<h1 class="article__title c-base">Event title</h1>
<figure class="article__img">
<img src="http://placeimg.com/200/200/tech" />
</figure>
<p>Soreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Dus autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequatvel - Article OG Description 297 chars.
</p>
<div class="article__tags">
<i class="fa fa-tags"></i>
<ul class="bare-list nav tags">
<li><a class="tag tag--positive" href="#">Agree</a></li>
<li><a class="tag tag--negative" href="#">Disagree</a></li>
<li><a class="tag" href="#">Lorem ipsum</a></li>
</ul>
</div><!-- end article tags -->
<div class="article__meta">
<i class="fa fa-clock-o"></i>
Tuesday 29th of March
</div><!-- end article meta -->
</div><!-- end article head -->
<div class="article__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sapien massa, suscipit vulputate erat eget, auctor imperdiet lectus. Morbi lectus arcu, semper scelerisque eros id</p>
<p>tempor pretium odio. Praesent a condimentum ligula. In id dui eu magna aliquet tristique. Suspendisse sed dolor vitae mauris hendrerit laoreet id a erat. Donec interdum imperdiet quam, semper
dapibus turpis imperdiet non. Fusce varius, arcu faucibus convallis eleifend, diam mauris luctus orci, ut posuere eros leo euismod dolor.</p>
</div><!-- end article body -->
<div class="article__discussion">
<ul class="bare-list nav tabs">
<li><a class="tab tab--active" href="#">Attendees</a></li>
<li><a class="tab" href="#">Discussion</a></li>
</ul>
<div class="block--large">
<div class="comment-field">
<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 -->
<textarea placeholder="Comment"></textarea>
</div>
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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><!-- end single comment -->
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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><!-- end single comment -->
<div class="comment">
<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="#">Firstname Lastname</a>
<time>About an hour ago</time>
</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><!-- end single comment -->
</div>
</div><!-- end article discussion -->
</article><!-- end article -->
"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
HTML
<div class="wrap bc-light">
<div class="profile">
<figure class="profile__img">
<img class="img--round" src="http://placeimg.com/60/60/tech" alt="Square Thumbnail" />
<figcaption>Tero Testaaja</figcaption>
</figure>
<div class="profile__bio">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div><!-- end wrap profile -->
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.
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.
<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>
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.
<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>
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.
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.
