Pattern Lab

Social Conversation

HTML

									
										
<section class="social-conversation">
	<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>	<ul class="social-replies">
		<li class="first-level">
			<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>		</li>
		<li class="first-level has-children">
			<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>			<ul>
				<li class="second-level">
					<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>				</li>
				<li class="second-level">
					<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>				</li>
			</ul>
		</li>
		<li class="first-level">
			<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>		</li>
	</ul>
	<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></section>

Carousel

Otsikko

Sisällön teksti

Pelkkää tekstiä

Tässä on pelkkä otsikko ja tekstiä, ei lainkaan kuvaa ja linkkiä.

Otsikko

Sisällön teksti

Pelkkää tekstiä linkin kanssa

Tässä on pelkkä otsikko ja tekstiä linkkiin paketoituna, ei lainkaan kuvaa.

HTML

									
										<section class="content-carousel">
	<div id="myCarousel" class="carousel slide has-text-items">
		<div class="carousel-inner">
			<div class="item item-1 active">
				<a href="/NC.OSY.Web/fi-FI/content/27787/23">
					<img alt="Kesä on täällä" src="https://beta.otakantaa.fi/download/noname/%7B4A0DC50E-FF77-4A06-BC1A-880B83B2CE0E%7D/11155?exactwidth=1200&exactheight=250" title="Kesä on täällä">
				</a>
				<div class="carousel-caption">
					<h4>
						<a href="/NC.OSY.Web/fi-FI/content/27787/23">Otsikko</a>
					</h4>
					<p class="carousel-caption-content">Sisällön teksti</p>
				</div>
			</div>
			<div class="item item-2 item-text">
				<a target="_BLANK">
				</a>
				<div class="carousel-caption-text">
					<h4>Pelkkää tekstiä</h4>
					<p class="carousel-caption-content">Tässä on pelkkä otsikko ja tekstiä, ei lainkaan kuvaa ja linkkiä.</p>
				</div>
			</div>
			<div class="item item-3 ">
				<a href="/NC.OSY.Web/fi-FI/content/27787/23">
					<img alt="Talvi on täällä" src="https://beta.otakantaa.fi/download/noname/%7BF93227F1-79BA-4AD7-94AE-128CB23CAABF%7D/11154?exactwidth=1200&exactheight=250" title="Talvi on täällä">
				</a>
				<div class="carousel-caption">
					<h4>
						<a href="/NC.OSY.Web/fi-FI/content/27787/23">Otsikko</a>
					</h4>
					<p class="carousel-caption-content">Sisällön teksti</p>
				</div>
			</div>
			<div class="item item-4 item-text">
				<div class="carousel-caption-text">
					<a href="">
						<h4>Pelkkää tekstiä linkin kanssa</h4>
						<p class="carousel-caption-content">Tässä on pelkkä otsikko ja tekstiä linkkiin paketoituna, ei lainkaan kuvaa.</p>
					</a>
				</div>
				</a>
			</div>
		</div>
		<!-- Carousel nav -->
		<a data-slide="prev" href="#myCarousel" class="carousel-control left"></a>
		<a data-slide="next" href="#myCarousel" class="carousel-control right"></a>
		<ol class="carousel-indicators">
			<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
			<li class="" data-slide-to="1" data-target="#myCarousel"></li>
			<li class="" data-slide-to="2" data-target="#myCarousel"></li>
			<li class="" data-slide-to="3" data-target="#myCarousel"></li>
		</ol>
	</div>
</section>

Anonymous Lifts

Vielä ehdit vaikuttaa!

- 0
- Lorem ipsum hanke
  LoremIpsumChat chatissa on vielä tilaa.
- 22
- Lorem ipsum hanke
  22 henkilöä on osallistunut chattiin Lorem lipsum chat#2
- 48
- Lorem lipsum hanke#3
  48 henkilöä on osallistui chattiin Lorem lipsum chat#3

Näytä lisää

HTML

									
										<div id="pnlFollowedProjects" class="content-item large">
	<h3 class="section-title">Vielä ehdit vaikuttaa!</h3>
	<div class="list-lift">
		<div class="content-list">
			<ul>
				<li class="single-list-item">
					<ul class="items-container">
						<!--<li class="block-item">
					<div class="lad">
						<a href="#">Lorem ipsum</a>
						<p class="description">test</p>
					</div>
					</li>-->
						<li class="block-item">
							<div class="count-container-b om-keskustelu icon-as-bg">
								<a href="//www.foo.bar">0</a>
							</div>
						</li>
						<li class="block-item">
							<div class="lad">
								<a href="#">Lorem ipsum hanke</a>
								<p class="description">
									<a href="#">LoremIpsumChat</a> chatissa on vielä tilaa.
								</p>
							</div>
						</li>
					</ul>
				</li>
				<li class="single-list-item">
					<ul class="items-container">
						<!--<li class="block-item">
					<div class="lad">
						<a href="#">Lorem ipsum</a>
						<p class="description">test</p>
					</div>
					</li>-->
						<li class="block-item">
							<div class="count-container-b om-keskustelu icon-as-bg">
								<a href="//www.foo.bar">22</a>
							</div>
						</li>
						<li class="block-item">
							<div class="lad">
								<a href="#">Lorem ipsum hanke</a>
								<p class="description">
									22 henkilöä on osallistunut chattiin <a href="#">Lorem lipsum chat#2</a>
								</p>
							</div>
						</li>
					</ul>
				</li>
				<li class="single-list-item">
					<ul class="items-container">
						<!--<li class="block-item">
					<div class="lad">
						<a href="#">Lorem ipsum</a>
						<p class="description">test</p>
					</div>
					</li>-->
						<li class="block-item">
							<div class="count-container-b om-keskustelu icon-as-bg">
								<a href="//www.foo.bar">48</a>
							</div>
						</li>
						<li class="block-item">
							<div class="lad">
								<a href="#">Lorem lipsum hanke#3</a>
								<p class="description">
									48 henkilöä on osallistui chattiin <a href="#">Lorem lipsum chat#3</a>
								</p>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<p class="read-more">
			<a href="#">Näytä lisää</a>
		</p>
	</div>
</div>

Loggedin Lifts

Seuraamani kohteet

- 0
- Lorem ipsum hanke
  LoremIpsumChat chatissa on vielä tilaa.
- 22
- Lorem ipsum hanke
  22 henkilöä osallistunut chattiin Lorem lipsum chat#2
- 48
- Lorem lipsum hanke#3
  48 henkilöä osallistui chattiin Lorem lipsum chat#3

Näytä lisää

Kiinnostavia hankkeita

- Toinen Lorem ipsum hanke
  Lorem ipsum kuvausta tähän
- Kolmas Lorem ipsum hanke
  Lorem ipsum kuvausta tähän

Näytä kaikki hankkeet

HTML

									
										<div id="pnlFollowedProjects" class="content-item large">
    <h3 class="section-title">Seuraamani kohteet
    </h3>
    <div class="list-lift">
        <div class="content-list">
            <ul>
                <li class="single-list-item">
                    <ul class="items-container">
                        <!--<li class="block-item">
                    <div class="lad">
                        <a href="#">Lorem ipsum</a>
                        <p class="description">test</p>
                    </div>
                    </li>-->
                        <li class="block-item">
                            <div class="count-container-b om-keskustelu icon-as-bg">
                                <a href="//www.foo.bar">0</a>
                            </div>
                        </li>
                        <li class="block-item">
                            <div class="lad">
                                <a href="#">Lorem ipsum hanke</a>
                                <p class="description">
                                    <a href="#">LoremIpsumChat</a> chatissa on vielä tilaa.
                                </p>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="single-list-item">
                    <ul class="items-container">
                        <!--<li class="block-item">
                    <div class="lad">
                        <a href="#">Lorem ipsum</a>
                        <p class="description">test</p>
                    </div>
                    </li>-->
                        <li class="block-item">
                            <div class="count-container-b om-keskustelu icon-as-bg">
                                <a href="//www.foo.bar">22</a>
                            </div>
                        </li>
                        <li class="block-item">
                            <div class="lad">
                                <a href="#">Lorem ipsum hanke</a>
                                <p class="description">
                                    22 henkilöä osallistunut chattiin <a href="">Lorem lipsum chat#2</a>
                                </p>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="single-list-item">
                    <ul class="items-container">
                        <!--<li class="block-item">
                    <div class="lad">
                        <a href="#">Lorem ipsum</a>
                        <p class="description">test</p>
                    </div>
                    </li>-->
                        <li class="block-item">
                            <div class="count-container-b om-keskustelu icon-as-bg">
                                <a href="//www.foo.bar">48</a>
                            </div>
                        </li>
                        <li class="block-item">
                            <div class="lad">
                                <a href="">Lorem lipsum hanke#3</a>
                                <p class="description">
                                    48 henkilöä osallistui chattiin <a href="">Lorem lipsum chat#3</a>
                                </p>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <p class="read-more">
            <a href="#">Näytä lisää</a>
        </p>
    </div>
</div>
<div id="pnlInterestingProjects" class="content-item large">
    <h3 class="section-title">Kiinnostavia hankkeita
    </h3>
    <div class="list-lift">
        <div class="content-list">
            <ul>
                <li class="single-list-item">
                    <ul class="items-container">
                        <li class="block-item">
                            <div class="lad">
                                <a href="#">Toinen Lorem ipsum hanke</a>
                                <p class="description">Lorem ipsum kuvausta tähän</p>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="single-list-item">
                    <ul class="items-container">
                        <li class="block-item">
                            <div class="lad">
                                <a href="#">Kolmas Lorem ipsum hanke</a>
                                <p class="description">Lorem ipsum kuvausta tähän</p>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <p class="read-more">
        <a href="#">Näytä kaikki hankkeet</a>
    </p>
</div>