Pattern Lab

Semantic Search

Samanlaisia esityksiä

HE 141/2012: Hallituksen esitys eduskunnalle eräiden törkeiden rikosten valmistelun kriminalisoimista koskevaksi lainsäädännöksi
HE 197/2008: Hallituksen esitys eduskunnalle tulliselvitysrikoksia koskevaksi lainsäädännöksi
LA 124/2007: Laki rikoslain 31 luvun muuttamisesta
KK 441/2007: Rikoksen valmistelun kriminalisointi
HE 55/2007: Hallituksen esitys eduskunnalle sotarikoksia ja rikoksia ihmisyyttä vastaan koskevien rikoslain säännösten muuttamiseksi sekä eräiksi niihin liittyviksi laeiksi

HTML

									
										<div class="semantic-list">
	<h4>Samanlaisia esityksiä</h4>
	<ol>
		<li>
			<a href="/document/he-141-2012/">HE 141/2012: Hallituksen esitys eduskunnalle eräiden törkeiden rikosten valmistelun kriminalisoimista koskevaksi lainsäädännöksi</a>
		</li>
		<li>
			<a href="/document/he-197-2008/">HE 197/2008: Hallituksen esitys eduskunnalle tulliselvitysrikoksia koskevaksi lainsäädännöksi</a>
		</li>
		<li>
			<a href="/document/la-124-2007/">LA 124/2007: Laki rikoslain 31 luvun muuttamisesta</a>
		</li>
		<li>
			<a href="/document/kk-441-2007/">KK 441/2007: Rikoksen valmistelun kriminalisointi</a>
		</li>
		<li>
			<a href="/document/he-55-2007/">HE 55/2007: Hallituksen esitys eduskunnalle sotarikoksia ja rikoksia ihmisyyttä vastaan koskevien rikoslain säännösten muuttamiseksi sekä eräiksi niihin liittyviksi laeiksi</a>
		</li>
	</ol>
</div>

List Lift

- Lorem lipsum linkki
  Lorem lipsum kuvaus linkille
- 17
- Lorem lipsum linkki
  Lorem lipsum kuvaus linkille
- - Esimerkkiministeriö
  - Espoo
  - Vantaa
  - Turvallisuus
  - Esimerkki
- Lorem lipsum linkki
  Lorem lipsum kuvaus linkille
- 17
- Lorem lipsum linkki
  Lorem lipsum kuvaus linkille
- - Esimerkkiministeriö
  - Espoo
  - Vantaa
  - Turvallisuus
  - Esimerkki
- Lorem lipsum linkki
  Lorem lipsum kuvaus linkille
- 17
- Lorem lipsum linkki
  Lorem lipsum kuvaus linkille
- - Esimerkkiministeriö
  - Espoo
  - Vantaa
  - Turvallisuus
  - Esimerkki

This pattern contains: atoms-tagit atoms-link-and-description atoms-count-icon atoms-tag-list

HTML

									
										<div class="list-lift">
	<div class="navigation">
		<div class="btn-group enlarged">
			<a href="#" class="active">Painike 1<span class="count">3</span></a>
			<a href="#">Painike 2<span class="count">15</span></a>
			<a href="#">Painike 3</a>
			<a href="#">Painike 4</a>
			<a href="#">Painike 5</a>
			<a href="#">Painike 6<span class="count">66</span></a>
		</div>
		<div class="tag-search-container">
			<ul id="otakantaa-tags" class="tagit-list"></ul>		</div>
	</div>
	<div class="content-list">
		<ul>
			<li class="single-list-item">
				<ul class="items-container">
					<li class="block-item">
						<div class="lad">
							<a href="">Lorem lipsum linkki</a>
							<p class="description">Lorem lipsum kuvaus linkille</p>
						</div>					</li>
					<li class="block-item">
						<div class="count-container-b om-keskustelu icon-as-bg">
							<a href="//www.foo.bar">17</a>
						</div>					</li>
					<li class="block-item">
						<div class="lad">
							<a href="">Lorem lipsum linkki</a>
							<p class="description">Lorem lipsum kuvaus linkille</p>
						</div>					</li>
					<li class="block-item">
						<ul class="tag-list">
							<li class="tag-with-icon"><i class="fa fa-university"></i>Esimerkkiministeriö</li>
							<li>Espoo</li>
							<li>Vantaa</li>
							<li>Turvallisuus</li>
							<li>Esimerkki</li>
						</ul>					</li>
				</ul>
			</li>
			<li class="single-list-item">
				<ul class="items-container">
					<li class="block-item">
						<div class="lad">
							<a href="">Lorem lipsum linkki</a>
							<p class="description">Lorem lipsum kuvaus linkille</p>
						</div>					</li>
					<li class="block-item">
						<div class="count-container-b om-keskustelu icon-as-bg">
							<a href="//www.foo.bar">17</a>
						</div>					</li>
					<li class="block-item">
						<div class="lad">
							<a href="">Lorem lipsum linkki</a>
							<p class="description">Lorem lipsum kuvaus linkille</p>
						</div>					</li>
					<li class="block-item">
						<ul class="tag-list">
							<li class="tag-with-icon"><i class="fa fa-university"></i>Esimerkkiministeriö</li>
							<li>Espoo</li>
							<li>Vantaa</li>
							<li>Turvallisuus</li>
							<li>Esimerkki</li>
						</ul>					</li>
				</ul>
			</li>
			<li class="single-list-item">
				<ul class="items-container">
					<li class="block-item">
						<div class="lad">
							<a href="">Lorem lipsum linkki</a>
							<p class="description">Lorem lipsum kuvaus linkille</p>
						</div>					</li>
					<li class="block-item">
						<div class="count-container-b om-keskustelu icon-as-bg">
							<a href="//www.foo.bar">17</a>
						</div>					</li>
					<li class="block-item">
						<div class="lad">
							<a href="">Lorem lipsum linkki</a>
							<p class="description">Lorem lipsum kuvaus linkille</p>
						</div>					</li>
					<li class="block-item">
						<ul class="tag-list">
							<li class="tag-with-icon"><i class="fa fa-university"></i>Esimerkkiministeriö</li>
							<li>Espoo</li>
							<li>Vantaa</li>
							<li>Turvallisuus</li>
							<li>Esimerkki</li>
						</ul>					</li>
				</ul>
			</li>
		</ul>
	</div>
</div>

Event Lift

Tapahtuman otsikko

Tallenna ja palaa

Esittely

Tässä aputeksti. Aputeksti auttaa suuresti käyttäjää.

Tapahtuman aikataulu

Tässä aputeksti. Aputeksti auttaa suuresti käyttäjää.

Tapahtuman alkupvm.

Tapahtuman loppupvm.

Etäosallistuminen

Tässä aputeksti. Aputeksti auttaa suuresti käyttäjää.

Etäosallistuminen

Tässä aputeksti. Aputeksti auttaa suuresti käyttäjää.

HTML

									
										<div class="event-section">
	<div class="event-header">
		<div class="inline-element event-title-container">
			<div class="form-element event-title">
				<label for="textarea">Tapahtuman otsikko</label>
				<textarea class="js-dynamic ta-small" maxlength="155"></textarea>
			</div>
			<div class="edit-event">
				<a class="edit">Tallenna ja palaa</a>
			</div>
		</div>
		<div class="form-element event-description">
			<div class="helper-container">
				<span class="icon-help" title="Example tip text." placement="top">
					Esittely
				</span>
				<p class="helper-text small is-vishidden">Tässä aputeksti. Aputeksti auttaa suuresti käyttäjää.</p>
				<textarea class="js-dynamic" maxlength="400"></textarea>
			</div>
		</div>
	</div>
	<div class="event-body">
		<div class="helper-container">
			<span class="icon-help" title="Example tip text." placement="top">
				Tapahtuman aikataulu
			</span>
			<p class="helper-text small is-vishidden">Tässä aputeksti. Aputeksti auttaa suuresti käyttäjää.</p>
		</div>
		<div class="event-date-container cf">
			<div class="form-element date-element left-block float-left">
				<label for="date-picker">Tapahtuman alkupvm.</label>
				<input type="text" id="date-picker" class="datepicker" value="24.5.2014">
			</div>
			<div class="form-element date-element right-block float-right">
				<label for="date-picker">Tapahtuman loppupvm.</label>
				<input type="text" id="date-picker" class="datepicker" value="24.5.2014">
			</div>
		</div>
		<div class="event-location-container cf">
			<div class="left-block float-left">
				<div class="form-element">
					<textarea class="ta-small" maxlength="15" placeholder="Tapahtumapaikka"></textarea>
				</div>
				<div class="form-element">
					<textarea class="ta-small" maxlength="15" placeholder="Katuosoite"></textarea>
				</div>
				<div class="form-element">
					<textarea class="ta-small" maxlength="25" placeholder="Postiosoite ja postitoimipaikka"></textarea>
				</div>
			</div>
			<div class="right-block float-right">
				<img src="../../images/sample/thumb-square-river.jpg" alt="Sample picture" />
			</div>
		</div>
		<div class="form-element">
			<div class="helper-container">
				<span class="icon-help" title="Example tip text." placement="top">
					Etäosallistuminen
				</span>
				<p class="helper-text small is-vishidden">Tässä aputeksti. Aputeksti auttaa suuresti käyttäjää.</p>
			</div>
			<!-- Editor here -->
			<textarea class="js-dynamic" maxlength="400"></textarea>
		</div>
		<div class="form-element">
			<div class="helper-container">
				<span class="icon-help" title="Example tip text." placement="top">
					Etäosallistuminen
				</span>
				<p class="helper-text small is-vishidden">Tässä aputeksti. Aputeksti auttaa suuresti käyttäjää.</p>
			</div>
			<!-- Editor here -->
			<textarea class="js-dynamic" maxlength="400"></textarea>
		</div>
	</div>
	<div class="event-actions float-right">
		<input type="submit" class="btn" value="Peruuta">
		<input type="submit" class="btn" value="Julkaise">
	</div>
</div>

Gallup

Gallup: Miltä näyttää Etherpad Otakantaassa?

18.9.2013–29.9.2013 (Gallup on auki kaikille)

Päivän Otakantaa-vinkki: Tiesitkö että voit upottaa Etherpadin osallistumishankkeeseesi?

1. Käyttökelpoinen. Joku Muu kai haluaa käyttää. 25% (6 Ääntä)

2. Turhuuksien turhuus. 8% (2 Ääntä)

3. Miten tätä käytetään? 8% (2 Ääntä)

4. Tätä olen aina odottanut! 29% (7 Ääntä)

5. Mikä on Etherpad? 29% (7 Ääntä)

HTML

									
										<div class="gallup-section">
	<div class="participation-item">
		<div class="participation-icon">
			<a id="Gallup: Miltä näyttää Etherpad Otakantaassa?(247)">
				<i class="om om-gallup"></i>
			</a>
		</div>
		<div class="participation-data">
			<div class="participation-type">
				<span> Gallup: </span> Miltä näyttää Etherpad Otakantaassa?
			</div>
			<div class="participation-information">
				<span> 18.9.2013–29.9.2013</span> (Gallup on auki kaikille) <span class="modify-links"></span>
				<div>
					<p>Päivän Otakantaa-vinkki: Tiesitkö että voit upottaa Etherpadin osallistumishankkeeseesi?</p>
				</div>
			</div>
		</div>
	</div>

	<table class="gallup-answers">
		<tbody>
			<tr>
				<td style="width: 108px;">
					<div class="progressbar-bg">
						<div class="progressbar-progress" style="width: 25%;">
							<div class="progressbar-text">
								1. Käyttökelpoinen. Joku Muu kai haluaa käyttää.
								25% (6 Ääntä)
							</div>
						</div>
					</div>
				</td>
			</tr>
			<tr>
				<td style="width: 108px;">
					<div class="progressbar-bg">
						<div class="progressbar-progress" style="width: 8%;">
							<div class="progressbar-text">
								2. Turhuuksien turhuus.
								8% (2 Ääntä)
							</div>
						</div>
					</div>
				</td>
			</tr>
			<tr>
				<td style="width: 108px;">
					<div class="progressbar-bg">

						<div class="progressbar-progress progressbar-progress_selected" style="width: 8%;">
							<div class="progressbar-text">
								3. Miten tätä käytetään?
								8% (2 Ääntä)
							</div>
						</div>

					</div>
				</td>
			</tr>
			<tr>
				<td style="width: 108px;">
					<div class="progressbar-bg">
						<div class="progressbar-progress" style="width: 29%;">
							<div class="progressbar-text">
								4. Tätä olen aina odottanut!
								29% (7 Ääntä)
							</div>
						</div>
					</div>
				</td>
			</tr>
			<tr>
				<td style="width: 108px;">
					<div class="progressbar-bg">
						<div class="progressbar-progress" style="width: 29%;">
							<div class="progressbar-text">
								5. Mikä on Etherpad?
								29% (7 Ääntä)
							</div>
						</div>
					</div>
				</td>
			</tr>
		</tbody>
	</table>


	<div class="gallup-already-answered"> </div>
</div>

List Lift2

- Lorem lipsum linkki
  Lorem lipsum kuvaus linkille
- 17
- Lorem lipsum linkki
  Lorem lipsum kuvaus linkille
- - Esimerkkiministeriö
  - Espoo
  - Vantaa
  - Turvallisuus
  - Esimerkki
- Lorem lipsum linkki
  Lorem lipsum kuvaus linkille
- 17
- Lorem lipsum linkki
  Lorem lipsum kuvaus linkille
- - Esimerkkiministeriö
  - Espoo
  - Vantaa
  - Turvallisuus
  - Esimerkki
- Lorem lipsum linkki
  Lorem lipsum kuvaus linkille
- 17
- Lorem lipsum linkki
  Lorem lipsum kuvaus linkille
- - Esimerkkiministeriö
  - Espoo
  - Vantaa
  - Turvallisuus
  - Esimerkki

This pattern contains: atoms-tagit atoms-link-and-description atoms-count-icon atoms-tag-list

HTML

									
										<div class="list-lift">
	<div class="navigation">

		<div class="btn-group-wrapper">
			<div class="btn-group enlarged">
				<a href="#" class="active">Painike 1<span class="count">3</span></a>
				<a href="#">Painike 2<span class="count">15</span></a>
				<a href="#">Painike 3</a>
				<a href="#">Painike 4</a>
				<a href="#">Painike 5</a>
				<a href="#">Painike 6<span class="count">66</span></a>
			</div>
		</div>
		<div class="tag-search-container">
			<ul id="otakantaa-tags" class="tagit-list"></ul>		</div>
	</div>
	<div class="content-list">
		<ul>
			<li class="single-list-item">
				<ul class="items-container">
					<li class="block-item">
						<div class="lad">
							<a href="">Lorem lipsum linkki</a>
							<p class="description">Lorem lipsum kuvaus linkille</p>
						</div>					</li>
					<li class="block-item">
						<div class="count-container-b om-keskustelu icon-as-bg">
							<a href="//www.foo.bar">17</a>
						</div>					</li>
					<li class="block-item">
						<div class="lad">
							<a href="">Lorem lipsum linkki</a>
							<p class="description">Lorem lipsum kuvaus linkille</p>
						</div>					</li>
					<li class="block-item">
						<ul class="tag-list">
							<li class="tag-with-icon"><i class="fa fa-university"></i>Esimerkkiministeriö</li>
							<li>Espoo</li>
							<li>Vantaa</li>
							<li>Turvallisuus</li>
							<li>Esimerkki</li>
						</ul>					</li>
				</ul>
			</li>
			<li class="single-list-item">
				<ul class="items-container">
					<li class="block-item">
						<div class="lad">
							<a href="">Lorem lipsum linkki</a>
							<p class="description">Lorem lipsum kuvaus linkille</p>
						</div>					</li>
					<li class="block-item">
						<div class="count-container-b om-keskustelu icon-as-bg">
							<a href="//www.foo.bar">17</a>
						</div>					</li>
					<li class="block-item">
						<div class="lad">
							<a href="">Lorem lipsum linkki</a>
							<p class="description">Lorem lipsum kuvaus linkille</p>
						</div>					</li>
					<li class="block-item">
						<ul class="tag-list">
							<li class="tag-with-icon"><i class="fa fa-university"></i>Esimerkkiministeriö</li>
							<li>Espoo</li>
							<li>Vantaa</li>
							<li>Turvallisuus</li>
							<li>Esimerkki</li>
						</ul>					</li>
				</ul>
			</li>
			<li class="single-list-item">
				<ul class="items-container">
					<li class="block-item">
						<div class="lad">
							<a href="">Lorem lipsum linkki</a>
							<p class="description">Lorem lipsum kuvaus linkille</p>
						</div>					</li>
					<li class="block-item">
						<div class="count-container-b om-keskustelu icon-as-bg">
							<a href="//www.foo.bar">17</a>
						</div>					</li>
					<li class="block-item">
						<div class="lad">
							<a href="">Lorem lipsum linkki</a>
							<p class="description">Lorem lipsum kuvaus linkille</p>
						</div>					</li>
					<li class="block-item">
						<ul class="tag-list">
							<li class="tag-with-icon"><i class="fa fa-university"></i>Esimerkkiministeriö</li>
							<li>Espoo</li>
							<li>Vantaa</li>
							<li>Turvallisuus</li>
							<li>Esimerkki</li>
						</ul>					</li>
				</ul>
			</li>
		</ul>
	</div>
</div>