<h1> - <h6> headings

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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

<h1> - <h6> headings with <small>

Example

Heading 1 Secondary text

Heading 2 Secondary text

Heading 3 Secondary text

Heading 4 Secondary text

Heading 5 Secondary text
Heading 6 Secondary text

<h1>Heading 1 <small class="txt-grey">Secondary text</small></h1>
<h2>Heading 2 <small class="txt-grey">Secondary text</small></h2>
<h3>Heading 3 <small class="txt-grey">Secondary text</small></h3>
<h4>Heading 4 <small class="txt-grey">Secondary text</small></h4>
<h5>Heading 5 <small class="txt-grey">Secondary text</small></h5>
<h6>Heading 6 <small class="txt-grey">Secondary text</small></h6>

Split headings

Example

Pre-heading Heading 1 Sub-heading


<h1 class="split">
	<span class="pre">Pre-heading</span>
	<span class="head">Heading 1</span>
	<span class="post">Sub-heading</span>
</h1>

<p> paragraphs

Example

Erat eum dignissim no tation magna voluptua consetetur magna. Tempor eos labore duo voluptua dolore diam eos consectetuer at ut est. Zzril luptatum aliquyam vero lorem autem feugiat dolor zzril vero dolore et sit nonummy. Consequat dolores takimata eos gubergren et et ut lorem lorem sit in lorem eos et dolor. Hendrerit eirmod est quis nulla vero ut magna ipsum nonumy in ipsum duo. Rebum ipsum ea sea. Dolores clita sit magna eleifend amet magna vero dolor sed diam justo ea lorem tempor elitr stet.

Iusto invidunt vero magna aliquyam diam diam clita justo justo clita duo tempor no. Ea vel et autem. Nulla et vel. Sit et elitr kasd id clita stet voluptua consectetuer et. Gubergren sed amet stet dolor. Dolore delenit elitr dolor diam molestie ipsum praesent et et et sit ut eos. Diam accusam delenit aliquyam amet clita et. Est invidunt duo et clita velit esse qui lorem dolores nibh amet ipsum vero consequat te consequat sanctus consetetur. Sit gubergren at aliquyam dolor voluptua accusam odio cum et dolor accusam dolor facilisi tempor et.

Vero sed illum magna duo illum voluptua vel soluta adipiscing magna et commodo diam ea. Gubergren facilisis facilisis eirmod justo tempor ea dolores dolores et. Accumsan ipsum eu tempor. Tempor et ex et nam rebum. Diam lorem duo placerat est et elit lorem stet volutpat ipsum eum tation voluptua ut. Diam consetetur blandit lorem eu blandit invidunt no vero nihil nonumy dolore dolore facilisi justo magna sit ullamcorper. Et labore enim dolore et sit.


<p>Erat eum dignissim no tation magna voluptua consetetur magna. Tempor eos labore duo voluptua dolore diam eos consectetuer at ut est. Zzril luptatum aliquyam vero lorem autem feugiat dolor zzril vero dolore et sit nonummy. Consequat dolores takimata eos gubergren et et ut lorem lorem sit in lorem eos et dolor. Hendrerit eirmod est quis nulla vero ut magna ipsum nonumy in ipsum duo. Rebum ipsum ea sea. Dolores clita sit magna eleifend amet magna vero dolor sed diam justo ea lorem tempor elitr stet.</p>
<p>Iusto invidunt vero magna aliquyam diam diam clita justo justo clita duo tempor no. Ea vel et autem. Nulla et vel. Sit et elitr kasd id clita stet voluptua consectetuer et. Gubergren sed amet stet dolor. Dolore delenit elitr dolor diam molestie ipsum praesent et et et sit ut eos. Diam accusam delenit aliquyam amet clita et. Est invidunt duo et clita velit esse qui lorem dolores nibh amet ipsum vero consequat te consequat sanctus consetetur. Sit gubergren at aliquyam dolor voluptua accusam odio cum et dolor accusam dolor facilisi tempor et.</p>
<p>Vero sed illum magna duo illum voluptua vel soluta adipiscing magna et commodo diam ea. Gubergren facilisis facilisis eirmod justo tempor ea dolores dolores et. Accumsan ipsum eu tempor. Tempor et ex et nam rebum. Diam lorem duo placerat est et elit lorem stet volutpat ipsum eum tation voluptua ut. Diam consetetur blandit lorem eu blandit invidunt no vero nihil nonumy dolore dolore facilisi justo magna sit ullamcorper. Et labore enim dolore et sit.</p>

<ul> and <ol> lists

Example
  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  • Unordered list item 4
  • Unordered list item 5

<ul>
	<li>Unordered list item 1</li>
	<li>Unordered list item 2</li>
	<li>Unordered list item 3</li>
	<li>Unordered list item 4</li>
	<li>Unordered list item 5</li>
</ul>
Example
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
  4. Ordered list item 4
  5. Ordered list item 5

<ol>
	<li>Ordered list item 1</li>
	<li>Ordered list item 2</li>
	<li>Ordered list item 3</li>
	<li>Ordered list item 4</li>
	<li>Ordered list item 5</li>
</ol>

<i>

Example

Erat eum dignissim no tation magna voluptua consetetur magna. Tempor eos labore duo voluptua dolore diam eos consectetuer at ut est. Zzril luptatum aliquyam vero lorem autem feugiat dolor zzril vero dolore et sit nonummy. Consequat dolores takimata eos gubergren et et ut lorem lorem sit in lorem eos et dolor. Hendrerit eirmod est quis nulla vero ut magna ipsum nonumy in ipsum duo. Rebum ipsum ea sea. Dolores clita sit magna eleifend amet magna vero dolor sed diam justo ea lorem tempor elitr stet.


<p>Erat eum dignissim no tation magna voluptua consetetur magna. <i>Tempor eos labore duo voluptua dolore diam eos consectetuer at ut est</i>. Zzril luptatum aliquyam vero lorem autem feugiat dolor zzril vero dolore et sit nonummy. Consequat dolores takimata eos gubergren et et ut lorem lorem sit in lorem eos et dolor. Hendrerit eirmod est quis nulla vero ut magna ipsum nonumy in ipsum duo. Rebum ipsum ea sea. Dolores clita sit magna eleifend amet magna vero dolor sed diam justo ea lorem tempor elitr stet.</p>

<mark>

Example

Erat eum dignissim no tation magna voluptua consetetur magna.


<p>Erat eum dignissim no <mark>tation</mark> magna voluptua consetetur magna. Tempor eos labore duo voluptua dolore diam eos consectetuer at ut est.</p>

<abbr>

Example

Erat eum dignissim no HTML magna voluptua consetetur magna.


<p>Erat eum dignissim no <abbr title="HyperText Markup Language">HTML</abbr> magna voluptua consetetur magna.</p>

<blockquote>

Example

Our task must be to free ourselves... by widening our circle of compassion to embrace all living creatures and the whole of nature and it's beauty.

Albert Einstein

<blockquote>
	<p>Our task must be to free ourselves... by widening our circle of compassion to embrace all living creatures and the whole of nature and it's beauty.</p>
	<footer>Albert Einstein</footer>
</blockquote>

Text colours

Classes for text colours are: txt-primary, txt-secondary, txt-tertiary, txt-grey and txt-errorRed.

Example

This text is using the primary colour.

This text is using the secondary colour.

This text is using tertiary colour.

This text is grey.

This text represents an error.


<p class="txt-primary">This text is using the primary colour.</p>
<p class="txt-secondary">This text is using the secondary colour.</p>
<p class="txt-tertiary">This text is using tertiary colour.</p>
<p class="txt-grey">This text is grey.</p>
<p class="txt-errorRed">This text represents an error.</p>