University of Helsinki: 1: Global

Collapse Section

Section 1-1: Colors

The colors used through out the theme.

Section 1-1-1: Text colors

Main text colors for Helsingin yliopisto - Julkiset

  • $white #FFF
  • $black #222

Section 1-1-2: Other colors

The colors used through out the theme.

  • $blue #107EAB
  • $blue--active #0E688B
  • $darkblue #005379
  • $darkblue--active #003146
  • $lightsilver #F8F8F8
  • $mediumsilver #D2D2D2
  • $silver #979797
  • $lightgray #555555
  • $darkgray #424242
  • $red #e5053a
  • $redalert #A31621
  • $purple #420039
  • $orange #F9A21A
  • $darkorange #D14600
  • $green #96BA3C
  • $darkgreen #006400

University of Helsinki: 2: Icons

Collapse Section

Section 2-1: Icons



Full Screen
Collapse


<div>
    <span class="icon--add-to-todo-list"></span>
    <span class="icon--alert"></span>
    <span class="icon--archive"></span>
    <span class="icon--arrow-down"></span>
    <span class="icon--arrow-left"></span>
    <span class="icon--arrow-up"></span>
    <span class="icon--arrow-offsite"></span>
    <span class="icon--arrow-right"></span>
    <span class="icon--avatar-group"></span>
    <span class="icon--avatar"></span>
    <span class="icon--bachelor"></span>
    <span class="icon--bullet-list"></span>
    <span class="icon--camera"></span>
    <span class="icon--caret-down"></span>
    <span class="icon--caret-left"></span>
    <span class="icon--caret-right"></span>
    <span class="icon--caret-up"></span>
    <span class="icon--chat"></span>
    <span class="icon--code-fork"></span>
    <span class="icon--cogs"></span>
    <span class="icon--contentlink"></span>
    <span class="icon--copy"></span>
    <span class="icon--customlink"></span>
    <span class="icon--date"></span>
    <span class="icon--discover"></span>
    <span class="icon--done"></span>
    <span class="icon--dot"></span>
    <span class="icon--download"></span>
    <span class="icon--drag"></span>
    <span class="icon--dragbutton"></span>
    <span class="icon--drop-down"></span>
    <span class="icon--edit-event"></span>
    <span class="icon--edit"></span>
    <span class="icon--embed"></span>
    <span class="icon--events"></span>
    <span class="icon--eye-slash"></span>
    <span class="icon--facebook"></span>
    <span class="icon--favorites"></span>
    <span class="icon--feed"></span>
    <span class="icon--file-chart"></span>
    <span class="icon--file-text"></span>
    <span class="icon--full-screen"></span>
    <span class="icon--grid"></span>
    <span class="icon--oogle-plusd"></span>
    <span class="icon--hamburger"></span>
    <span class="icon--helsinginyliopisto"></span>
    <span class="icon--heart"></span>
    <span class="icon--home"></span>
    <span class="icon--horizontal-resize"></span>
    <span class="icon--hy-logo"></span>
    <span class="icon--id-number"></span>
    <span class="icon--image-gallery"></span>
    <span class="icon--images"></span>
    <span class="icon--image"></span>
    <span class="icon--info"></span>
    <span class="icon--info-stroke"></span>
    <span class="icon--instagram"></span>
    <span class="icon--item-close"></span>
    <span class="icon--item-edit"></span>
    <span class="icon--item-set"></span>
    <span class="icon--item-single"></span>
    <span class="icon--leiki-list"></span>
    <span class="icon--linkedin"></span>
    <span class="icon--list"></span>
    <span class="icon--list-as-blocks"></span>
    <span class="icon--listoflinks"></span>
    <span class="icon--location"></span>
    <span class="icon--log"></span>
    <span class="icon--login"></span>
    <span class="icon--logout"></span>
    <span class="icon--magnify-minus"></span>
    <span class="icon--magnify-plus"></span>
    <span class="icon--mail"></span>
    <span class="icon--master"></span>
    <span class="icon--minus"></span>
    <span class="icon--mobile"></span>
    <span class="icon--modify"></span>
    <span class="icon--navi-triangle"></span>
    <span class="icon--new-group"></span>
    <span class="icon--new-person"></span>
    <span class="icon--new-version"></span>
    <span class="icon--notification"></span>
    <span class="icon--opinder-logo-new"></span>
    <span class="icon--opinder-logo"></span>
    <span class="icon--pdf"></span>
    <span class="icon--people"></span>
    <span class="icon--person"></span>
    <span class="icon--person-outline"></span>
    <span class="icon--permission-all"></span>
    <span class="icon--permission-group"></span>
    <span class="icon--permission-private"></span>
    <span class="icon--phone"></span>
    <span class="icon--play"></span>
    <span class="icon--plus"></span>
    <span class="icon--preview"></span>
    <span class="icon--profile"></span>
    <span class="icon--question"></span>
    <span class="icon--remove"></span>
    <span class="icon--retweet"></span>
    <span class="icon--rotate-left"></span>
    <span class="icon--rotate-right"></span>
    <span class="icon--search"></span>
    <span class="icon--share"></span>
    <span class="icon--spinner"></span>
    <span class="icon--social-media"></span>
    <span class="icon--square"></span>
    <span class="icon--square-checked"></span>
    <span class="icon--time"></span>
    <span class="icon--todo-list"></span>
    <span class="icon--tour"></span>
    <span class="icon--trash"></span>
    <span class="icon--twitter"></span>
    <span class="icon--units-and-faculties"></span>
    <span class="icon--url"></span>
    <span class="icon--version-history"></span>
    <span class="icon--video"></span>
    <span class="icon--warning"></span>
    <span class="icon--whatsapp"></span>
    <span class="icon--wrench"></span>
    <span class="icon--youtube"></span>
    <span class="icon--headphones"></span>
    <span class="icon--play-arrow"></span>
    <span class="icon--pause"></span>
    <span class="icon--euro-currency"></span>
    <span class="icon--settings"></span>
</div><br><br>

<div>
    <span class="icon-2x icon--add-to-todo-list"></span>
    <span class="icon-2x icon--alert"></span>
    <span class="icon-2x icon--archive"></span>
    <span class="icon-2x icon--arrow-down"></span>
    <span class="icon-2x icon--arrow-left"></span>
    <span class="icon-2x icon--arrow-up"></span>
    <span class="icon-2x icon--arrow-offsite"></span>
    <span class="icon-2x icon--arrow-right"></span>
    <span class="icon-2x icon--avatar-group"></span>
    <span class="icon-2x icon--avatar"></span>
    <span class="icon-2x icon--bachelor"></span>
    <span class="icon-2x icon--bullet-list"></span>
    <span class="icon-2x icon--camera"></span>
    <span class="icon-2x icon--caret-down"></span>
    <span class="icon-2x icon--caret-left"></span>
    <span class="icon-2x icon--caret-right"></span>
    <span class="icon-2x icon--caret-up"></span>
    <span class="icon-2x icon--chat"></span>
    <span class="icon-2x icon--code-fork"></span>
    <span class="icon-2x icon--cogs"></span>
    <span class="icon-2x icon--contentlink"></span>
    <span class="icon-2x icon--copy"></span>
    <span class="icon-2x icon--customlink"></span>
    <span class="icon-2x icon--date"></span>
    <span class="icon-2x icon--discover"></span>
    <span class="icon-2x icon--done"></span>
    <span class="icon-2x icon--dot"></span>
    <span class="icon-2x icon--download"></span>
    <span class="icon-2x icon--drag"></span>
    <span class="icon-2x icon--dragbutton"></span>
    <span class="icon-2x icon--drop-down"></span>
    <span class="icon-2x icon--edit-event"></span>
    <span class="icon-2x icon--edit"></span>
    <span class="icon-2x icon--embed"></span>
    <span class="icon-2x icon--events"></span>
    <span class="icon-2x icon--eye-slash"></span>
    <span class="icon-2x icon--facebook"></span>
    <span class="icon-2x icon--favorites"></span>
    <span class="icon-2x icon--feed"></span>
    <span class="icon-2x icon--file-chart"></span>
    <span class="icon-2x icon--file-text"></span>
    <span class="icon-2x icon--full-screen"></span>
    <span class="icon-2x icon--grid"></span>
    <span class="icon-2x icon--google-plus"></span>
    <span class="icon-2x icon--hamburger"></span>
    <span class="icon-2x icon--helsinginyliopisto"></span>
    <span class="icon-2x icon--heart"></span>
    <span class="icon-2x icon--home"></span>
    <span class="icon-2x icon--horizontal-resize"></span>
    <span class="icon-2x icon--hy-logo"></span>
    <span class="icon-2x icon--id-number"></span>
    <span class="icon-2x icon--image-gallery"></span>
    <span class="icon-2x icon--images"></span>
    <span class="icon-2x icon--image"></span>
    <span class="icon-2x icon--info"></span>
    <span class="icon-2x icon--info-stroke"></span>
    <span class="icon-2x icon--instagram"></span>
    <span class="icon-2x icon--item-close"></span>
    <span class="icon-2x icon--item-edit"></span>
    <span class="icon-2x icon--item-set"></span>
    <span class="icon-2x icon--item-single"></span>
    <span class="icon-2x icon--leiki-list"></span>
    <span class="icon-2x icon--linkedin"></span>
    <span class="icon-2x icon--list"></span>
    <span class="icon-2x icon--list-as-blocks"></span>
    <span class="icon-2x icon--listoflinks"></span>
    <span class="icon-2x icon--location"></span>
    <span class="icon-2x icon--log"></span>
    <span class="icon-2x icon--login"></span>
    <span class="icon-2x icon--logout"></span>
    <span class="icon-2x icon--magnify-minus"></span>
    <span class="icon-2x icon--magnify-plus"></span>
    <span class="icon-2x icon--mail"></span>
    <span class="icon-2x icon--master"></span>
    <span class="icon-2x icon--minus"></span>
    <span class="icon-2x icon--mobile"></span>
    <span class="icon-2x icon--modify"></span>
    <span class="icon-2x icon--navi-triangle"></span>
    <span class="icon-2x icon--new-group"></span>
    <span class="icon-2x icon--new-person"></span>
    <span class="icon-2x icon--new-version"></span>
    <span class="icon-2x icon--notification"></span>
    <span class="icon-2x icon--opinder-logo-new"></span>
    <span class="icon-2x icon--opinder-logo"></span>
    <span class="icon-2x icon--pdf"></span>
    <span class="icon-2x icon--people"></span>
    <span class="icon-2x icon--person"></span>
    <span class="icon-2x icon--person-outline"></span>
    <span class="icon-2x icon--permission-all"></span>
    <span class="icon-2x icon--permission-group"></span>
    <span class="icon-2x icon--permission-private"></span>
    <span class="icon-2x icon--phone"></span>
    <span class="icon-2x icon--play"></span>
    <span class="icon-2x icon--plus"></span>
    <span class="icon-2x icon--preview"></span>
    <span class="icon-2x icon--profile"></span>
    <span class="icon-2x icon--question"></span>
    <span class="icon-2x icon--remove"></span>
    <span class="icon-2x icon--retweet"></span>
    <span class="icon-2x icon--rotate-left"></span>
    <span class="icon-2x icon--rotate-right"></span>
    <span class="icon-2x icon--search"></span>
    <span class="icon-2x icon--share"></span>
    <span class="icon-2x icon--social-media"></span>
    <span class="icon-2x icon--square"></span>
    <span class="icon-2x icon--square-checked"></span>
    <span class="icon-2x icon--spinner"></span>
    <span class="icon-2x icon--time"></span>
    <span class="icon-2x icon--todo-list"></span>
    <span class="icon-2x icon--tour"></span>
    <span class="icon-2x icon--trash"></span>
    <span class="icon-2x icon--twitter"></span>
    <span class="icon-2x icon--units-and-faculties"></span>
    <span class="icon-2x icon--url"></span>
    <span class="icon-2x icon--version-history"></span>
    <span class="icon-2x icon--video"></span>
    <span class="icon-2x icon--warning"></span>
    <span class="icon-2x icon--whatsapp"></span>
    <span class="icon-2x icon--wrench"></span>
    <span class="icon-2x icon--youtube"></span>
    <span class="icon-2x icon--play-arrow"></span>
    <span class="icon-2x icon--pause"></span>
    <span class="icon-2x icon--headphones"></span>
    <span class="icon-2x icon--euro-currency"></span>
    <span class="icon-2x icon--settings"></span>
</div>
<div>
    <span class="icon-2x icon--twitter icon-rotate-90"></span>
    <span class="icon-2x icon--twitter icon-rotate-180"></span>
    <span class="icon-2x icon--twitter icon-rotate-270"></span>
</div>
<div>
    <span class="icon-2x icon--spinner icon-spin"></span>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 3: Common elements

Collapse Section

Common HTML-elements.

Section 3-1: Headings

h1 - Heading example

h2 - Heading example

h3 - Heading example

h4 - Heading example

h5 - Heading example
h6 - Heading example
Full Screen
Collapse
<h1>h1 - Heading example</h1>
<h2>h2 - Heading example</h2>
<h3>h3 - Heading example</h3>
<h4>h4 - Heading example</h4>
<h5>h5 - Heading example</h5>
<h6>h6 - Heading example</h6>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-2: Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor laoreet neque, nec accumsan nunc ullamcorper sit amet. Sed laoreet leo non ipsum accumsan finibus. Pellentesque congue porta lacus, faucibus ultricies massa facilisis eu. Ut ac nisi sit amet sem venenatis placerat. Maecenas volutpat quam ut ante euismod vulputate.

Nullam in viverra sem, dictum aliquam sapien. Praesent iaculis luctus ornare. Sed ut odio nec orci accumsan sagittis. Duis faucibus elit tortor, sed venenatis ante aliquet in. Maecenas tempor porta venenatis. Phasellus malesuada nisi quis urna congue, ut cursus mi ullamcorper. Vestibulum nec accumsan nulla. Suspendisse nec efficitur nulla, nec venenatis ligula.

Praesent sit amet mattis metus. Fusce tincidunt mi at consequat vulputate. Nunc eget erat sed orci finibus posuere. Pellentesque feugiat tortor non massa scelerisque viverra. Nulla dictum tellus eu nunc vestibulum aliquam. Quisque laoreet nisi id hendrerit rutrum. Duis at purus ut massa egestas vulputate a eu odio.

Full Screen
Collapse
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor laoreet neque, nec accumsan nunc ullamcorper sit amet. Sed laoreet leo non ipsum accumsan finibus. Pellentesque congue porta lacus, faucibus ultricies massa facilisis eu. Ut ac nisi sit amet sem venenatis placerat. Maecenas volutpat quam ut ante euismod vulputate.
</p>
<p>
    Nullam in viverra sem, dictum aliquam sapien. Praesent iaculis luctus ornare. Sed ut odio nec orci accumsan sagittis. Duis faucibus elit tortor, sed venenatis ante aliquet in. Maecenas tempor porta venenatis. Phasellus malesuada nisi quis urna congue, ut cursus mi ullamcorper. Vestibulum nec accumsan nulla. Suspendisse nec efficitur nulla, nec venenatis ligula.
</p>
<p>
    Praesent sit amet mattis metus. Fusce tincidunt mi at consequat vulputate. Nunc eget erat sed orci finibus posuere. Pellentesque feugiat tortor non massa scelerisque viverra. Nulla dictum tellus eu nunc vestibulum aliquam. Quisque laoreet nisi id hendrerit rutrum. Duis at purus ut massa egestas vulputate a eu odio.
</p>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-3: Links

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Full Screen
Collapse
Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit.

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-4: Blockquote

Section 3-4-1: Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate tempus mollis. Vivamus arcu ante, semper sed lacus at, pretium porta lorem. Duis molestie vitae mi ut varius. Aenean ligula augue, efficitur sed mollis eget, mollis sed lacus. Donec dignissim blandit est vitae pulvinar. Mauris vestibulum luctus nibh sed ultrices. Integer sit amet turpis eget velit tempus dictum. Nullam sed metus quis est pretium tincidunt. Quisque dignissim metus eget lorem porttitor, ac vestibulum justo vulputate. Aenean semper risus quis consequat iaculis. Donec blandit quis enim sit amet fringilla.
Full Screen
Collapse
<blockquote>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate tempus mollis. Vivamus arcu ante, semper sed lacus at, pretium porta lorem. Duis molestie vitae mi ut varius. Aenean ligula augue, efficitur sed mollis eget, mollis sed lacus. Donec dignissim blandit est vitae pulvinar. Mauris vestibulum luctus nibh sed ultrices. Integer sit amet turpis eget velit tempus dictum. Nullam sed metus quis est pretium tincidunt. Quisque dignissim metus eget lorem porttitor, ac vestibulum justo vulputate. Aenean semper risus quis consequat iaculis. Donec blandit quis enim sit amet fringilla.
</blockquote>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-4-2: Blockquote paragraph

Blockquote with a p-elements inside.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate tempus mollis.Vivamus arcu ante, semper sed lacus at, pretium porta lorem. Duis molestie vitae mi ut varius. Aenean ligula augue, efficitur sed mollis eget, mollis sed lacus. Donec dignissim blandit est vitae pulvinar. Mauris vestibulum luctus nibh sed ultrices. Integer sit amet turpis eget velit tempus dictum. Nullam sed metus quis est pretium tincidunt. Quisque dignissim metus eget lorem porttitor, ac vestibulum justo vulputate. Aenean semper risus quis consequat iaculis. Donec blandit quis enim sit amet fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate tempus mollis.Vivamus arcu ante, semper sed lacus at, pretium porta lorem. Duis molestie vitae mi ut varius. Aenean ligula augue, efficitur sed mollis eget, mollis sed lacus. Donec dignissim blandit est vitae pulvinar. Mauris vestibulum luctus nibh sed ultrices. Integer sit amet turpis eget velit tempus dictum. Nullam sed metus quis est pretium tincidunt. Quisque dignissim metus eget lorem porttitor, ac vestibulum justo vulputate. Aenean semper risus quis consequat iaculis. Donec blandit quis enim sit amet fringilla.

Full Screen
Collapse
<blockquote>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate tempus mollis.Vivamus arcu ante, semper sed lacus at, pretium porta lorem. Duis molestie vitae mi ut varius. Aenean ligula augue, efficitur sed mollis eget, mollis sed lacus. Donec dignissim blandit est vitae pulvinar. Mauris vestibulum luctus nibh sed ultrices. Integer sit amet turpis eget velit tempus dictum. Nullam sed metus quis est pretium tincidunt. Quisque dignissim metus eget lorem porttitor, ac vestibulum justo vulputate. Aenean semper risus quis consequat iaculis. Donec blandit quis enim sit amet fringilla.
	</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate tempus mollis.Vivamus arcu ante, semper sed lacus at, pretium porta lorem. Duis molestie vitae mi ut varius. Aenean ligula augue, efficitur sed mollis eget, mollis sed lacus. Donec dignissim blandit est vitae pulvinar. Mauris vestibulum luctus nibh sed ultrices. Integer sit amet turpis eget velit tempus dictum. Nullam sed metus quis est pretium tincidunt. Quisque dignissim metus eget lorem porttitor, ac vestibulum justo vulputate. Aenean semper risus quis consequat iaculis. Donec blandit quis enim sit amet fringilla.
  </p>
</blockquote>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-5: Form elements

Basic form elements

Full Screen
Collapse
<p>
  <label>Select</label>
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
  </select>
</p>

<p>
  <label>Select multiple</label>
  <select multiple="multiple">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
  </select>
</p>

<p>
  <label>Select disabled</label>
  <select disabled="disabled">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
  </select>
</p>

<p>
  <label for="textareademo">
    Textarea
  </label>
  <textarea id="textareademo"></textarea>
</p>

<p>
  <label for="textdemo">
    Input text
    <span class="is-required" title="Kenttä on pakollinen.">*</span>
  </label>
  <input id="textdemo" type="text" name="Text">
</p>

<p>
  <label for="textdisableddemo">
    Input text disabled
  </label>
  <input id="textdisableddemo" type="text" name="Disabled text" disabled="disabled">
</p>

<p>
  <div>
    <input required="required" id="radiodemo" type="radio" name="name" value="value">
    <label for="radiodemo">Radio 1</label>
  </div>

  <div>
    <input required="required" id="radiodemo2" type="radio" name="name" value="value">
    <label for="radiodemo2">Radio 2</label>
  </div>

  <div>
    <input required="required" id="checkboxdemo" type="checkbox" name="name" value="value">
    <label for="checkboxdemo">Checkbox 1</label>
  </div>

  <div>
    <input required="required" id="checkboxdemo2" type="checkbox" name="name" value="value">
    <label for="checkboxdemo2">Checkbox 2</label>
  </div>

  <div>
    <input disabled="disabled" required="required" id="radiodisableddemo" type="radio" name="name" value="value">
    <label for="radiodisableddemo">Radio disabled</label>
  </div>

  <div>
    <input disabled="disabled" required="required" id="checkboxdisableddemo" type="checkbox" name="name" value="value">
    <label for="checkboxdisableddemo">Checkbox disabled</label>
  </div>

</p>

<p>
  <div>
    <input type="submit" value="Lähetä">
  </div>
</p>

<p>
  <div>
    <input disabled="disabled" type="submit" value="Disabled">
  </div>
</p>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-6: Page title

TODO: Move the following away from section 3, these are not common elements anymore

Section 3-6-1: Page title

Page title

Full Screen
Collapse
<h1 class="page-title">Page title</h1>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-6-2: Page title small

Page title small

Full Screen
Collapse
<h1 class="page-title--small">Page title small</h1>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-6-3: Page title suffix

Page title small

Haku avoimessa yliopistossa opintoja suorittaneille (Helsingin yliopisto, valtiotieteellinen tiedekunta)
3.2.2015, 09:00 – 2.3.2015, 23:59
Full Screen
Collapse
<h1 class="page-title--small">Page title small</h1>
<div class="page-title--suffix">
  <div class="page-title__firstrow">
    Haku avoimessa yliopistossa opintoja suorittaneille (Helsingin yliopisto, valtiotieteellinen tiedekunta)
  </div>
  <div class="page-title__secondrow">
    3.2.2015, 09:00 – 2.3.2015, 23:59
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-6-4: Page title listing

All degrees602 degrees found

Full Screen
Collapse
<h3 class="page-title--listing">
  All degrees<span class="page-title__subheading">602 degrees found</span>
</h3>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-7: Buttons

Section 3-7-1: Button

Button
Full Screen
Collapse
<a class="button" href="#">Button</a>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-7-1-1: Button small

A small button
Full Screen
Collapse
<a class="button--small" href="#">A small button</a>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-7-2: Button accordion

Button
Full Screen
Collapse
<a class="button--accordion" href="#">Button</a>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-7-3: Button action

Button next
Button video
Button prev
Button next (transparent)
Button video (transparent)
Button prev (transparent)
Button next (transparent-alt)
Button video (transparent-alt)
Button prev (transparent-alt)
Full Screen
Collapse
<a class="button--action icon--arrow-right" href="#">Button next</a><br/>
<a class="button--action icon--video" href="#">Button video</a><br/>
<a class="button--action icon--arrow-left" href="#">Button prev</a><br/>
<a class="button--action icon--arrow-right theme-transparent" href="#">Button next (transparent)</a><br/>
<a class="button--action icon--video theme-transparent" href="#">Button video (transparent)</a><br/>
<a class="button--action icon--arrow-left theme-transparent" href="#">Button prev (transparent)</a><br/>
<a class="button--action icon--arrow-right theme-transparent-alt" href="#">Button next (transparent-alt)</a><br/>
<a class="button--action icon--video theme-transparent-alt" href="#">Button video (transparent-alt)</a><br/>
<a class="button--action icon--arrow-left theme-transparent-alt" href="#">Button prev (transparent-alt)</a><br/>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-7-4: Button action before

Button next
Button video
Button prev
Button next (transparent)
Button video (transparent)
Button prev (transparent)
Full Screen
Collapse
<a class="button--action-before icon--arrow-right" href="#">Button next</a><br/>
<a class="button--action-before icon--video" href="#">Button video</a><br/>
<a class="button--action-before icon--arrow-left" href="#">Button prev</a><br/>
<a class="button--action-before icon--arrow-right theme-transparent" href="#">Button next (transparent)</a><br/>
<a class="button--action-before icon--video theme-transparent" href="#">Button video (transparent)</a><br/>
<a class="button--action-before icon--arrow-left theme-transparent" href="#">Button prev (transparent)</a><br/>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-7-5: Button anchor

Button up
Full Screen
Collapse
<a class="button--anchor icon--arrow-up" href="#">Button up</a><br/>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-7-6: Button icon

Full Screen
Collapse
<div class="button-group">
    <a class="button-group__button button--icon icon--facebook" href="#"></a>
    <a class="button-group__button button--icon icon--twitter" href="#"></a>
    <a class="button-group__button button--icon icon--youtube" href="#"></a>
    <a class="button-group__button button--icon icon--linkedin" href="#"></a>
    <a class="button-group__button button--icon icon--instagram" href="#"></a>
    <a class="button-group__button button--icon icon--whatsapp" href="#"></a>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-7-7: Button group

Button 1 (active) Button 2 Button 3
Full Screen
Collapse
<div class="button-group">
    <a class="button-group__button button is-active" href="#">Button 1 (active)</a>
    <a class="button-group__button button" href="#">Button 2</a>
    <a class="button-group__button button" href="#">Button 3</a>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-7-8: Button group (small buttons)

Button 1 (active) Button 2 Button 3
Full Screen
Collapse
<div class="button-group">
    <a class="button-group__button button--small is-active" href="#">Button 1 (active)</a>
    <a class="button-group__button button--small" href="#">Button 2</a>
    <a class="button-group__button button--small" href="#">Button 3</a>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 3-7-9: Button outline

Button Button next
Full Screen
Collapse
<a class="button--outline" href="#">Button</a>
<a class="button--outline icon--arrow-right" href="#">Button next</a>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 4

Collapse Section

Section 4-1: Form

Form component with child components like descriptions and fieldsets.

Lehden saaja
Lehden maksaja
Kentän kuvausteksti.
Full Screen
Collapse
<form class="form">
  <fieldset class="form__fieldset">
    <div class="form__item">
      <label>
        Tilausvaihtoehto
        <span class="is-required" title="Kenttä on pakollinen.">*</span>
      </label>
      <div class="form__item">
        <input required="required" id="form_radio" type="radio" name="name" value="value">
        <label for="form_radio">Radio 1</label>
      </div>
      <div class="form__item">
        <input required="required" id="form_radio2" type="radio" name="name" value="value">
        <label for="form_radio2">Radio 2</label>
      </div>
    </div>
  </fieldset>
  <fieldset class="form__fieldset">
    <legend class="form__legend">Lehden saaja</legend>
    <div class="form__item">
      <label for="form_name">
        Nimi
        <span class="is-required" title="Kenttä on pakollinen.">*</span>
      </label>
      <input id="form_name" type="text" name="Text">
    </div>
    <div class="form__item">
      <label for="form_address">
        Osoite
        <span class="is-required" title="Kenttä on pakollinen.">*</span>
      </label>
      <input id="form_address" type="text" name="Text">
    </div>
  </fieldset>
  <fieldset class="form__fieldset">
    <legend class="form__legend">Lehden maksaja</legend>
    <div class="form__item">
      <label for="form_name_2">
        Nimi
      </label>
      <input id="form_name_2" type="text" name="Text">
      <div class="form__description">Kentän kuvausteksti.</div>
    </div>
    <div class="form__item">
      <label for="form_address_2">
        Osoite
      </label>
      <input id="form_address_2" type="text" name="Text">
    </div>
  </fieldset>
  <fieldset class="form__fieldset">
    <div class="form__item">
      <label>
        Markkinointi
      </label>
      <div class="form__item">
        <input required="required" id="form_checkbox" type="checkbox" name="name" value="value">
        <label for="form_checkbox">Checkbox</label>
      </div>
    </div>
  </fieldset>
  <div class="form__actions">
    <input type="submit" value="Lähetä">
  </div>
</form>

Code block selected, Ctrl+C/Cmd+C to copy

Section 4-2: Search form

Section 4-2-1: Search form

Full Screen
Collapse
<form class="search-form" action="https://tuhat.halvi.helsinki.fi/portal/fi/searchall.html" method="get" accept-charset="UTF-8">
  <label class="search-form__label" for="search-form__input-demo">Hae tutkimuksia TUHAT-järjestelmästä</label>
  <input placeholder="" id="search-form__input-demo" class="search-form__input" type="text" name="searchall" value="" maxlength="128">
  <input class="search-form__submit" type="submit" value="">
</form>

Code block selected, Ctrl+C/Cmd+C to copy

Section 4-2-2: Search form dark

Full Screen
Collapse
<form class="search-form--dark" action="https://tuhat.halvi.helsinki.fi/portal/fi/searchall.html" method="get" accept-charset="UTF-8">
  <label class="search-form--dark__label" for="search-form__input-demo">Hae tutkimuksia TUHAT-järjestelmästä</label>
  <input placeholder="Hae tutkimuksia" class="search-form--dark__input" type="text" name="searchall" value="" maxlength="128">
  <input class="search-form--dark__submit" type="submit" value="">
</form>

Code block selected, Ctrl+C/Cmd+C to copy

Section 4-2-3: Search form minimal

Full Screen
Collapse
<form class="search-form search-form--minimal" action="#" method="get" accept-charset="UTF-8">
  <input placeholder="Hae" class="search-form__input" type="text" name="searchall" value="" maxlength="128">
  <input class="search-form__submit" type="submit" value="">
</form>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 5

Collapse Section

Section 5-1: Main menu

The main menu. To see the mobile menu, resize your browser to mobile width.

Full Screen
Collapse
<nav role="navigation" class="main-menu">
  <ul class="menu">
    <li class="is-lvl1 is-active main-menu__front">
      <span class="main-menu__home"></span>
      <a href="#" title="" class="active">Etusivu</a>
    </li>
    <li class="is-lvl1 is-expandable is-open">
      <span class="main-menu__expand"></span>
      <a href="#" title="Ajankohtaista">Ajankohtaista</a>
      <ul class="menu">
        <li class="is-lvl2">
          <a href="#">Uutiset ja tiedotteet</a>
        </li>
        <li class="is-lvl2">
          <a href="#">Tapahtumat</a>
        </li>
        <li class="is-lvl2 is-expandable">
          <span class="main-menu__expand"></span>
          <a href="#">Medialle</a>
          <ul class="menu" style="display: none;">
            <li class="is-lvl3">
              <a href="#">Viestinnän yhteystiedot</a>
            </li>
          </ul>
        </li>
        <li class="is-lvl2">
          <a href="#">Uutiskirjeet</a>
        </li>
        <li class="is-lvl2">
          <a href="#">Yliopisto-lehti</a>
        </li>
        <li class="is-lvl2">
          <span class="main-menu__expand"></span>
          <a href="#">Unitube – Suoria lähetyksiä ja videotallenteita</a>
        </li>
        <li class="is-lvl2 is-expandable is-open">
          <span class="main-menu__expand"></span>
          <a href="#">Tiedekulma</a>
          <ul class="menu">
            <li class="is-lvl3">
              <a href="#">Yhteystiedot ja aukioloajat</a>
            </li>
            <li class="is-lvl3">
              <a href="#">Järjestä tapahtuma Tiedekulmassa</a>
            </li>
            <li class="is-lvl3">
              <a href="#">Mikä Tiedekulma?</a>
            </li>
            <li class="is-lvl3">
              <a href="#">Tiedekulman ohjelma 2016</a>
            </li>
          </ul>
        </li>
        <li class="is-lvl2">
          <a href="#">Tiedeteema: "Ihme elämä"</a>
        </li>
        <li class="is-lvl2">
          <a href="#">Tiedeteema: "Ilmasto muuttaa kaiken"</a>
        </li>
        <li class="is-lvl2">
          <a href="#">Tiedeteema: "Näkökulmana biotalous"</a>
        </li>
        <li class="is-lvl2">
          <a href="#">Tiedeteema: "Tarpeeksi terve"</a>
        </li>
        <li class="is-lvl2">
          <a href="#">Tiedeteema: "Tulevaisuuden oppiminen"</a>
        </li>
        <li class="is-lvl2"">
          <a href="#">Tutkijoiden yö 30.9.2016</a>
        </li>
      </ul>
    </li>
    <li class="is-lvl1 is-expandable">
      <span class="main-menu__expand"></span>
      <a href="#" title="Tutkimus">Tutkimus</a>
    </li>
    <li class="is-lvl1 is-expandable">
      <span class="main-menu__expand"></span>
      <a href="#" title="Opiskelu">Opiskelu</a>
    </li>
    <li class="is-lvl1 is-expandable">
      <span class="main-menu__expand"></span>
      <a href="#" title="Yhteistyö">Yhteistyö</a>
    </li>
    <li class="is-lvl1 is-expandable">
      <span class="main-menu__expand"></span>
      <a href="#" title="Yliopisto">Yliopisto</a>
    </li>
  </ul>
</nav>

Code block selected, Ctrl+C/Cmd+C to copy

Section 5-1-1: Quick menu

The quick menu. Shows only the first level of navigation. To be used as a main navigation element.

Full Screen
Collapse
<nav role="navigation" class="quick-menu">
  <ul class="menu">
    <li><a href="#" title="Ajankohtaista">Ajankohtaista</a></li>
    <li><a href="#" title="Tutkimus">Tutkimus</a></li>
    <li class="is-active"><a href="#" title="Opiskelu" class="active active-trail">Opiskelu</a></li>
    <li><a href="#" title="Yhteistyö">Yhteistyö</a></li>
    <li><a href="#" title="Yliopisto">Yliopisto</a></li>
  </ul>
</nav>

Code block selected, Ctrl+C/Cmd+C to copy

Section 5-2: Fatmenu

The fatmenu.

Full Screen
Collapse
<nav role="navigation" class="fatmenu">
  <ul class="menu" style="height: 515px; opacity: 1;">
    <li class="is-lvl1 is-active fatmenu__front">
      <span class="fatmenu__home"></span>
      <a href="#" class="active">Etusivu</a>
    </li>
    <li class="is-lvl1 is-expandable is-open">
      <h3 class="fatmenu__title"><a href="#" title="Ajankohtaista">Ajankohtaista</a></h3>
      <ul class="menu" style="position: relative; height: 388.781px; display: block;">
        <li class="is-lvl2">
          <a href="#">Uutiset ja tiedotteet</a>
        </li>
        <li class="is-lvl2">
          <a href="#">Tapahtumat</a>
        </li>
        <li class="is-lvl2 is-expandable">
          <a href="#">Medialle</a>
          <ul class="menu">
            <li class="is-lvl3">
              <a href="#">Viestinnän yhteystiedot</a>
            </li>
          </ul>
        </li>
        <li class="is-lvl2">
          <a href="#">Uutiskirjeet</a>
        </li>
        <li class="is-lvl2">
          <a href="#">Yliopisto-lehti</a>
        </li>
        <li class="is-lvl2">
          <a href="#">Unitube – Suoria lähetyksiä ja videotallenteita</a>
        </li>
        <li class="is-lvl2 is-expandable is-open">
          <a href="#">Tiedekulma</a>
          <ul class="menu">
            <li class="is-lvl3">
              <a href="#">Yhteystiedot ja aukioloajat</a>
            </li>
            <li class="is-lvl3">
              <a href="#">Järjestä tapahtuma Tiedekulmassa</a>
            </li>
            <li class="is-lvl3">
              <a href="#">Mikä Tiedekulma?</a>
            </li>
            <li class="is-lvl3">
              <a href="#">Tiedekulman ohjelma 2016</a>
            </li>
          </ul>
        </li>
        <li class="is-lvl2">
          <a href="#">Tiedeteema: "Ihme elämä"</a>
        </li>
        <li class="is-lvl2">
          <a href="#">Tiedeteema: "Ilmasto muuttaa kaiken"</a>
        </li>
        <li class="is-lvl2">
          <a href="#">Tiedeteema: "Näkökulmana biotalous"</a>
        </li>
        <li class="is-lvl2">
          <a href="#">Tiedeteema: "Tarpeeksi terve"</a>
        </li>
        <li class="is-lvl2">
          <a href="#">Tiedeteema: "Tulevaisuuden oppiminen"</a>
        </li>
        <li class="is-lvl2">
          <a href="#">Tutkijoiden yö 30.9.2016</a>
        </li>
      </ul>
    </li>
    <li class="is-lvl1 is-expandable">
      <a href="#" title="Tutkimus">Tutkimus</a>
    </li>
    <li class="is-lvl1 is-expandable">
      <a href="#" title="Opiskelu">Opiskelu</a>
    </li>
    <li class="is-lvl1 is-expandable">
      <a href="#" title="Yhteistyö">Yhteistyö</a>
    </li>
    <li class="is-lvl1 is-expandable">
      <a href="#" title="Yliopisto">Yliopisto</a>
    </li>
    <span class="fatmenu__collapse"></span>
  </ul>
</nav>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 6

Collapse Section

Section 6-1: Table

Section 6-1-1: Table sortable

First column Second column Third column
First row First row First row
Second row Second row Second row
Third row Third row Third row
Full Screen
Collapse
<table class="table-sortable">
	<thead>
		<tr>
			<th>First column</th>
			<th>Second column</th>
			<th>Third column</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>First row</td>
			<td>First row</td>
			<td>First row</td>
		</tr>
		<tr>
			<td>Second row</td>
			<td>Second row</td>
			<td>Second row</td>
		</tr>
		<tr>
			<td>Third row</td>
			<td>Third row</td>
			<td>Third row</td>
		</tr>
	</tbody>
</table>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-1-2: Table simple

First column Second column Third column
First row First row First row
Second row Second row Second row
Third row

Paragraph row pulvinar. Elementum cras, ac augue phasellus ut. Nisi elementum cum. Sit mattis nec in! Et integer lacus duis magna lundium scelerisque pulvinar nec. Et augue habitasse massa, egestas porttitor. Massa egestas tortor aliquet, auctor.

Pid tempor ridiculus! Tempor tincidunt ut aenean mus lacus massa in urna? Quis dis! Scelerisque dis eros ac pid placerat. Odio, amet sed, tempor, in scelerisque ultrices pulvinar? Eu, mattis, aenean aenean aliquet! Odio.

Paragraph row
Full Screen
Collapse
<table class="table-simple">
	<tr>
		<th>First column</th>
		<th>Second column</th>
		<th>Third column</th>
	</tr>
	<tr>
		<td>First row</td>
		<td>First row</td>
		<td>First row</td>
	</tr>
	<tr>
		<td>Second row</td>
		<td>Second row</td>
		<td>Second row</td>
	</tr>
	<tr>
		<td>Third row</td>
		<td><p>Paragraph row pulvinar. Elementum cras, ac augue phasellus ut. Nisi elementum cum. Sit mattis nec in! Et integer lacus duis magna lundium scelerisque pulvinar nec. Et augue habitasse massa, egestas porttitor. Massa egestas tortor aliquet, auctor.</p><p>Pid tempor ridiculus! Tempor tincidunt ut aenean mus lacus massa in urna? Quis dis! Scelerisque dis eros ac pid placerat. Odio, amet sed, tempor, in scelerisque ultrices pulvinar? Eu, mattis, aenean aenean aliquet! Odio.</p></td>
		<td><p>Paragraph row</p></td>
	</tr>
</table>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-2: List of links

Section 6-2-1: List of links

Full Screen
Collapse
<ul class="list-of-links">
  <div class="list-of-links__title">Title</div>
  <div class="list-of-links__subtitle">Subtitle</div>
  <li><a class="list-of-links__link button--action icon--arrow-right" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right" href="#">Kaikki yksiköt</a></li>
</ul>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-2-2: List of links (with transparent and transparent-alt buttons)

Full Screen
Collapse
<ul class="list-of-links">
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent" href="#">Kaikki yksiköt</a></li>
</ul>
<ul class="list-of-links">
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="#">Kaikki yksiköt</a></li>
</ul>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-2-3: List of links condensed

Condensed version with footer themes applied. Also uses transparent-alt theme on the buttons.

Full Screen
Collapse
<ul style="background: #222;" class="list-of-links--condensed theme-footer">
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="#">Kaikki yksiköt</a></li>
</ul>

<ul style="background: #f2f2f2;" class="list-of-links--condensed theme-info-footer">
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="#">Kaikki yksiköt</a></li>
  <li><a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="#">Kaikki yksiköt</a></li>
</ul>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-3: Accordion

Section 6-3-1: Accordion

accordion item 1
accordion item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

Full Screen
Collapse
<div class="accordion">
  <div class="accordion__item">
    <div class="accordion__title button--accordion">accordion item 1</div>
    <div class="accordion__content" style="display: none;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
    </div>
  </div>
  <div class="accordion__item">
    <div class="accordion__title button--accordion is-active">accordion item 2</div>
    <div class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
    </div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-3-2: Accordion (with transparent buttons)

  • accordion item 1
  • accordion item 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

Full Screen
Collapse
<ul class="accordion">
  <li class="accordion__item">
    <div class="accordion__title button--accordion theme-transparent">accordion item 1</div>
    <div class="accordion__content" style="display: none;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
    </div>
  </li>
  <li class="accordion__item">
    <div class="accordion__title button--accordion theme-transparent is-active">accordion item 2</div>
    <div class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
    </div>
  </li>
</ul>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-3-3: Accordion (nested)

  • accordion item 1
  • accordion item 2

    Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Vestibulum sit amet massa est.

    • accordion item 2.1
    • accordion item 2.2

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

  • accordion item 3
Full Screen
Collapse
<ul class="accordion">
	<li class="accordion__item">
		<div class="accordion__title button--accordion">accordion item 1</div>
		<div class="accordion__content" style="display: none;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
    </div>
  </li>
  <li class="accordion__item">
    <div class="accordion__title button--accordion is-active">accordion item 2</div>
    <div class="accordion__content">
      <p>Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Vestibulum sit amet massa est.</p>
      <ul class="accordion">
      <li class="accordion__item">
          <div class="accordion__title button--accordion">accordion item 2.1</div>
          <div class="accordion__content" style="display: none;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
          </div>
        </li>
        <li class="accordion__item">
          <div class="accordion__title button--accordion is-active">accordion item 2.2</div>
          <div class="accordion__content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li class="accordion__item">
    <div class="accordion__title button--accordion">accordion item 3</div>
    <div class="accordion__content" style="display: none;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
    </div>
  </li>
</ul>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-3-4: Accordion (nested with transparent buttons)

  • accordion item 1
  • accordion item 2

    Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Vestibulum sit amet massa est.

    • accordion item 2.1
    • accordion item 2.2

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

  • accordion item 3
Full Screen
Collapse
<ul class="accordion">
<li class="accordion__item">
    <div class="accordion__title button--accordion theme-transparent">accordion item 1</div>
    <div class="accordion__content" style="display: none;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
    </div>
</li>
<li class="accordion__item">
    <div class="accordion__title button--accordion theme-transparent is-active">accordion item 2</div>
    <div class="accordion__content">
        <p>Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Vestibulum sit amet massa est.</p>
        <ul class="accordion">
        <li class="accordion__item">
                <div class="accordion__title button--accordion theme-transparent">accordion item 2.1</div>
                <div class="accordion__content" style="display: none;">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
                </div>
            </li>
            <li class="accordion__item">
                <div class="accordion__title button--accordion theme-transparent is-active">accordion item 2.2</div>
                <div class="accordion__content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
                </div>
            </li>
        </ul>
    </div>
</li>
<li class="accordion__item">
    <div class="accordion__title button--accordion theme-transparent">accordion item 3</div>
    <div class="accordion__content" style="display: none;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
    </div>
</li>
</ul>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-4: Author

Text John Doe
Full Screen
Collapse
<div class="author">
	<span class="author__label">Text</span>
	John Doe
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-5: Breadcrumbs

Ajankohtaista / Uutiset /
Full Screen
Collapse
<div class="breadcrumbs">
	<span class="breadcrumbs__item"><a href="#">Ajankohtaista</a> </span><span class="breadcrumbs__divider">/</span>
	<span class="breadcrumbs__item"><a href="#">Uutiset</a> </span><span class="breadcrumbs__divider">/</span>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-7: Horizontal tabs

Full Screen
Collapse
<div class="horizontal-tabs clearfix">
  <ul class="horizontal-tabs-list">
    <li class="horizontal-tab-button horizontal-tab-button-0 first selected" tabindex="-1"><a href="#programme"><strong>Koulutus</strong><span class="summary"></span><span id="active-horizontal-tab" class="element-invisible">(active tab)</span></a></li>
    <li class="horizontal-tab-button horizontal-tab-button-1" tabindex="-1"><a href="#applying"><strong>Hakeminen</strong><span class="summary"></span></a></li>
    <li class="horizontal-tab-button horizontal-tab-button-2 last" tabindex="-1"><a href="#organisation"><strong>Humanistinen tiedekunta</strong><span class="summary"></span></a></li>
  </ul>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-8: Pagination

Full Screen
Collapse
<ul class="pager">
  <li class="pager__prev"><a href="#" class="button--action-before icon--arrow-left">Edellinen</a></li>
  <li class="pager__page"><a title="Go to page 1" class="button" href="#">1</a></li>
  <li class="pager__page button is-active">2</li>
  <li class="pager__page"><a title="Go to page 3" class="button" href="#">3</a></li>
  <li class="pager__page"><a title="Go to page 4" class="button" href="#">4</a></li>
  <li class="pager__page"><a title="Go to page 5" class="button" href="#">5</a></li>
  <li class="pager__page"><a title="Go to page 6" class="button" href="#">6</a></li>
  <li class="pager__page"><a title="Go to page 7" class="button" href="#">7</a></li>
  <li class="pager__page"><a title="Go to page 8" class="button" href="#">8</a></li>
  <li class="pager__page"><a title="Go to page 9" class="button" href="#">9</a></li>
  <li class="pager__ellipsis">…</li>
  <li class="pager__next"><a href="#" class="button--action icon--arrow-right">Seuraava</a></li>
</ul>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-9: Tag list

25.4.2016
Ympäristö & luonnontiede
Full Screen
Collapse
<div class="tag-list">
  <div class="tag-list__item">25.4.2016</div>
  <div class="tag-list__item">
    <a href="#">Ympäristö & luonnontiede</a>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-10

Section 6-10-1: Box application

A box used to display application type content.

Aasian tutkimus, humanististen tieteiden kandidaatti
Application
Haku avoimessa yliopistossa opintoja suorittaneille (Helsingin yliopisto, humanistinen tiedekunta)
Hakuaika
13.4.2015, 00:01– 29.4.2015, 16:15
Study places
1
Read application instructions
Full Screen
Collapse
<div class="box-application">
  <div class="box-application__title"><a href="#">Aasian tutkimus, humanististen tieteiden kandidaatti</a></div>
  <div class="box-application__table is-responsive">
    <div class="box-application__tr">
      <div class="box-application__td">Application</div>
      <div class="box-application__td">Haku avoimessa yliopistossa opintoja suorittaneille (Helsingin yliopisto, humanistinen tiedekunta)</div>
    </div>
    <div class="box-application__tr">
      <div class="box-application__td">Hakuaika</div>
      <div class="box-application__td">13.4.2015, 00:01– 29.4.2015, 16:15</div>
    </div>
    <div class="box-application__tr">
      <div class="box-application__td">Study places</div>
      <div class="box-application__td">1</div>
    </div>
  </div>
  <div class="box-application__link"><a class="button--action icon--arrow-right theme-transparent" href="#">Read application instructions</a></div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-10-2: Box data

Data is story-like component, but mainly with data insertions e.g. event list.

28.6. 2016
Gianluca Paolini: Independence in Model Theory and Team Semantics
ti 28.6.2016 12:00-14:00 Exactum, Auditorio CK112, Gustaf Hällströmin katu 2 BM....
Väitös: Oma etu menee kaavoitukseen osallistumisessa helposti yhteisen hyvän edelle
Teoreettisten ja laskennallisten menetelmien maisteriohjelma, filosofian maisteri (2 v)
Full Screen
Collapse
<div class="box-data">
  <div class="box-data__left"><span class="box-data__date">28.6. 2016</span></div>
  <div class="box-data__container">
    <div class="box-data__title"><a href="#">Gianluca Paolini: Independence in Model Theory and Team Semantics</a></div>
    <span class="box-data__content">ti 28.6.2016   12:00-14:00 Exactum, Auditorio CK112, Gustaf Hällströmin katu 2 BM....</span>
  </div>
</div>

<div class="box-data theme-orange">
  <div class="box-data__left"><span class="box-data__icon"></span></div>
  <div class="box-data__container">
    <div class="box-data__title"><a href="#">Väitös: Oma etu menee kaavoitukseen osallistumisessa helposti yhteisen hyvän edelle</a></div>
  </div>
</div>

<div class="box-data theme-black">
  <div class="box-data__left"><span class="box-data__icon"></span></div>
  <div class="box-data__container">
    <div class="box-data__title"><a href="#">Teoreettisten ja laskennallisten menetelmien maisteriohjelma, filosofian maisteri (2 v)</a></div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-10-3: Box hero

Box-hero is the main story (for example, front page carousel content)

Apply for studies

Apply for exchange studies now! The application round starts 2.3.2015.
See the instructions and offering

Apply for studies

Apply for exchange studies now! The application round starts 2.3.2015.
See the instructions and offering Play an introduction video of the programme
Full Screen
Collapse
<div class="box-hero">
	<h1 class="box-hero__title">
		Apply for studies
	</h1>
	<div class="box-hero__content">
		Apply for exchange studies now! The application round starts 2.3.2015.
	</div>
  <a class="box-hero__link button--action icon--arrow-right" href="#">See the instructions and offering</a>
</div>
<br/>
<div class="box-hero theme-prominent">
  <h1 class="box-hero__title">
    Apply for studies
  </h1>
  <div class="box-hero__content">
    Apply for exchange studies now! The application round starts 2.3.2015.
  </div>
  <div class="box-hero__content-bottom">
    <a class="box-hero__link button--action icon--arrow-right" href="#">See the instructions and offering</a>
    <a href="#" class="box-hero__play" title="Play an introduction video of the programme">Play an introduction video of the programme</a>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-10-4: Box ingress

Image on the left, ingress text on the right

Wondering how your studies and degree are structured? Find out about the degree and credit system, courses, grading and the recognition of previous studies as well as regulations on duration of studies.

Full Screen
Collapse
<div class="box-ingress">
	<div class="box-ingress__image">
		<div>
			<img src="images/square_250x250.jpg" alt="" title="" />
		</div>
	</div>
	<div class="box-ingress__content">
		<p>Wondering how your studies and degree are structured? Find out about the degree and credit system, courses, grading and the recognition of previous studies as well as regulations on duration of studies.</p>
	</div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-10-5: Box story

Section 6-10-5-1: Box story

Displays content as a liftup in e.g. gridder-fields. ".theme-plain-alt" modifier is for pictureless stories. ".theme-black" is also possible.

Research funding

The University of Helsinki receives the largest amount of competitive research funding of all Finnish universities.


Research funding

The University of Helsinki receives the largest amount of competitive research funding of all Finnish universities.


Research funding

The University of Helsinki receives the largest amount of competitive research funding of all Finnish universities.
Full Screen
Collapse
<div class="box-story">
  <a href="#" class="box-story__link-wrapper">
    <div class="box-story__image">
      <img src="images/wide_322x190.jpg" alt="" title="" />
    </div>
    <h4 class="box-story__title">
      Research funding
    </h4>
    <div class="box-story__content">
      The University of Helsinki receives the largest amount of competitive research funding of all Finnish universities.
    </div>
  </a>
</div>

<br/>
<br/>

<div class="box-story theme-plain-alt">
  <a href="#" class="box-story__link-wrapper">
    <h4 class="box-story__title">
      Research funding
    </h4>
    <div class="box-story__content">
      The University of Helsinki receives the largest amount of competitive research funding of all Finnish universities.
    </div>
  </a>
</div>

<br/>
<br/>

<div class="box-story theme-black">
  <a href="#" class="box-story__link-wrapper">
    <div class="box-story__image">
      <img src="images/wide_322x190.jpg" alt="" title="" />
    </div>
    <h4 class="box-story__title">
      Research funding
    </h4>
    <div class="box-story__content">
      The University of Helsinki receives the largest amount of competitive research funding of all Finnish universities.
    </div>
  </a>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-10-5-2: Box story topical

Box story variant for topical items like news stories. ".theme-plain" modifier is for pictureless topical stories.



Full Screen
Collapse
<article about="#" class="box-story box-story--topical" role="article" typeof="sioc:Item foaf:Document">
  <div class="box-story__label">
    Tutkijan ääni
  </div>
  <div class="box-story__image">
    <a href="#">
      <img alt="Alt text" src="images/wide_322x190.jpg" title="Title text">
    </a>
  </div>
  <div class="box-story__meta">
    <span class="box-story__meta-item">23.2.2017</span> <a class="box-story__meta-item" datatype="" href="#" property="rdfs:label skos:prefLabel" typeof="skos:Concept"><span>Ympäristö & luonnontiede</span></a>
  </div>
  <a class="box-story__link-wrapper" href="#">
    <h4 class="box-story__title">Min­ne ovat me­hi­läi­set men­neet?</h4>
    <div class="box-story__content">
      Jos luonnon monimuotoisuus heikkenee entisestään, olemme vaarassa menettää viimeiset mehiläisemme. Emmekä me ehkä pärjää ilman heitä.
    </div>
  </a>
</article>

<br/>
<br/>

<article about="#" class="box-story box-story--topical theme-plain" role="article" typeof="sioc:Item foaf:Document">
  <div class="box-story__label">
    Tutkijan ääni
  </div>
  <div class="box-story__meta">
    <span class="box-story__meta-item">23.2.2017</span> <a class="box-story__meta-item" datatype="" href="#" property="rdfs:label skos:prefLabel" typeof="skos:Concept"><span>Ympäristö & luonnontiede</span></a>
  </div>
  <a href="#" class="box-story__link-wrapper">
    <h4 class="box-story__title">Min­ne ovat me­hi­läi­set men­neet?</h4>
    <div class="box-story__content">
      Jos luonnon monimuotoisuus heikkenee entisestään, olemme vaarassa menettää viimeiset mehiläisemme. Emmekä me ehkä pärjää ilman heitä.
    </div>
  </a>
</article>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-10-5-3: Box story liftup

box-story--liftup is a more prominent display of content

Become a doctor?

Want to become a Doctor? Would you like to contribute to the academic community? Apply for the doctorate programme and participate in top research at the University of Helsinki.
Doctoral schools and programmes
Full Screen
Collapse
<div class="box-story box-story--liftup">
  <a href="#" class="box-story__link-wrapper">
    <div class="box-story__image">
      <img src="images/wide_322x190.jpg" alt="" title="" />
    </div>
    <h3 class="box-story__title">
      Become a doctor?
    </h3>
    <div class="box-story__content">
      Want to become a Doctor? Would you like to contribute to the academic community? Apply for the doctorate programme and
      participate in top research at the University of Helsinki.
    </div>
    <div class="box-story__link button--action icon--arrow-right theme-transparent">
      Doctoral schools and programmes
    </div>
  </a>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-10-5-4: Box story constrained

Constrained story has content that is not full width

Full Screen
Collapse
<article about="#" role="article" class="box-story box-story--constrained">
  <div class="box-story__meta">
    <span class="box-story__meta-item">13.10.2015</span>
    <a href="#" class="box-story__meta-item"><span>Ympäristö & luonnontiede</span></a>
  </div>
  <h4 class="box-story__title">
    <a href="#">Hyötypelit hiipivät kouluihin</a>
  </h4>
</article>

<article about="#" role="article" class="box-story box-story--constrained">
  <div class="box-story__meta">
    <span class="box-story__meta-item">13.10.2015</span>
    <a href="#" class="box-story__meta-item"><span>Ympäristö & luonnontiede</span></a>
  </div>
  <h4 class="box-story__title">
    <a href="#">Hyötypelit hiipivät kouluihin</a>
  </h4>
</article>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-10-5-5: Box story related

...

Related article

Related article text

Full Screen
Collapse
<div class="box-story box-story--related">
  <div class="box-story__image">
    <img src="images/wide_322x190.jpg" alt="" title="" />
  </div>
  <div class="box-story__content-wrapper">
    <h4 class="box-story__title">
      Related article
    </h4>
    <div class="box-story__content textarea">
      <p>Related article text</p>
    </div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-10-6: Box subsection

Provides peripheral information of main content eg. contact info

Helsingin yliopiston hakijapalvelut
PL 3
00014 HELSINGIN YLIOPISTO
Käyntiosoite:
Fabianinkatu 33, 1. krs
00014 HELSINGIN YLIOPISTO
Puhelin: 02941 24140
hakijapalvelut@helsinki.fi
http://www.helsinki.fi/opiskelijaksi
Full Screen
Collapse
<div  class="box-subsection">
	<div class="box-subsection__title">Helsingin yliopiston hakijapalvelut</div>
	<div class="box-subsection__content">
    <div class="box-subsection__row">
      <div class="street-block">
        PL 3
      </div>
      <div><span>00014</span> <span>HELSINGIN YLIOPISTO</span></div>
    </div>
    <div class="box-subsection__row">
      <div>
        Käyntiosoite:
      </div>
      <div>Fabianinkatu 33, 1. krs</div>
      <div><span>00014</span> <span>HELSINGIN YLIOPISTO</span></div>
    </div>
    <div class="box-subsection__row">
      <span>Puhelin:</span>
      02941 24140
    </div>
    <div class="box-subsection__row">
      <a href="#">hakijapalvelut@helsinki.fi</a>
    </div>
    <div class="box-subsection__row">
      <a href="#" target="_blank">http://www.helsinki.fi/opiskelijaksi</a>
    </div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-10-7: Box subtitle

Provides supplementary text information below a title

Opintojen laajuus ja kesto
180+120 opintopistettä, 5 vuotta
Full Screen
Collapse
<div class="box-subtitle">
	<div class="box-subtitle__title">
		Opintojen laajuus ja kesto
	</div>
	<div class="box-subtitle__content">
		180+120 opintopistettä, 5 vuotta
	</div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-10-7-1: Box subtitle icon

Provides supplementary information (and a link) below an icon

Tänään avoinna 10-17
Aukioloajat
Aleksanterinkatu 7, Helsinki
Sijainti kartalla
Tilaa uutiskirje
Full Screen
Collapse
<div class="box-subtitle box-subtitle--icon">
  <div class="box-subtitle__icon"><span class="icon--time"></span></div>
  <div class="box-subtitle__title">
    Tänään avoinna 10-17
  </div>
  <a href="#" class="box-subtitle__link">Aukioloajat</a>
</div>
<div class="box-subtitle box-subtitle--icon">
  <div class="box-subtitle__icon"><span class="icon--location"></span></div>
  <div class="box-subtitle__title">
    Aleksanterinkatu 7, Helsinki
  </div>
  <a href="#" class="box-subtitle__link">Sijainti kartalla</a>
</div>
<div class="box-subtitle box-subtitle--icon">
  <div class="box-subtitle__icon"><span class="icon--mail"></span></div>
  <a href="#" class="box-subtitle__link">Tilaa uutiskirje</a>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-10-8: Box card

Displays contact card type information.

Matti Meikäläinen
professori
Maatalous-metsätieteellinen tiedekunta Maataloustieteiden laitos Agroteknologia Maatalouden ympäristöteknologia
matti.meikalainen@helsinki.fi
02941 12345
professori
Maatalous-metsätieteellinen tiedekunta Maataloustieteiden laitos
matti.meikalainen@helsinki.fi
02941 12345
Full Screen
Collapse
<div class="box-card">
  <a href="#" class="box-card__header">
    Matti Meikäläinen
  </a>
  <div class="required-fields box-card__content">
    <div class="box-card__item">
      <div class="box-card__section">
        <div class="box-card__field icon--units-and-faculties">
          professori
        </div>
        <div class="box-card__fieldset">
          <a href="#" class="active">Maatalous-metsätieteellinen tiedekunta</a>
          <a href="#" class="active">Maataloustieteiden laitos</a>
          <a href="#" class="active">Agroteknologia</a>
          <a href="#" class="active">Maatalouden ympäristöteknologia</a>
        </div>
      </div>
      <div class="box-card__section theme-secondary">
        <div class="box-card__field icon--mail">
          <a href="#">matti.meikalainen@helsinki.fi</a>
        </div>
        <div class="box-card__field icon--phone">
          <a href="tel:02941 12345" class="is-tel">02941 12345</a>
        </div>
      </div>
    </div>
    <div class="box-card__item">
      <div class="box-card__section">
        <div class="box-card__field icon--units-and-faculties">
          professori
        </div>
        <div class="box-card__fieldset">
          <a href="#" class="active">Maatalous-metsätieteellinen tiedekunta</a>
          <a href="#" class="active">Maataloustieteiden laitos</a>
        </div>
      </div>
      <div class="box-card__section theme-secondary">
        <div class="box-card__field icon--mail">
          <a href="mailto:#">matti.meikalainen@helsinki.fi</a>
        </div>
        <div class="box-card__field icon--phone">
          <a href="tel:02941 12345" class="is-tel">02941 12345</a>
        </div>
      </div>
    </div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-10-9: Box logo

box-logo is a part of picture and link combination lists (for example, collaboration links in groups)

Full Screen
Collapse
<div class="box-logo theme-transparent">
  <a target="_new" href="http://www.google.com"><img src="images/square_250x250.jpg" width="180" height="180" alt=""></a>
</div>
<div class="box-logo">
  <a href="http://www.helsinki.fi" target="_blank">Tekstillä vaan</a>
</div>
<div class="box-logo theme-transparent">
  <a target="_new" href="http://www.reddit.com"><img src="images/square_250x250.jpg" width="180" height="180" alt=""></a>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-10-10: Box liftup

Prominent liftup for e.g. ongoing Unitube live video.

Suora lähetys

Academic freedom and the Turkish turmoil: Symposium on academic freedom in Turkey

ti 28.6.2016 12:00-14:00
Full Screen
Collapse
<a class="box-liftup" href="">
  <div class="box-liftup__left">
    <div class="box-liftup__icon icon--video"></div>
  </div>
  <div class="box-liftup__right">
    <div class="box-liftup__precontent">Suora lähetys</div>
    <h4 class="box-liftup__title">Academic freedom and the Turkish turmoil: Symposium on academic freedom in Turkey</h4>
    <div class="box-liftup__content">ti 28.6.2016 12:00-14:00</div>
  </div>
</a>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-11

Section 6-11-1: Textarea

Basic component used in multiple row textareas with links, headings, lists and so on.

Heading Level 1

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Heading Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  4. Aliquam tincidunt mauris eu risus.
  5. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  6. Aliquam tincidunt mauris eu risus.
  7. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  8. Aliquam tincidunt mauris eu risus.
  9. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  10. Aliquam tincidunt mauris eu risus.
  11. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  12. Aliquam tincidunt mauris eu risus.
  13. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  14. Aliquam tincidunt mauris eu risus.
  15. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  16. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Read more Lorem ipsum dolor sit amet, consectetur adipiscing elit

Heading Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.

Heading Level 4

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
Heading Level 5
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
Heading Level 6
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
Full Screen
Collapse
<div class="textarea">
  <h1>Heading Level 1</h1>

  <p><span class="dropcap">P</span><strong>ellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Heading Level 2</h2>

  <ol>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>

  </ol>

  <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

  <a class="textarea-readmore" href="#">
    <span class="textarea-readmore__title">Read more</span>
    <span class="textarea-readmore__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  </a>

  <h3>Heading Level 3</h3>

  <ul>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <h4>Heading Level 4</h4>

  <ul>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <h5>Heading Level 5</h5>

  <ul>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <h6>Heading Level 6</h6>

  <ul>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-11-2: Textarea infobox

Infobox type textarea.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Full Screen
Collapse
<div class="textarea-infobox">
  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-11-3: Textarea ingress

Ingress textarea. Can be used with links, headings, lists or without. Class 'theme-bold' is available.

Textarea-ingress ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Textarea-ingress paragraph ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

  • Li ipsum dolor sit amet, consectetur adipiscing elit.
  • Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida.
  • Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Heading level 3

  1. Li ipsum dolor sit amet, consectetur adipiscing elit.
  2. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida.
  3. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Textarea-ingress with theme-bold ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Textarea-ingress paragraph ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

  • Li ipsum dolor sit amet, consectetur adipiscing elit.
  • Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida.
  • Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
Full Screen
Collapse
<div class="textarea-ingress">
  Textarea-ingress ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
</div>

<hr>
<br>

<div class="textarea-ingress">
  <p><a href="">Textarea-ingress paragraph</a> ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
  <ul>
    <li>Li ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida.</li>
    <li>Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</li>
  </ul>
  <h3>Heading level 3</h3>
  <ol>
    <li>Li ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida.</li>
    <li>Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</li>
  </ol>
</div>

<hr>
<br>

<div class="textarea-ingress theme-bold">
  Textarea-ingress with theme-bold ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
</div>

<hr>
<br>

<div class="textarea-ingress theme-bold">
  <p><a href="">Textarea-ingress paragraph</a> ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
  <ul>
    <li>Li ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida.</li>
    <li>Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</li>
  </ul>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-12: Messages

Section 6-12-1: Status message

Used for displaying status messages to the user.

Please read this page in teaching language

Full Screen
Collapse
<div class="messages status">
	<p>
		Please read this page in <a href="#">teaching language</a>
	</p>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-12-2: Info message

Used for displaying informational messages to the user.

Please read this page in teaching language

Full Screen
Collapse
<div class="messages info">
	<p>
		Please read this page in <a href="#">teaching language</a>
	</p>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 6-12-3: Error message

Used for displaying error messages to the user.

Please read this page in teaching language

Full Screen
Collapse
<div class="messages error">
	<p>
		Please read this page in <a href="/fi/courses/52739/102328353">teaching language</a>
	</p>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 7

Collapse Section

Section 7-1: Carousel

Section 7-1-1: Carousel

  • test
    Kuvateksti
    Photo: Matti Meikäläinen
Full Screen
Collapse
<div class="carousel is-resized">
    <ul class="carousel__slides">
      <li>
        <div class="carousel__slide">
          <div class="carousel__image">
            <img src="images/wide_322x190.jpg" alt="test" title="test">
          </div>
          <div class="carousel__content">Kuvateksti</div>
        </div>
        <div class="carousel__credits">    Photo:     Matti Meikäläinen  </div>
      </li>
    </ul>
    <ul class="carousel__direction-nav">
      <li class="carousel__nav-prev"><a class="carousel__prev" href="#"></a></li>
      <li class="carousel__nav-next"><a class="carousel__next" href="#"></a></li>
    </ul>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 7-1-2: Carousel unwrapped

  • Suo. Kuok­ka. Jus­si.

    Feature-julkaisu kertoo ja näyttää: #ilmastomuuttaa suot, kuokat ja jussit.
    Lue artikkeli

With raster theme:

Va­rieng

Alt title

Testilinkki
Full Screen
Collapse
<div class="carousel-unwrapped">
  <ul class="carousel-unwrapped__slides">
    <li class="carousel-unwrapped__slide is-active-slide">
      <div class="carousel-unwrapped__content">
        <div class="l-subregion-wrapper">
          <div class="l-subregion">
            <div class="box-hero">
              <h2 class="box-hero__title">
                <span class="box-hero__shadow">          Suo. Kuok­ka. Jus­si.        </span>
              </h2>
              <div class="box-hero__content">
                <span class="box-hero__shadow">          Feature-julkaisu kertoo ja näyttää: #ilmastomuuttaa suot, kuokat ja jussit.        </span>
              </div>
              <div class="box-hero__link">
                <a class="button--action icon--arrow-right" href="http://features.helsinki.fi/suokuokkajussi/">Lue artikkeli</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-unwrapped__image">
        <img src="images/wide_322x190.jpg">
      </div>
    </li>
  </ul>
  <ul class="carousel-unwrapped__direction-nav">
    <li><a class="carousel-unwrapped__prev" href="#"></a></li>
    <li><a class="carousel-unwrapped__next" href="#"></a></li>
  </ul>
</div>
<br/>
<p>With raster theme:</p>

<div class="carousel-unwrapped">
  <div class="carousel-unwrapped__content theme-raster">
    <div class="l-subregion-wrapper">
      <div class="l-subregion">
        <div class="box-hero theme-prominent">
          <h1 class="box-hero__title">
            Va­rieng
          </h1>
          <h2 class="box-hero__alt-title">
            Alt title
          </h2>
          <div class="box-hero__link">
            <a class="button--action icon--arrow-right" href="#">Testilinkki</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="carousel-unwrapped__image">
    <img src="images/wide_322x190.jpg">
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 8

Collapse Section

Section 8-1: Feed listing

Ways of agreeing with negative stancetaking
1.1.2011
Hakulinen, A. & Sorjonen, M-L. 2011 The morality of knowledge in conversation. Stivers, T., Mondada, L. & Steensig, J. (toim.). 1. toim. Cambridge, UK: Cambridge University Press, Vuosikerta 2011, s. 235-256 21 Sivumäärä

Julkaisu: Julkaisu kirjassa/kokoomateoksessa › A3 Kirjan tai muun kokoomateoksen osa (vertaisarvioitu)

Ways of agreeing with negative stancetaking
1.1.2011
Hakulinen, A. & Sorjonen, M-L. 2011 The morality of knowledge in conversation. Stivers, T., Mondada, L. & Steensig, J. (toim.). 1. toim. Cambridge, UK: Cambridge University Press, Vuosikerta 2011, s. 235-256 21 Sivumäärä

Julkaisu: Julkaisu kirjassa/kokoomateoksessa › A3 Kirjan tai muun kokoomateoksen osa (vertaisarvioitu)

Full Screen
Collapse
<div class="feed-listing">
  <div class="feed-listing__item">
    <div class="feed-listing__title"><a href="http://tuhat.halvi.helsinki.fi/portal/fi/publications/ways-of-agreeing-wi(355326f3-119d-474a-a386-74f484eb493a).html" target="_new">Ways of agreeing with negative stancetaking</a></div>
    <div class="feed-listing__date">1.1.2011</div>
    <div class="feed-listing__content">
      <div class="rendering rendering_publication  rendering_publication_short rendering_contribtobookanthology rendering_short rendering_contribtobookanthology_short">
        <a rel="Person" href="http://tuhat.halvi.helsinki.fi/portal/fi/persons/auli-hakulinen(7eb84f0f-ce77-43fd-bc47-d2cb71edd87b).html" class="link person">Hakulinen, A.</a> & <a rel="Person" href="http://tuhat.halvi.helsinki.fi/portal/fi/persons/marjaleena-sorjonen(90f422bd-b7e3-42e8-abc2-01ee5b32bb43).html" class="link person">Sorjonen, M-L.</a> 2011 <em>The morality of knowledge in conversation.</em> Stivers, T., Mondada, L. & Steensig, J. (toim.). 1. toim. Cambridge, UK: Cambridge University Press, Vuosikerta 2011, s. 235-256 21 Sivumäärä<br>
        <p class="type">Julkaisu: Julkaisu kirjassa/kokoomateoksessa › A3 Kirjan tai muun kokoomateoksen osa (vertaisarvioitu)</p>
      </div>
    </div>
  </div>
  <div class="feed-listing__item">
    <div class="feed-listing__title"><a href="http://tuhat.halvi.helsinki.fi/portal/fi/publications/ways-of-agreeing-wi(355326f3-119d-474a-a386-74f484eb493a).html" target="_new">Ways of agreeing with negative stancetaking</a></div>
    <div class="feed-listing__date">1.1.2011</div>
    <div class="feed-listing__content">
      <div class="rendering rendering_publication  rendering_publication_short rendering_contribtobookanthology rendering_short rendering_contribtobookanthology_short">
        <a rel="Person" href="http://tuhat.halvi.helsinki.fi/portal/fi/persons/auli-hakulinen(7eb84f0f-ce77-43fd-bc47-d2cb71edd87b).html" class="link person">Hakulinen, A.</a> & <a rel="Person" href="http://tuhat.halvi.helsinki.fi/portal/fi/persons/marjaleena-sorjonen(90f422bd-b7e3-42e8-abc2-01ee5b32bb43).html" class="link person">Sorjonen, M-L.</a> 2011 <em>The morality of knowledge in conversation.</em> Stivers, T., Mondada, L. & Steensig, J. (toim.). 1. toim. Cambridge, UK: Cambridge University Press, Vuosikerta 2011, s. 235-256 21 Sivumäärä<br>
        <p class="type">Julkaisu: Julkaisu kirjassa/kokoomateoksessa › A3 Kirjan tai muun kokoomateoksen osa (vertaisarvioitu)</p>
      </div>
    </div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 9

Collapse Section

Section 9-1: Index

Section 9-1-1: Index

Index of content

Sisällysluettelo
Tarpeeksi terve 2.–27.2.2015
Uusi maailmankuva 16.3.–12.4.2015
Kosmoksen valoja 20.–24.4.2015
Ilmasto muuttaa kaiken 4.–24.5.2015
Globaali Helsinki 31.8.–20.9.2015
Eläinten viikko 5.–9.10.2015
Tulevaisuuden oppiminen 19.10.–8.11.2015
Neljä kulmaa
Kuukauden käsitelmät
Huolettomat hartiat
Ohjelmat vuonna 2014
Full Screen
Collapse
<div class="index">
  <div class="index__label">
    Sisällysluettelo
  </div>
  <div class="index__row">
    <a href="#tarpeeksi-terve-2.–27.2.2015" class="index__link button--action-before icon--arrow-down theme-transparent">Tarpeeksi terve 2.–27.2.2015</a>
  </div>
  <div class="index__row">
    <a href="#uusi-maailmankuva-16.3.–12.4.2015" class="index__link button--action-before icon--arrow-down theme-transparent">Uusi maailmankuva 16.3.–12.4.2015</a>
  </div>
  <div class="index__row">
    <a href="#kosmoksen-valoja-20.–24.4.2015--" class="index__link button--action-before icon--arrow-down theme-transparent">Kosmoksen valoja 20.–24.4.2015  </a>
  </div>
  <div class="index__row">
    <a href="#ilmasto-muuttaa-kaiken-4.–24.5.2015" class="index__link button--action-before icon--arrow-down theme-transparent">Ilmasto muuttaa kaiken 4.–24.5.2015</a>
  </div>
  <div class="index__row">
    <a href="#globaali-helsinki-31.8.–20.9.2015-" class="index__link button--action-before icon--arrow-down theme-transparent">Globaali Helsinki 31.8.–20.9.2015 </a>
  </div>
  <div class="index__row">
    <a href="#eläinten-viikko-5.–9.10.2015-" class="index__link button--action-before icon--arrow-down theme-transparent">Eläinten viikko 5.–9.10.2015 </a>
  </div>
  <div class="index__row">
    <a href="#tulevaisuuden-oppiminen-19.10.–8.11.2015" class="index__link button--action-before icon--arrow-down theme-transparent">Tulevaisuuden oppiminen 19.10.–8.11.2015</a>
  </div>
  <div class="index__row">
    <a href="#neljä-kulmaa" class="index__link button--action-before icon--arrow-down theme-transparent">Neljä kulmaa</a>
  </div>
  <div class="index__row">
    <a href="#kuukauden-käsitelmät" class="index__link button--action-before icon--arrow-down theme-transparent">Kuukauden käsitelmät</a>
  </div>
  <div class="index__row">
    <a href="#huolettomat-hartiat" class="index__link button--action-before icon--arrow-down theme-transparent">Huolettomat hartiat</a>
  </div>
  <div class="index__row">
    <a href="#ohjelmat-vuonna-2014" class="index__link button--action-before icon--arrow-down theme-transparent">Ohjelmat vuonna 2014</a>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 9-1-2: Index alphabetical

Alphabetical index of content

K
Kissamaisteri
Ö
Ökandi
Ingressiteksti
U
Ugaattibugaatti
Full Screen
Collapse
<div class="index-alpha">
  <div class="index-alpha__group">
    <div class="index-alpha__initial">      K    </div>
    <div class="views-row views-row-1 views-row-odd views-row-first views-row-last index-alpha__row">
      <div class="index-alpha__title">
        <a href="#kissamaisteri">Kissamaisteri</a>
      </div>
    </div>
  </div>
  <div class="index-alpha__group">
    <div class="index-alpha__initial">      Ö    </div>
    <div class="views-row views-row-1 views-row-odd views-row-first views-row-last index-alpha__row">
      <div class="index-alpha__title">
        <a href="#kandi-of-the-perpeprbeoprbop">Ökandi</a>
      </div>
      <div class="index-alpha__subtitle">
        Ingressiteksti
      </div>
    </div>
  </div>
  <div class="index-alpha__group">
    <div class="index-alpha__initial">      U    </div>
    <div class="views-row views-row-1 views-row-odd views-row-first views-row-last index-alpha__row">
      <div class="index-alpha__title">
        <a href="#ugaatti-bugaatti">Ugaattibugaatti</a>
      </div>
    </div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 9-1-3: Index topical

Topical index of content

Aasian tutkimus, humanististen tieteiden kandidaatti
Humanistinen tiedekunta
180 ECTS
2015 Syksy
suomi
Aasian tutkimus, humanististen tieteiden kandidaatti
Humanistinen tiedekunta
180 ECTS
2015 Syksy
suomi
Aasian tutkimus, humanististen tieteiden kandidaatti
Humanistinen tiedekunta
180 ECTS
2015 Syksy
suomi


Theme prominent



Aasian tutkimus, humanististen tieteiden kandidaatti
Humanistinen tiedekunta
180 ECTS
2015 Syksy
suomi
Aasian tutkimus, humanististen tieteiden kandidaatti
Humanistinen tiedekunta
180 ECTS
2015 Syksy
suomi
Aasian tutkimus, humanististen tieteiden kandidaatti
Humanistinen tiedekunta
180 ECTS
2015 Syksy
suomi
Full Screen
Collapse
<div class="index-topical">
  <div class="index-topical__title">
    <a href="#">Aasian tutkimus, humanististen tieteiden kandidaatti</a>
  </div>
  <div class="index-topical__content">
    <div class="index-topical__field">
      Humanistinen tiedekunta
    </div>
    <div class="index-topical__field">
      180 ECTS
    </div>
    <div class="index-topical__field">
      2015 Syksy
    </div>
    <div class="index-topical__field">
      suomi
    </div>
  </div>
</div>
<div class="index-topical">
  <div class="index-topical__title">
    <a href="#">Aasian tutkimus, humanististen tieteiden kandidaatti</a>
  </div>
  <div class="index-topical__content">
    <div class="index-topical__field">
      Humanistinen tiedekunta
    </div>
    <div class="index-topical__field">
      180 ECTS
    </div>
    <div class="index-topical__field">
      2015 Syksy
    </div>
    <div class="index-topical__field">
      suomi
    </div>
  </div>
</div>
<div class="index-topical">
  <div class="index-topical__title">
    <a href="#">Aasian tutkimus, humanististen tieteiden kandidaatti</a>
  </div>
  <div class="index-topical__content">
    <div class="index-topical__field">
      Humanistinen tiedekunta
    </div>
    <div class="index-topical__field">
      180 ECTS
    </div>
    <div class="index-topical__field">
      2015 Syksy
    </div>
    <div class="index-topical__field">
      suomi
    </div>
  </div>
</div>

<br/>
<br/>
Theme prominent
<br/>
<br/>
<br/>
<br/>

<div class="index-topical theme-prominent">
  <div class="index-topical__title">
    <a href="#">Aasian tutkimus, humanististen tieteiden kandidaatti</a>
  </div>
  <div class="index-topical__content">
    <div class="index-topical__field">
      Humanistinen tiedekunta
    </div>
    <div class="index-topical__field">
      180 ECTS
    </div>
    <div class="index-topical__field">
      2015 Syksy
    </div>
    <div class="index-topical__field">
      suomi
    </div>
  </div>
</div>
<div class="index-topical theme-prominent">
  <div class="index-topical__title">
    <a href="#">Aasian tutkimus, humanististen tieteiden kandidaatti</a>
  </div>
  <div class="index-topical__content">
    <div class="index-topical__field">
      Humanistinen tiedekunta
    </div>
    <div class="index-topical__field">
      180 ECTS
    </div>
    <div class="index-topical__field">
      2015 Syksy
    </div>
    <div class="index-topical__field">
      suomi
    </div>
  </div>
</div>
<div class="index-topical theme-prominent">
  <div class="index-topical__title">
    <a href="#">Aasian tutkimus, humanististen tieteiden kandidaatti</a>
  </div>
  <div class="index-topical__content">
    <div class="index-topical__field">
      Humanistinen tiedekunta
    </div>
    <div class="index-topical__field">
      180 ECTS
    </div>
    <div class="index-topical__field">
      2015 Syksy
    </div>
    <div class="index-topical__field">
      suomi
    </div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 10

Collapse Section

Section 10-1: Jobs listing

Tehtävä Hae viimeistään
Pieneläinkirurgiaan erikoistuva eläinlääkäri 31.3.2016
Johtaja, ympäristötieteiden laitos 8.4.2016
Tutkijatohtori, Kaupunkiakatemia 18.3.2016
yliopistonlehtori, sosiaalitieteiden laitos, sosiaali- ja kulttuuriantropologia 21.3.2016
Tutkijatohtori - Postdoctoral Researcher, Department of Geosciences and Geography 31.3.2016
Full Screen
Collapse
<table class="jobs-listing">
  <thead>
    <tr>
      <th class="">
        Tehtävä
      </th>
      <th class="">
        Hae viimeistään
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="jobs-listing__item">
      <td class="jobs-listing__title">
        <a href="#pienelainkirurgiaan-erikoistuva-elainlaakari">Pieneläinkirurgiaan erikoistuva eläinlääkäri</a>
      </td>
      <td class="jobs-listing__date">
        <span>31.3.2016</span>
      </td>
    </tr>
    <tr class="jobs-listing__item">
      <td class="jobs-listing__title">
        <a href="#johtaja-ymparistotieteiden-laitos">Johtaja, ympäristötieteiden laitos</a>
      </td>
      <td class="jobs-listing__date">
        <span>8.4.2016</span>
      </td>
    </tr>
    <tr class="jobs-listing__item">
      <td class="jobs-listing__title">
        <a href="#tutkijatohtori-kaupunkiakatemia">Tutkijatohtori, Kaupunkiakatemia</a>
      </td>
      <td class="jobs-listing__date">
        <span>18.3.2016</span>
      </td>
    </tr>
    <tr class="jobs-listing__item">
      <td class="jobs-listing__title">
        <a href="#yliopistonlehtori-sosiaalitieteiden-laitos-sosiaali-ja-kulttuuriantropologia">yliopistonlehtori, sosiaalitieteiden laitos, sosiaali- ja kulttuuriantropologia</a>
      </td>
      <td class="jobs-listing__date">
        <span>21.3.2016</span>
      </td>
    </tr>
    <tr class="jobs-listing__item">
      <td class="jobs-listing__title">
        <a href="#tutkijatohtori-postdoctoral-researcher-department-of-geosciences-and-geography">Tutkijatohtori - Postdoctoral Researcher, Department of Geosciences and Geography</a>
      </td>
      <td class="jobs-listing__date">
        <span>31.3.2016</span>
      </td>
    </tr>
  </tbody>
</table>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 11

Collapse Section

Section 11-1: Panel

Tapahtumat

Katso kaikki
Full Screen
Collapse
<div class="panel">
  <h3 class="panel__title">
    Tapahtumat
  </h3>
  <div class="panel__more-link">
    <a class="button--action icon--arrow-right theme-transparent" href="#">Katso kaikki</a>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 11-1-1: File

Component for a downloadable file link.

Teksti
Full Screen
Collapse
<div class="file">
  <a href="#" type="application/pdf; length=4221367" target="_blank" class="file__link" title="title"><span class="file__icon icon--pdf"></span>Teksti</a>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 12

Collapse Section

Section 12-1: Avatar image

Section 12-1-1: Avatar image

Full Screen
Collapse
<div class="avatar-image is-student"></div>
<div class="avatar-image is-teacher"></div>
<div class="avatar-image is-student is-small"></div>
<div class="avatar-image is-teacher is-small"></div>
<div class="avatar-image is-student is-large"></div>
<div class="avatar-image is-teacher is-large"></div>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 13

Collapse Section

Section 13-1: Label row

Artikkeli
Yliopisto-lehti
Uutinen
Full Screen
Collapse
<div class="label-row">
    <div class="label-row__item theme-yliopisto-lehti">
        Artikkeli
    </div>
    <div class="label-row__item theme-secondary theme-yliopisto-lehti">
        Yliopisto-lehti
    </div>
</div>

<div class="label-row">
    <div class="label-row__item">
        Uutinen
    </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 14

Collapse Section

Section 14-1: Post

Social media post

1h
Hel­sin­ki Uni­ver­si­ty

Morphology archives @HYhumtdk preserve forms of speech from 50 years ago #language #dialects helsinki.fi/en/news/morpho…

2
1
20h
Lii­sa Kon­tu­nen

Täysi sali #DaretoLearn2017:ssa kuulemassa @helsinkiuni'n @KirstiLonka'n näkemyksiä tulevaisuuden koulutuksen taido… twitter.com/i/web/status/9…

18
6
Full Screen
Collapse
<div class="post">
  <img class="post__image" data-src="https://pbs.twimg.com/profile_images/851407702769250304/dA8NaETZ_normal.jpg" src="https://pbs.twimg.com/profile_images/851407702769250304/dA8NaETZ_normal.jpg">
  <div class="post__content">
    <div class="post__date">1h</div>
    <h5 class="post__author">Hel­sin­ki Uni­ver­si­ty</h5>
    <a class="post__account" href="https://www.twitter.com/helsinkiuni">@helsinkiuni</a>
    <p class="post__message">Morphology archives <a href="https://www.twitter.com/HYhumtdk" title="Humanistinen tdk, HY">@HYhumtdk</a> preserve forms of speech from 50 years ago <a href="https://twitter.com/search?q=%23language&src=hash">#language</a> <a href="https://twitter.com/search?q=%23dialects&src=hash">#dialects</a>
    <a href="https://t.co/p0lHkAdIpl">helsinki.fi/en/news/morpho…</a></p>
    <div class="post__footer">
      <div class="post__action"><span class="is-hidden">Favorites </span><span class="icon icon--heart"></span>2</div>
      <div class="post__action"><span class="is-hidden">Retweets </span><span class="icon icon--retweet"></span>1</div>
    </div>
  </div>
</div>


<div class="post">
  <img class="post__image" data-src="https://pbs.twimg.com/profile_images/903681500029349888/3eVHSAPd_normal.jpg" src="https://pbs.twimg.com/profile_images/903681500029349888/3eVHSAPd_normal.jpg">
  <div class="post__content">
    <div class="post__date">20h</div>
    <h5 class="post__author">Lii­sa Kon­tu­nen</h5>
    <a class="post__account" href="https://www.twitter.com/LiisaKontunen">@LiisaKontunen</a>
    <p class="post__message">Täysi sali <a href="https://twitter.com/search?q=%23DaretoLearn2017&src=hash">#DaretoLearn2017</a>:ssa kuulemassa <a href="https://www.twitter.com/helsinkiuni" title="Helsinki University">@helsinkiuni</a>'n <a href="https://www.twitter.com/KirstiLonka" title="Kirsti Lonka">@KirstiLonka</a>'n näkemyksiä tulevaisuuden koulutuksen taido… <a href="https://t.co/XRULrDhFNp">twitter.com/i/web/status/9…</a></p>
    <div class="post__footer">
      <div class="post__action"><span class="is-hidden">Favorites </span><span class="icon icon--heart"></span>18</div>
      <div class="post__action"><span class="is-hidden">Retweets </span><span class="icon icon--retweet"></span>6</div>
    </div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 15

Collapse Section

Section 15-1: Top bar

The top bar.

Flamma Helsingin kaupunki
en fi sv
Full Screen
Collapse
<div class="l-top-bar">
  <div class="l-top-bar__subregion">
    <div class="l-top-bar__main">
      <a class="logo" href="/fi">
        <h1 class="logo__sitename">Helsingin yliopisto</h1>
      </a>
    </div>
    <div class="l-top-bar__sub">
      <div class="l-top-bar__subleft">
        <div class="links">
          <a class="links__link" href="https://flamma.helsinki.fi/portal/home/login" target="_blank">Flamma</a>
          <a class="links__link" href="http://www.hel.fi/www/helsinki/fi" target="_blank">Helsingin kaupunki</a>
        </div>
      </div>
      <div class="l-top-bar__subright">
        <div class="links">
          <span class="links__link theme-language" href="/en" lang="en"><abbr title="English">en</abbr></span>
          <a class="links__link theme-language active" href="/fi" lang="fi"><abbr title="Suomi">fi</abbr></a>
          <a class="links__link theme-language" href="/sv" lang="sv"><abbr title="Svenska">sv</abbr></a>
        </div>
      </div>
    </div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 15-1-1: Top bar small

The top bar small variant

Helsingin yliopisto
English Suomi Svenska Lahjoita
Full Screen
Collapse
<div class="l-top-bar l-top-bar--small">
  <div class="l-top-bar__left">
    <div class="links theme-plain">
      <a class="links__link" href="/">Helsingin yliopisto</a>
    </div>
  </div>
  <div class="l-top-bar__right">
    <div class="links theme-plain">
      <span class="links__link theme-language" href="/en" lang="en">English</span>
      <a class="links__link theme-language active" href="/fi" lang="fi">Suomi</a>
      <a class="links__link theme-language" href="/sv" lang="sv">Svenska</a>
      <a class="links__link theme-button button" href="#">Lahjoita</a>
    </div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 15-1-2: Header bar

The header bar with logo & navigation.

Full Screen
Collapse
<div class="l-header-bar">
  <div class="l-header-bar__top">
    <div class="l-header-bar__left">
      <a class="logo" href="/fi">
        <h1 class="logo__sitename">Helsingin yliopisto</h1>
      </a>
    </div>

    <div class="l-header-bar__middle">
      <nav role="navigation" class="quick-menu">
        <ul class="menu">
          <li><a href="#" title="Ajankohtaista">Ajankohtaista</a></li>
          <li><a href="#" title="Tutkimus">Tutkimus</a></li>
          <li class="is-active"><a href="#" title="Opiskelu" class="active active-trail">Opiskelu</a></li>
          <li><a href="#" title="Yhteistyö">Yhteistyö</a></li>
          <li><a href="#" title="Yliopisto">Yliopisto</a></li>
        </ul>
      </nav>
    </div>

    <div class="l-header-bar__right">
      <div class="is-hidden--tablet">
        <form class="search-form--new">
          <input class="search-form__input form-text" maxlength="128" name="search_string" placeholder="Hae" size="60" type="text" value="">
          <a class="search-form__search-button"></a>
          <input class="search-form__submit is-hidden" name="op" type="submit" value="">
        </form>
      </div>
    </div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 15-2: Footer

The footer.

Hel­sin­gin yli­opis­to

PL 3 (Fabianinkatu 33)
00014 Helsingin yliopisto

Puhelinvaihde: 02941 911

Yhteystiedot Anna palautetta Tietoa sivustosta Kirjasto Flamma

© Helsingin yliopisto 2016

Full Screen
Collapse
<div class="l-footer">
    <div class="l-footer__subregion">
        <div class="l-footer__column theme-sub">
            <div class="logo-block">
                <div class="logo-block__logo">
                    <a class="logo theme-big" href="/fi"></a>
                </div>
                <div class="logo-block__content">
                    <div class="logo-block__sitename">Hel­sin­gin yli­opis­to</div>
                    <p>PL 3 (Fabianinkatu 33)<br>
                        00014 Helsingin yliopisto</p>
                    <p>Puhelinvaihde: <a class="is-tel" href="tel:+3582941911">02941 911</a></p>
                </div>
            </div>
        </div>
        <div class="l-footer__column">
            <div class="list-of-links--condensed theme-footer">
                <a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="https://www.helsinki.fi/fi/yhteystiedot">Yhteystiedot</a>
                <a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="/anna-palautetta">Anna palautetta</a>
                <a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="https://www.helsinki.fi/fi/tietoa-sivustosta">Tietoa sivustosta</a>
                <a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="http://www.helsinki.fi/kirjasto/fi/etusivu/">Kirjasto</a>
                <a class="list-of-links__link button--action icon--arrow-right theme-transparent-alt" href="https://flamma.helsinki.fi/portal/home/login">Flamma</a>
            </div>
        </div>
        <div class="l-footer__column theme-center">
            <div class="button-group">
                <a class="button--icon icon--facebook" href="https://www.facebook.com/helsinginyliopisto" target="_new"></a>
                <a class="button--icon icon--twitter" href="https://www.twitter.com/helsinkiuni" target="_new"></a>
                <a class="button--icon icon--youtube" href="https://www.youtube.com/universityofhelsinki" target="_new"></a>
                <a class="button--icon icon--linkedin" href="https://www.linkedin.com/company/university-of-helsinki" target="_new"></a>
                <a class="button--icon icon--instagram" href="https://www.instagram.com/universityofhelsinki" target="_new"></a>
            </div>
        </div>
    </div>
    <div class="l-footer__copyright">
        <p>© Helsingin yliopisto 2016</p>
    </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 15-3: Links

Links compontent is used in the top bar.

Flamma Helsingin kaupunki
en fi sv
Full Screen
Collapse
<div class="links">
    <a class="links__link" href="https://flamma.helsinki.fi/portal/home/login" target="_blank">Flamma</a>
    <a class="links__link" href="http://www.hel.fi/www/helsinki/fi" target="_blank">Helsingin kaupunki</a>
</div>
<div class="links">
    <a class="links__link theme-language" href="/en" lang="en"><abbr title="English">en</abbr></a>
    <a class="links__link theme-language active" href="/fi" lang="fi"><abbr title="Suomi">fi</abbr></a>
    <a class="links__link theme-language" href="/sv" lang="sv"><abbr title="Svenska">sv</abbr></a>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 16

Collapse Section

Section 16-1

Section 16-1-1: Hero

Va­rieng

Alt title
Full Screen
Collapse
<div class="hero">
  <div class="hero__content">
    <h4 class="hero__title">
      Va­rieng
    </h1>
    <h5 class="hero__alt-title">
      Alt title
    </h5>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 16-1-2: Hero big

Ole yksi* parhaista

Ole yksi* parhaista
* Kuulumme maailman tutkimusyliopistojen parhaan 1% joukkoon
* Kuulumme maailman tutkimusyliopistojen parhaan 1% joukkoon
Hae opiskelijaksi Katso video
Full Screen
Collapse
<div class="hero-big" style="background-image: url(images/opiskelu_hero.png);">
  <div class="hero-big__top">
    <div class="hero-big__content">
      <div class="hero-big__title__container">
        <h2 class="hero-big__title">
          Ole yksi* parhaista
        </h2>
        <div class="hero-big__overlay--container">
          <div class="hero-big__overlay">
            Ole yksi* parhaista
          </div>
        </div>
      </div>
      <div class="hero-big__ingress__container">
        <div class="hero-big__ingress">
          * Kuulumme maailman tutkimusyliopistojen parhaan 1% joukkoon
        </div>
        <div class="hero-big__overlay--container">
          <div class="hero-big__overlay">
            * Kuulumme maailman tutkimusyliopistojen parhaan 1% joukkoon
          </div>
        </div>
      </div>
      <div class="hero-big__content-bottom">
        <a href="#" class="hero-big__link button">
          Hae opiskelijaksi
        </a>
        <a href="#" class="hero-big__play">
          Katso video
        </a>
      </div>
    </div>
  </div>
  <div class="hero-big__video">
    <video autoplay muted loop width="1920" height="1080" preload="auto">
      <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f3/Big_Buck_Bunny_first_23_seconds_1080p.ogv/Big_Buck_Bunny_first_23_seconds_1080p.ogv.1080p.webm" type="video/mp4">
    </video>
    <div class="hero-big__video__controls">
      <!--     <button type="button" data-video="play" class="hero-big__video-button icon-2x icon--play-arrow" aria-label="Play"></button> -->
      <button type="button" data-video="pause" class="hero-big__video-button icon-2x icon--pause" aria-label="Pause"></button>
    </div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 16-1-3: Hero big centered

Lorem est notare nuam littera gothica nonummy dolor

Lorem ipsum dolor Katso video
Full Screen
Collapse
<div class="hero-big hero-big--centered" style="background-image: url(images/opiskelu_hero.png);">
  <div class="hero-big__corners">
  </div>
  <div class="hero-big__content">
    <h2 class="hero-big__title">
      Lorem est notare nuam littera gothica nonummy dolor
    </h2>
    <div class="hero-big__content-bottom">
      <a href="#" class="hero-big__link">
        Lorem ipsum dolor
      </a>
      <a href="#" class="hero-big__play">
        Katso video
      </a>
    </div>
  </div>

  <div class="hero-big__video">
    <video autoplay muted loop width="1920" height="1080" preload="auto">
      <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f3/Big_Buck_Bunny_first_23_seconds_1080p.ogv/Big_Buck_Bunny_first_23_seconds_1080p.ogv.1080p.webm" type="video/mp4">
    </video>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 16-1-4: Hero medium

Opiskelu /Hae opiskelijaksi/

Koulutusohjelmat

Syksyn 2017 yhteishaku 6.9.
(klo 8) - 20.9. 2017 (klo 15.00)
Full Screen
Collapse
<div class="hero-medium" style="background-image: url(images/koulutustarjonta.jpg);">
  <div class="hero-medium__top">
    <div class="hero-medium__content">
      <div class="hero-medium__breadcrumbs breadcrumbs theme-hero"><span class="breadcrumbs__item"><a href="/fi/opiskelu" title="Opiskelu" alt="Menu for group">Opiskelu</a> </span><span class="breadcrumbs__divider">/</span><span class="breadcrumbs__item"><a href="/fi/opiskelu/hae-opiskelijaksi">Hae opiskelijaksi</a></span><span class="breadcrumbs__divider">/</span></div>
      <h2 class="hero-medium__title">
        Koulutusohjelmat
      </h2>
      <div class="hero-medium__ingress">
        Syksyn 2017 yhteishaku 6.9.<br/>
        (klo 8) - 20.9. 2017 (klo 15.00)
      </div>
    </div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 17

Collapse Section

Section 17-1: Overlay

Full screen overlay for menu, etc.

English Suomi Svenska Lahjoita
English Suomi Svenska
Full Screen
Collapse
<div class="l-overlay is-open">
  <div class="l-overlay__top">
    <div class="l-top-bar l-top-bar--small">
      <div class="l-top-bar__subregion">
        <div class="links theme-plain">
          <span class="links__link theme-language" href="/en" lang="en">English</span>
          <a class="links__link theme-language active" href="/fi" lang="fi">Suomi</a>
          <a class="links__link theme-language" href="/sv" lang="sv">Svenska</a>
          <a class="links__link theme-button button" href="#">Lahjoita</a>
        </div>
      </div>
    </div>

    <div class="l-header-bar">
      <div class="l-header-bar__left">
        <a class="logo" href="/fi">
          <h1 class="logo__sitename">Helsingin yliopisto</h1>
        </a>
      </div>

      <div class="l-header-bar__middle">
      </div>

      <div class="l-header-bar__right">
        <form class="search-form--new">
          <input class="search-form__input form-text" maxlength="128" name="search_string" placeholder="Hae" size="60" type="text" value="">
          <a class="search-form__search-button"></a>
          <input class="search-form__submit is-hidden" name="op" type="submit" value="">
        </form>
        <span class="overlay-toggle is-active"><span></span></span>
      </div>
    </div>
  </div>
  <div class="l-overlay__main">
    <nav role="navigation" class="main-menu-v2">
      <ul class="menu">
        <li class="is-lvl1 is-expandable is-open">
          <span class="main-menu-v2__expand"></span>
          <a href="#" title="Ajankohtaista">Ajankohtaista</a>
          <ul class="menu">
            <li class="is-lvl2">
              <a href="#">Uutiset ja tiedotteet</a>
            </li>
            <li class="is-lvl2">
              <a class="active" href="#">Tapahtumat</a>
            </li>
            <li class="is-lvl2">
              <a href="#">Teemat</a>
            </li>
            <li class="is-lvl2">
              <a href="#">Unitube – Videopalvelu</a>
            </li>
            <li class="is-lvl2 theme-minor">
              <a href="#">Tiedekulma</a>
            </li>
            <li class="is-lvl2 theme-minor">
              <a href="#">Uutiskirjeet</a>
            </li>
            <li class="is-lvl2 theme-minor">
              <a href="#">Yliopisto-lehti</a>
            </li>
          </ul>
        </li>
        <li class="is-lvl1 is-expandable">
          <span class="main-menu-v2__expand"></span>
          <a href="#" title="Tutkimus">Tutkimus</a>
          <ul class="menu">
            <li class="is-lvl2">
              <a href="#">Uutiset ja tiedotteet</a>
            </li>
            <li class="is-lvl2">
              <a href="#">Tapahtumat</a>
            </li>
            <li class="is-lvl2">
              <a href="#">Teemat</a>
            </li>
            <li class="is-lvl2">
              <a href="#">Unitube – Videopalvelu</a>
            </li>
            <li class="is-lvl2 theme-minor">
              <a href="#">Tiedekulma</a>
            </li>
            <li class="is-lvl2 theme-minor">
              <a href="#">Uutiskirjeet</a>
            </li>
            <li class="is-lvl2 theme-minor">
              <a href="#">Yliopisto-lehti</a>
            </li>
          </ul>
        </li>
        <li class="is-lvl1 is-expandable">
          <span class="main-menu-v2__expand"></span>
          <a href="#" title="Opiskelu">Opiskelu</a>
          <ul class="menu">
            <li class="is-lvl2">
              <a href="#">Uutiset ja tiedotteet</a>
            </li>
            <li class="is-lvl2">
              <a href="#">Tapahtumat</a>
            </li>
            <li class="is-lvl2">
              <a href="#">Teemat</a>
            </li>
            <li class="is-lvl2">
              <a href="#">Unitube – Videopalvelu</a>
            </li>
            <li class="is-lvl2 theme-minor">
              <a href="#">Tiedekulma</a>
            </li>
            <li class="is-lvl2 theme-minor">
              <a href="#">Uutiskirjeet</a>
            </li>
            <li class="is-lvl2 theme-minor">
              <a href="#">Yliopisto-lehti</a>
            </li>
          </ul>
        </li>
        <li class="is-lvl1 is-expandable">
          <span class="main-menu-v2__expand"></span>
          <a href="#" title="Yhteistyö">Yhteistyö</a>
          <ul class="menu">
            <li class="is-lvl2">
              <a href="#">Uutiset ja tiedotteet</a>
            </li>
            <li class="is-lvl2">
              <a href="#">Tapahtumat</a>
            </li>
            <li class="is-lvl2">
              <a href="#">Teemat</a>
            </li>
            <li class="is-lvl2">
              <a href="#">Unitube – Videopalvelu</a>
            </li>
            <li class="is-lvl2 theme-minor">
              <a href="#">Tiedekulma</a>
            </li>
            <li class="is-lvl2 theme-minor">
              <a href="#">Uutiskirjeet</a>
            </li>
            <li class="is-lvl2 theme-minor">
              <a href="#">Yliopisto-lehti</a>
            </li>
          </ul>
        </li>
        <li class="is-lvl1 is-expandable">
          <span class="main-menu-v2__expand"></span>
          <a href="#" title="Yliopisto">Yliopisto</a>
          <ul class="menu">
            <li class="is-lvl2">
              <a href="#">Uutiset ja tiedotteet</a>
            </li>
            <li class="is-lvl2">
              <a href="#">Tapahtumat</a>
            </li>
            <li class="is-lvl2">
              <a href="#">Teemat</a>
            </li>
            <li class="is-lvl2">
              <a href="#">Unitube – Videopalvelu</a>
            </li>
            <li class="is-lvl2 theme-minor">
              <a href="#">Tiedekulma</a>
            </li>
            <li class="is-lvl2 theme-minor">
              <a href="#">Uutiskirjeet</a>
            </li>
            <li class="is-lvl2 theme-minor">
              <a href="#">Yliopisto-lehti</a>
            </li>
          </ul>
        </li>

        <li class="is-lvl1 theme-quicklinks is-hidden--tablet">
          <a href="#" title="Pikalinkit">Pikalinkit</a>
          <ul>
            <li>
              <a class="candy-link" href="#">Jatkuva oppiminen</a>
            </li>
            <li>
              <a href="#">Yhteystiedot</a>
            </li>
            <li>
              <a href="#">Loremipsum</a>
            </li>
            <li>
              <a href="#">Doloremus</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>

  <div class="l-overlay__bottom">
    <div class="links theme-plain">
      <span class="links__link theme-language" href="/en" lang="en">English</span>
      <a class="links__link theme-language active" href="/fi" lang="fi">Suomi</a>
      <a class="links__link theme-language" href="/sv" lang="sv">Svenska</a>
    </div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 18

Collapse Section

Section 18-1: Liftup grid

Grid of three liftups.

Tohtorikoulutus

Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Tule tutustumaan yliopistoon

Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Tutkimuksenhuiput

Newsletter
Full Screen
Collapse
<div class="liftup-grid">
  <a class="liftup-grid__item" href="#" style="background-color: #0098d0">
    <div class="liftup-grid__content">
      <h4 class="liftup-grid__title">
        Tohtorikoulutus
      </h4>
      <div class="liftup-grid__ingress">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
      </div>
    </div>
    <div class="liftup-grid__image"><img src="images/squarepic.png"></div>
  </a>
  <a class="liftup-grid__item theme-small" href="#">
    <div class="liftup-grid__content">
      <h4 class="liftup-grid__title">
        Tule tutustumaan yliopistoon
      </h4>
      <div class="liftup-grid__ingress">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
      </div>
    </div>
  </a>
  <div class="liftup-grid__item theme-small" href="#" style="background-color: #0098d0">
    <div class="liftup-grid__content">
      <h4 class="liftup-grid__title">
        Tutkimuksenhuiput
      </h4>
      <a class="liftup-grid__button button--action icon--arrow-right" href="#">
        Newsletter
      </a>
    </div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

Section 18-2: Liftup

A liftup.

Tutkimuksenhuiput
Korkeakoulu- & Tiedepolitiikka
Full Screen
Collapse
<a class="liftup" href="#" style="background-color: #0098d0">
  <h5 class="liftup__title">
    Tutkimuksenhuiput
  </h5>
</a>

<a class="liftup" href="#" style="background-image: url(images/wide_322x190.jpg)">
  <h5 class="liftup__title">
    Korkeakoulu- & Tiedepolitiikka
  </h5>
</a>

Code block selected, Ctrl+C/Cmd+C to copy

Section 18-3: Liftup mosaic

Mosaic of five liftups.

Tutkijan ääni

B-vitamiinien liikakäyttö voi jopa nelinkertaistaa keuhkosyövän riskin miehillä – suomalaisprofessori pitää tulosta yllättävänä

Tutkijan ääni

Dinosaurukset kuolivat kylmässä ja pimeässä – uusi tutkimus valaisee asteroidin törmäyksen kaameita vaikutuksia

Alert

Kaksi Pirate Bayn perustajajäsentä tuomittiin lähes puolen miljoonan euron korvauksiin Helsingissä

Tutkijan ääni

Muumien sensuroidut jaksot tulevat nähtäväksi Suomessa – mukana puukkoja ja demoni

Tutkijan ääni

B-vitamiinien liikakäyttö voi jopa nelinkertaistaa keuhkosyövän riskin miehillä – suomalaisprofessori pitää tulosta yllättävänä

Full Screen
Collapse
<div class="liftup-mosaic">
  <a class="liftup-mosaic__item theme-video" href="#" style="background-image: url('images/squarepic.png');">
    <div class="liftup-mosaic__label">
      <div class="label">
        Tutkijan ääni
      </div>
    </div>
    <h4 class="liftup-mosaic__title">
      B-vitamiinien liikakäyttö voi jopa nelinkertaistaa keuhkosyövän riskin miehillä – suomalaisprofessori pitää tulosta yllättävänä
    </h4>
  </a>
  <a class="liftup-mosaic__item theme-video" href="#" style="background-image: url('images/squarepic.png');">
    <div class="liftup-mosaic__label">
      <div class="label">
        Tutkijan ääni
      </div>
    </div>
    <h4 class="liftup-mosaic__title">
      Dinosaurukset kuolivat kylmässä ja pimeässä – uusi tutkimus valaisee asteroidin törmäyksen kaameita vaikutuksia
    </h4>
  </a>
  <a class="liftup-mosaic__item theme-plain" href="#">
    <div class="liftup-mosaic__label">
      <div class="label theme-alert">
        Alert
      </div>
    </div>
    <h4 class="liftup-mosaic__title">
      Kaksi Pirate Bayn perustajajäsentä tuomittiin lähes puolen miljoonan euron korvauksiin Helsingissä
    </h4>
  </a>
  <a class="liftup-mosaic__item" href="#" style="background-image: url('images/squarepic.png');">
    <div class="liftup-mosaic__label">
      <div class="label">
        Tutkijan ääni
      </div>
    </div>
    <h4 class="liftup-mosaic__title">
      Muumien sensuroidut jaksot tulevat nähtäväksi Suomessa – mukana puukkoja ja demoni
    </h4>
  </a>
  <a class="liftup-mosaic__item" href="#" style="background-image: url('images/squarepic.png');">
    <div class="liftup-mosaic__label">
      <div class="label">
        Tutkijan ääni
      </div>
    </div>
    <h4 class="liftup-mosaic__title">
      B-vitamiinien liikakäyttö voi jopa nelinkertaistaa keuhkosyövän riskin miehillä – suomalaisprofessori pitää tulosta yllättävänä
    </h4>
  </a>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 19

Collapse Section

Section 19-1: Highlight

Highlight.

Helsinki opiskelijakaupunkina

Helsinki on toimiva ja turvallinen opiskelukaupunki. Opiskelijalle se tarjoaa monenlaisia vapaa-ajanviettomahdollisuuksia sekä vilkkaan opiskelijaelämän. Tutustu yliopistoon, opiskeluun ja Helsinkiin.

Helsinki opiskelijakaupunkina

Helsinki on toimiva ja turvallinen opiskelukaupunki. Opiskelijalle se tarjoaa monenlaisia vapaa-ajanviettomahdollisuuksia sekä vilkkaan opiskelijaelämän. Tutustu yliopistoon, opiskeluun ja Helsinkiin.

Helsinki opiskelijakaupunkina

Helsinki on toimiva ja turvallinen opiskelukaupunki. Opiskelijalle se tarjoaa monenlaisia vapaa-ajanviettomahdollisuuksia sekä vilkkaan opiskelijaelämän. Tutustu yliopistoon, opiskeluun ja Helsinkiin.
Full Screen
Collapse
<a class="highlight" href="#">
  <div class="highlight__content">
    <h4 class="highlight__title">
      Helsinki opiskelijakaupunkina
    </h4>
    <div class="highlight__ingress">
      Helsinki on toimiva ja turvallinen opiskelukaupunki. Opiskelijalle se tarjoaa monenlaisia vapaa-ajanviettomahdollisuuksia sekä vilkkaan opiskelijaelämän. Tutustu yliopistoon, opiskeluun ja Helsinkiin.
    </div>
  </div>
  <div class="highlight__bgoverlay" style="background-image: url(images/test-image.jpg);"></div>
</a>

<a class="highlight" href="#" style="background-color: #0098d0;">
  <div class="highlight__content">
    <h4 class="highlight__title">
      Helsinki opiskelijakaupunkina
    </h4>
    <div class="highlight__ingress">
      Helsinki on toimiva ja turvallinen opiskelukaupunki. Opiskelijalle se tarjoaa monenlaisia vapaa-ajanviettomahdollisuuksia sekä vilkkaan opiskelijaelämän. Tutustu yliopistoon, opiskeluun ja Helsinkiin.
    </div>
  </div>
</a>

<a class="highlight" href="#">
  <div class="highlight__content">
    <h4 class="highlight__title">
      Helsinki opiskelijakaupunkina
    </h4>
    <div class="highlight__ingress">
      Helsinki on toimiva ja turvallinen opiskelukaupunki. Opiskelijalle se tarjoaa monenlaisia vapaa-ajanviettomahdollisuuksia sekä vilkkaan opiskelijaelämän. Tutustu yliopistoon, opiskeluun ja Helsinkiin.
    </div>
  </div>
</a>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 20

Collapse Section

Section 20-1: Link grid

Grid of three links.

Paras 1%

Helsingin yliopisto kuuluu maailman tutkimusyliopistojen parhaan 1% joukkoon

15/29

Suomen akatemian huippuyksikköä

10 500

Julkaisua vuodessa

4 621

Henkilöä opetuksessa ja tutkimuksessa

22%

Opettajista ja tutkijoista muualta kuin Suomesta

1 992

Kansainvälistä maisteri- ja tohtoriopiskelijaa

Full Screen
Collapse
<div class="link-grid">
  <a class="link-grid__item theme-prominent" href="#">
    <div class="link-grid__content">
      <div class="link-grid__figure">
        Paras 1%
      </div>
      <h4 class="link-grid__title">
        Helsingin yliopisto kuuluu maailman tutkimusyliopistojen parhaan 1% joukkoon
      </h4>
    </div>
  </a>
</div>

<div class="link-grid">
  <a class="link-grid__item" href="#">
    <div class="link-grid__content">
      <div class="link-grid__figure">
        15/29
      </div>
      <h4 class="link-grid__title">
        Suomen akatemian huippuyksikköä
      </h4>
    </div>
  </a>
<!--   <a class="link-grid__item" href="#">
    <div class="link-grid__content">
      <div class="link-grid__figure">
        19/41
      </div>
      <h4 class="link-grid__title">
        Akatemiaprofessoria
      </h4>
    </div>
  </a> -->
  <a class="link-grid__item" href="#">
    <div class="link-grid__content">
      <div class="link-grid__figure">
        10 500
      </div>
      <h4 class="link-grid__title">
        Julkaisua vuodessa
      </h4>
    </div>
  </a>
</div>

<div class="link-grid">
  <a class="link-grid__item" href="#">
    <div class="link-grid__content">
      <div class="link-grid__figure">
        4 621
      </div>
      <h4 class="link-grid__title">
        Henkilöä opetuksessa ja tutkimuksessa
      </h4>
    </div>
  </a>
  <a class="link-grid__item" href="#">
    <div class="link-grid__content">
      <div class="link-grid__figure">
        22%
      </div>
      <h4 class="link-grid__title">
        Opettajista ja tutkijoista muualta kuin Suomesta
      </h4>
    </div>
  </a>
  <a class="link-grid__item" href="#">
    <div class="link-grid__content">
      <div class="link-grid__figure">
        1 992
      </div>
      <h4 class="link-grid__title">
        Kansainvälistä maisteri- ja tohtoriopiskelijaa
      </h4>
    </div>
  </a>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 21

Collapse Section

Section 21-1: Video player

Katso video
Full Screen
Collapse
<div class="video-player">
  <a class="video-player__play" href="#">Katso video</a>
  <div class="video-player__content">
    <div class="video-player__image" style="background-image: url('http://local.uusiwww.helsinki.fi/sites/default/files/opiskelijoita_2608-13_1_photo_hy_ari_aalto_testi_0.jpg');">
      <!-- <img typeof="foaf:Image" src="http://local.uusiwww.helsinki.fi/sites/default/files/opiskelijoita_2608-13_1_photo_hy_ari_aalto_testi_0.jpg" width="1920" height="620" alt=""> -->
    </div>
    <div class="video-player__video"><iframe class="" src="//www.youtube.com/embed/ukWiKrTlMzQ?width=640&height=360&autoplay=0&vq=large&rel=0&controls=1&autohide=2&showinfo=1&modestbranding=0&theme=dark&iv_load_policy=1&wmode=opaque" width="640" height="360" frameborder="0" allowfullscreen=""></iframe></div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy

University of Helsinki: 22

Collapse Section

Section 22-1: Media item

A media item shows a picture, content and (optional) action link.

Mikael Foigelholm


Professor of nutrition science

mikael.folgelholm@helsinki.fi
Link text
Follow

Mikael Foigelholm


Professor of nutrition science
 / Vice President Professor Life Coach Student Manager of nutrition science
mikael.folgelholm@helsinki.fi
Link text

Mikael Foigelholm


Professor of nutrition science

mikael.folgelholm@helsinki.fi
Link text
Follow
Full Screen
Collapse
<div class="media-item">
  <div class="media-item__image">
  </div>
  <div class="media-item__middle">
    <div class="media-item__content">
      <h4 class="media-item__heading">Mikael Foigelholm
</h4>
      <div class="media-item__subheading">Professor of nutrition science
</div>
      <div class="media-item__link"><a href="#" target="_blank">mikael.folgelholm@helsinki.fi</a></div>
      <div class="media-item__sublink"><a href="#" target="_blank">Link text</a></div>
    </div>
    <div class="media-item__action"><a href="#" class="label">Follow</a></div>
  </div>
</div>
<div class="media-item">
  <div class="media-item__image"><img src="images/square_250x250.jpg">
  </div>
  <div class="media-item__middle">
    <div class="media-item__content">
      <h4 class="media-item__heading">Mikael Foigelholm
</h4>
      <div class="media-item__subheading">Professor of nutrition science
 / Vice President Professor Life Coach Student Manager of nutrition science</div>
      <div class="media-item__link"><a href="#" target="_blank">mikael.folgelholm@helsinki.fi</a></div>
      <div class="media-item__sublink"><a href="#" target="_blank">Link text</a></div>
    </div>
  </div>
</div>
<div class="media-item">
  <div class="media-item__image"><img src="images/square_250x250.jpg">
  </div>
  <div class="media-item__middle">
    <div class="media-item__content">
      <h4 class="media-item__heading">Mikael Foigelholm
</h4>
      <div class="media-item__subheading">Professor of nutrition science
</div>
      <div class="media-item__link"><a href="#" target="_blank">mikael.folgelholm@helsinki.fi</a></div>
      <div class="media-item__sublink"><a href="#" target="_blank">Link text</a></div>
    </div>
    <div class="media-item__action"><a href="#" class="label">Follow</a></div>
  </div>
</div>

Code block selected, Ctrl+C/Cmd+C to copy