Typografie

Überschriften

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Paragraphs

Lorem dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

Markdown Semantic Text Elements

<strong>
Bold
<em>
Italic
<del>
Deleted
<code>
Inline Code

HTML Semantic Text Elements

I18N <abbr>

Citation <cite>

Ctrl + S <kbd>

TextSuperscripted<sup>

TextSubscripted<sub>

Underlined <u>

Highlighted<mark>

20:14<time>

x = y + 2 <var>

Blockquote

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

- Bill Gates

Unordered List

  • list item 1
  • list item 2
    • list item 2.1
    • list item 2.2
    • list item 2.3
  • list item 3

Ordered List

  1. list item 1
  2. list item 2
    1. list item 2.1
    2. list item 2.2
    3. list item 2.3
  3. list item 3

Table

Name Genre Release date
The Shawshank Redemption Crime, Drama 14 October 1994
The Godfather Crime, Drama 24 March 1972
Schindler's List Biography, Drama, History 4 February 1994
Se7en Crime, Drama, Mystery 22 September 1995

Box-Klassen

The notices styles are actually provided by the markdown-notices plugin but are useful enough to include here:

This is a warning notification

<div class="box warning">...</div>

This is a error notification

<div class="box error">...</div>

This is a default notification

<div class="box info">...</div>

This is a success notification

<div class="box success">...</div>

Standardklassen zur Positionierung und Hervorhebung

Boxtypen

Normale Box: box info small

Kleine Box: smallbox info small

Normale Box: box success small

Kleine Box: smallbox success small

Normale Box: box warning small

Kleine Box: smallbox warning small

Normale Box: box error small

Kleine Box: smallbox error small

Here's a box

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Button small

And another box

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Button large

This is box 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Listentypen

Neben den normalen Listentypen ul, ol, und dl gibt es speziell gestaltete Listen, die im folgenden aufgelistet werden.

Liste "ul.nobullet"

  • list item 1
  • list item 2
  • list item 3

Liste "ul.boxlist3"

Boxliste, welche die Listenelemente in drei Spalten darstellt. In folgenden ohne weitere Formatierung: 

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6

Folgende Boxliste verwendet DIV-Container mit den Klasse "box info", "big" für große Schrift und "aligncenter", um den Text zu zentrieren.

  • Wohnzimmer
  • Esszimmer und Küche
  • Schlaf- und Kinder­zimmer
  • Badezimmer
  • Flure und Garderoben
  • Zimmer mit Dach­schrägen
  • Büro und Arbeit
  • Lager und Abstellräume
  • Gastronomie und Gewerbe

Liste "inline" für List in horizontaler Reihe

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6

Liste "explanation" für Erläuterungen

Begriff
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
Begriff 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
Begriff 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Liste "pricing" für Preisangaben

Consectetur adipisicing elit sed do eiusmod:
99,99 €
Ut enim ad minim veniam quis nostrud:
1,99 €
Lorem ipsum dolor sit amet consectetur adipisicing:
1.999,97

Schatten

Diese Schatten sind von Googles Materialdesign inspiriert. Verwendet werden Schatten entweder über SCSS-Mixin "@include shadow-3dp()" oder über die Klasse "shadow-3dp".

  • @include shadow-2dp()
  • @include shadow-3dp()
  • @include shadow-4dp()
  • @include shadow-6dp()
  • @include shadow-8dp()
  • @include shadow-16dp()
  • focus-shadow()
  • noshadow()