Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

HTML

									
										<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>  
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5> 
<h6>Heading Level 6</h6>

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

HTML

									
										<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>

Ingressi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non nulla eget massa faucibus egestas. Aenean nec pretium purus. In faucibus tortor at sem molestie, ut commodo tellus placerat. Nam vel lectus felis. Integer id auctor dui, eget consectetur mauris. Pellentesque ipsum mauris, euismod non leo id, auctor lobortis dui. Integer et eros mattis, vestibulum neque ut, lacinia nisl.

HTML

									
										<p class="ingressi">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non nulla eget massa faucibus egestas. Aenean nec pretium purus. In faucibus tortor at sem molestie, ut commodo tellus placerat. Nam vel lectus felis. Integer id auctor dui, eget consectetur mauris. Pellentesque ipsum mauris, euismod non leo id, auctor lobortis dui. Integer et eros mattis, vestibulum neque ut, lacinia nisl.
</p>

Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

~~This text is deleted~~ and This text is inserted

~~This text has a strikethrough~~

Superscript^®

Subscript for things like H₂O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variarble element, such as x = y

HTML

									
										<div class="text">
	<p><a href="#">This is a text link</a></p>

	<p><strong>Strong is used to indicate strong importance</strong></p>

	<p><em>This text has added emphasis</em></p>

	<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>

	<p>The <i>i element</i> is text that is set off from the normal text</p>

	<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>

	<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>

	<p><s>This text has a strikethrough</s></p>

	<p>Superscript<sup>®</sup></p>

	<p>Subscript for things like H<sub>2</sub>O</p>

	<p><small>This small text is small for for fine print, etc.</small></p>

	<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>

	<p>Keybord input: <kbd>Cmd</kbd></p>

	<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>

	<p><cite>This is a citation</cite>

	</p><p>The <dfn>dfn element</dfn> indicates a definition.</p>

	<p>The <mark>mark element</mark> indicates a highlight</p>

	<p><code>This is what inline code looks like.</code></p>

	<p><samp>This is sample output from a computer program</samp></p>

	<p>The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p>
</div><!--end .text-->

Fadeout Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis iaculis viverra. Quisque mollis vestibulum justo, a aliquam lacus sodales quis. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor. Nunc ligula sapien, bibendum nec laoreet eu, hendrerit et est. Vestibulum volutpat, tellus pretium iaculis malesuada, metus leo condimentum elit, vitae bibendum augue dolor vitae quam. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis iaculis viverra. Quisque mollis vestibulum justo, a aliquam lacus sodales quis. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor. Nunc ligula sapien, bibendum nec laoreet eu, hendrerit et est. Vestibulum volutpat, tellus pretium iaculis malesuada, metus leo condimentum elit, vitae bibendum augue dolor vitae quam. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor.

Lue lisää

HTML

									
										<div class="fadeout">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis iaculis viverra. Quisque mollis vestibulum justo, a aliquam lacus sodales quis. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor. Nunc ligula sapien, bibendum nec laoreet eu, hendrerit et est. Vestibulum volutpat, tellus pretium iaculis malesuada, metus leo condimentum elit, vitae bibendum augue dolor vitae quam. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor.
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis iaculis viverra. Quisque mollis vestibulum justo, a aliquam lacus sodales quis. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor. Nunc ligula sapien, bibendum nec laoreet eu, hendrerit et est. Vestibulum volutpat, tellus pretium iaculis malesuada, metus leo condimentum elit, vitae bibendum augue dolor vitae quam. Proin quis aliquet enim. Etiam aliquet, augue et aliquam tristique,urna odio rhoncus metus, a imperdiet diam urna et tortor.
	</p>
	<p class="read-more"> <a href="">Lue lisää</a></p>
</div>

Helper Text

Esimerkki

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

HTML

									
										<div class="helper-container">
	<span class="icon-help" title="Example tip text." placement="top">
		Esimerkki
	</span>
	<p class="helper-text small is-vishidden">Tässä aputeksti. Aputeksti auttaa suuresti käyttäjää.</p>
</div>

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

HTML

Paragraph

HTML

Ingressi

HTML

Inline Elements

HTML

Fadeout Text

HTML

Helper Text

HTML