Pattern Lab

Media Block

Lorem ipsum ui pellentesque, rutrum ipsum eget, congue odio. Aliquam vel euismod se(95 merkkiä)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id mi pulvinar, scelerisque orci nec, accumsan magna. Fusce vitae imperdiet urna. Etiam quis orci vitae tellus ullamcorper faucibus. Maecenas a sagittis libero. In adipiscing risus a dolor ullamcorper porta. Proin bibendu(297 merkkiä)

HTML

									
										<div class="block block-thumb">
	<a href="#" class="b-inner">
		<div class="b-thumb">
			<!-- media-block-icon is a fallback for this if there's no image available. The only difference is an additional class for b-inner and b-thumb's content. -->
			<img src="../../images/fpo_square.png" alt="Square Thumbnail">
		</div>
		<div class="b-text">
			<h3 class="b-title">Lorem ipsum ui pellentesque, rutrum ipsum eget, congue odio. Aliquam vel euismod se(95 merkkiä)</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id mi pulvinar, scelerisque orci nec, accumsan magna. Fusce vitae imperdiet urna. Etiam quis orci vitae tellus ullamcorper faucibus. Maecenas a sagittis libero. In adipiscing risus a dolor ullamcorper porta. Proin bibendu(297 merkkiä)</p>
		</div>
	</a>
</div>

Media Block Icon

17

Miten nyt kerättävä rahoitus tulisi sijoittaa?

Osallistu

Lorem ipsum ui pellentesque, rutrum ipsum eget, congue odio. Aliquam vel euismod se(95 merkkiä)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id mi pulvinar, scelerisque orci nec, accumsan magna. Fusce vitae imperdiet urna. Etiam quis orci vitae tellus ullamcorper faucibus. Maecenas a sagittis libero. In adipiscing risus a dolor ullamcorper porta. Proin bibendu(297 merkkiä)

HTML

									
										<div class="block block-thumb">
	<a href="#" class="b-inner b-uses-icon">
		<div class="b-thumb">
			<div class="lift-button-b participation btn transparent om-keskustelu icon-as-bg">
				<p class="count-number" href="//www.foo.bar">17</p>
				<p class="info-text">Miten nyt kerättävä rahoitus tulisi sijoittaa?</p>
				<p class="lift-button-link">Osallistu</p>
			</div>
		</div>
		<div class="b-text">
			<h3 class="b-title">Lorem ipsum ui pellentesque, rutrum ipsum eget, congue odio. Aliquam vel euismod se(95 merkkiä)</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id mi pulvinar, scelerisque orci nec, accumsan magna. Fusce vitae imperdiet urna. Etiam quis orci vitae tellus ullamcorper faucibus. Maecenas a sagittis libero. In adipiscing risus a dolor ullamcorper porta. Proin bibendu(297 merkkiä)</p>
		</div>
	</a>
</div>

Opening Post

HTML

									
										<div class="og-share-post social-post">
	<div class="post-header">
		<div class="avatar-container">
		<img src="../../images/fpo_avatar.png" alt="Avatar" class="user-avatar"/>		</div>
		<div class="text-container">
			<p class="user">Kalle Käyttäjä</p>
			<p class="post-time">Eilen</p>
			<p class="og-comment">Katsokaa tätä mahtavaa ehdotusta. Minä tykkäään.</p>
		</div>
	</div>	<div class="share-content">
		<div class="image-container">
			<img src="../../images/fpo_square.png" alt="">
		</div>
		<div class="text-content-container">
			<h4 class="content-title">Jaetun artikkelin otsikko</h4>
			<p class="content">Jaetun artikkelin tekstisisältöä. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis metus orci. Mauris sed lacus felis. Nulla vehicula vehicula elementum. Nunc egestas, risus a auctor sodales, enim lectus sagittis neque, non bibendum lectus magna et erat. Morbi at ligula dignissim eros feugiat posuere.</p>
			<div class="social-actions">
				<a href="" class="reply">Vastaa <i class="icon-reply"></i></a>
				<a href="" class="like">Puolla <i class="icon-like"></i><span class="like-count">12</span></a>
				<a href="" class="dislike">Hylkää <i class="icon-dislike"></i><span class="dislike-count">5</span></a>
			</div>		</div>
	</div>
</div>

Reply Post

HTML

									
										<div class="reply-post social-post">
	<div class="post-header">
		<div class="avatar-container">
		<img src="../../images/fpo_avatar.png" alt="Avatar" class="user-avatar"/>		</div>
		<div class="text-container">
			<p class="user">Kalle Käyttäjä</p>
			<p class="post-time">Eilen</p>
			<p class="og-comment">Katsokaa tätä mahtavaa ehdotusta. Minä tykkäään.</p>
		</div>
	</div>	<div class="meta-content">
		<div class="social-actions">
			<a href="" class="reply">Vastaa <i class="icon-reply"></i></a>
			<a href="" class="like">Puolla <i class="icon-like"></i><span class="like-count">12</span></a>
			<a href="" class="dislike">Hylkää <i class="icon-dislike"></i><span class="dislike-count">5</span></a>
		</div>	</div>
</div>

Reply Block

HTML

									
										<div class="reply-block">
	<div class="form-element">
		<span class="om om-enter"><input type="submit" class="send-reply" value=""></span>
		<textarea type="text" class="reply-area js-dynamic" maxlength="600" placeholder="Vastaa"></textarea>
	</div>
</div>

Post Header

Kalle Käyttäjä

Eilen

Katsokaa tätä mahtavaa ehdotusta. Minä tykkäään.

HTML

									
										<div class="post-header">
	<div class="avatar-container">
		<img src="../../images/fpo_avatar.png" alt="Avatar" class="user-avatar"/>	</div>
	<div class="text-container">
		<p class="user">Kalle Käyttäjä</p>
		<p class="post-time">Eilen</p>
		<p class="og-comment">Katsokaa tätä mahtavaa ehdotusta. Minä tykkäään.</p>
	</div>
</div>

Social Actions

HTML

									
										<div class="social-actions">
	<a href="" class="reply">Vastaa <i class="icon-reply"></i></a>
	<a href="" class="like">Puolla <i class="icon-like"></i><span class="like-count">12</span></a>
	<a href="" class="dislike">Hylkää <i class="icon-dislike"></i><span class="dislike-count">5</span></a>
</div>

Thumbnail Block

Tämän päältä saa hoverin.

Nimi Tähän

Organisaatio Tittteli

Asia Sana Foo Baz Bar

HTML

									
										<div class="js-thumbnail-hover">
	<p>Tämän päältä saa hoverin.</p>

	<div class="thumbnail media js-thumbnail">
		<div class="float-left">
			<img class="media-object" src="https://fbcdn-profile-a.akamaihd.net/static-ak/rsrc.php/v2/yo/r/UlIqmHJn-SK.gif" alt="nimi" />
		</div>
		<div class="media-body">
			<h4 class="media-heading">Nimi Tähän</h4>
			<span>Organisaatio</span>
			<span>Tittteli</span>
		</div>
		<div class="keywords">
			<span>Asia</span>
			<span>Sana</span>
			<span>Foo</span>
			<span>Baz</span>
			<span>Bar</span>
		</div>
	</div>
</div>