Buttons
Painikkeet, eli buttonit
Tumma tyyli
ButtonLisäinfoa tässä kentässä
Vaalea tyyli
Otakantaa-tyylit
Lausuntopalvelu-tyylit
HTML
<h3>Painikkeet, eli buttonit</h3>
<h4>Tumma tyyli</h4>
<p><a href="#" class="btn">Button</a></p>
<!-- <p><a href="#" class="btn alt">Alt Button</a></p> -->
<p><a href="#" class="btn disabled">Disabled Button</a></p>
<p><a href="#" class="btn"><i class="icon-search"></i>Button</a></p>
<p><a href="#" class="btn sub-text">Button<span>Lisäinfoa tässä kentässä</span></a></p>
<h4>Vaalea tyyli</h4>
<p><a href="#" class="btn light">Button</a></p>
<p><a href="#" class="btn light"><i class="icon-search"></i>Button</a></p>
<h4>Otakantaa-tyylit</h4>
<p><a href="#" class="btn btn-otk">Button</a></p>
<p><a href="#" class="btn btn-otk alt">Alt Button</a></p>
<h4>Lausuntopalvelu-tyylit</h4>
<p><a href="#" class="btn btn-lap">Button</a></p>
Button Groups
Painikeryhmä inputeista
HTML
<div class="btn-group">
<a href="#" class="active">Painike 1</a>
<a href="#">Painike 2</a>
<a href="#">Painike 3</a>
<a href="#">Painike 4</a>
<a href="#">Painike 5</a>
<a href="#">Painike 6</a>
</div>
<h4>Painikeryhmä inputeista</h4>
<div class="btn-group">
<input class="active" type="submit" value="Muokkaa perustietoja">
<input type="submit" value="Kirjoita yhteenveto">
<input type="submit" value="Lisää kieliversio">
<input type="submit" value="Osallistumisraportti">
</div>
<!-- Muutokset 2.7.2014: Lisätty luokka btn-group-wrapper, jota tulee käyttää enlarged button groupin kanssa. Lisäksi enlargedin sisällä voi käyttää inline-row luokkaa, joka sitoo sen sisällä olevat sanat samalle riville. -->
<div class="btn-group-wrapper">
<div class="btn-group enlarged">
<a href="#" class="active">Painike 1<span class="count">A</span></a>
<a href="#"><span class="inline-row">Painike 2</span><span class="count">B</span></a>
<a href="#">Painike 3<span class="count">C</span></a>
<a href="#">Painike 4<span class="count">D</span></a>
<a href="#">Painike 5<span class="count">E</span></a>
<a href="#">Painike 6<span class="count">F</span></a>
</div>
</div>
<div class="btn-group sorting">
<a href="#" class="active">Lajittelu 1</a>
<a href="#">Lajittelu 2</a>
<a href="#">Lajittelu 3</a>
</div>
<form>
<h4>Checkbox-painikkeet</h4>
<div class="form-element">
<label>Kannatusilmoitusten keräystavat</label>
</div>
<div class="form-element">
<label class="label-as-button">
<input type="checkbox" checked="checked">Kansalaisaloite.fi
</label>
</div>
<div class="form-element">
<label class="label-as-button">
<input type="checkbox" disabled>Muu verkkopalvelu
</label>
</div>
<div class="form-element">
<label class="label-as-button">
<input type="checkbox">Paperilomakkeet
</label>
</div>
<h4>Radio-painikkeet</h4>
<div class="form-element">
<label>Aloitteen muoto</label>
</div>
<div class="form-element">
<label>
<input name="example" type="radio" checked="checked">Lakiehdotus
</label>
</div>
<div class="form-element">
<label>
<input name="example" type="radio">Ehdotus lainvalmisteluun ryhtymisestä
</label>
</div>
</form>
<ul class="btn-group radiogroup">
<li>
<input id="rbl0" type="radio" value="0" name="example2" />
<label for="rbl0">Peruttu</label>
</li>
<li>
<input id="rbl1" type="radio" value="1" name="example2"/>
<label for="rbl1">Suunnitteilla</label>
</li>
<li>
<input id="rbl2" type="radio" value="2" name="example2"/>
<label for="rbl2">Julkaistu</label>
</li>
</ul>
Icon Lift
Floated list
Menossa olevat osallistumiset
17
Miten nyt kerättävä rahoitus tulisi sijoittaa?
26.5. asti17
Miten nyt kerättävä rahoitus tulisi sijoittaa?
26.5. asti17
Miten nyt kerättävä rahoitus tulisi sijoittaa?
26.5. asti17
Miten nyt kerättävä rahoitus tulisi sijoittaa?
26.5. asti17
Miten nyt kerättävä rahoitus tulisi sijoittaa?
26.5. asti17
Miten nyt kerättävä rahoitus tulisi sijoittaa?
26.5. astiHTML
<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>
<a href="//www.foo.bar" class="lift-button-link">Osallistu</a>
</div>
<h4>Floated list</h4>
<div id="showParticipations" class="participations cf">
<h2 class="ongoing">
Menossa olevat osallistumiset
</h2>
<div class="lift-button-b participation float-left 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>
<span class="date">26.5. asti</span>
</div>
<div class="lift-button-b participation float-left 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>
<span class="date">26.5. asti</span>
</div>
<div class="lift-button-b participation float-left 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>
<span class="date">26.5. asti</span>
</div>
<div class="lift-button-b participation float-left 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>
<span class="date">26.5. asti</span>
</div>
<div class="lift-button-b participation float-left 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>
<span class="date">26.5. asti</span>
</div>
<div class="lift-button-b participation float-left 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>
<span class="date">26.5. asti</span>
</div>
</div>
Icon Lift Single
HTML
<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>
<a href="//www.foo.bar" class="lift-button-link">Osallistu</a>
</div>
Change Or Edit Button
HTML
<div class="edit-logo input-as-icon-container">
<label class="upload-file-button"><input type="file" id="upload-logo-image"><i class="fa fa-plus-circle"></i>Vaihda logo</label>
</div>