Typografie
Standardstile für Überschriften, Absätze, semantischen Text, Blockquote und Listenelemente.
... Überschriften ...
H1 Überschrift
H2 Überschrift
H3 Überschrift
H4 Überschrift
H5 Überschrift
H6 Überschrift
<h1>H1 Überschrift</h1>
<h2>H2 Überschrift</h2>
<h3>H3 Überschrift</h3>
<h4>H4 Überschrift</h4>
<h5>H5 Überschrift</h5>
<h6>H6 Überschrift</h6>
H1 Überschrift / Hauptfarbe dunkel
H2 Überschrift / Hauptfarbe dunkel
H3 Überschrift / Hauptfarbe dunkel
H4 Überschrift / Hauptfarbe dunkel
H5 Überschrift / Hauptfarbe dunkel
H6 Überschrift / Hauptfarbe dunkel
<h1 class="primary-color-dark">H1 Überschrift</h1>
<h2 class="primary-color-dark">H2 Überschrift</h2>
<h3 class="primary-color-dark">H3 Überschrift</h3>
<h4 class="primary-color-dark">H4 Überschrift</h4>
<h5 class="primary-color-dark">H5 Überschrift</h5>
<h6 class="primary-color-dark">H6 Überschrift</h6>
H1 Überschrift / Hauptfarbe hell
H2 Überschrift / Hauptfarbe hell
H3 Überschrift / Hauptfarbe hell
H4 Überschrift / Hauptfarbe hell
H5 Überschrift / Hauptfarbe hell
H6 Überschrift / Hauptfarbe hell
<h1 class="primary-color-light">H1 Überschrift</h1>
<h2 class="primary-color-light">H2 Überschrift</h2>
<h3 class="primary-color-light">H3 Überschrift</h3>
<h4 class="primary-color-light">H4 Überschrift</h4>
<h5 class="primary-color-light">H5 Überschrift</h5>
<h6 class="primary-color-light">H6 Überschrift</h6>
... H1 Überschrift / mit Punkten ...
... H2 Überschrift / mit Punkten ...
... H3 Überschrift / mit Punkten ...
... H4 Überschrift / mit Punkten ...
... H5 Überschrift / mit Punkten ...
<h1 class="headline-dotted">H1 Überschrift / mit Punkten</h1>
<h2 class="headline-dotted">H2 Überschrift / mit Punkten</h2>
<h3 class="headline-dotted">H3 Überschrift / mit Punkten</h3>
<h4 class="headline-dotted">H4 Überschrift / mit Punkten</h4>
<h5 class="headline-dotted">H5 Überschrift / mit Punkten</h5>
<h6 class="headline-dotted">H6 Überschrift / mit Punkten</h6>
H2 Überschrift/ Schriftgröße 35px
H3 Überschrift/ Schriftgröße 35px
<h2 class="headline-35">H2 Überschrift / Schriftgröße 35px</h2>
<h3 class="headline-35">H3 Überschrift / Schriftgröße 35px</h3>
... H2 Überschrift / mit Punkten und zentriert ...
H2 Überschrift / zentriert
H2 Überschrift / zentriert / Hauptfarbe dunkel
H2 Überschrift / zentriert / Hauptfarbe hell
H2 Überschrift / zentriert / Hauptfarbe dunkel / 35px
<h2 class="text-center headline-dotted">H2 ÜBERSCHRIFT / MIT PUNKTEN UND ZENTRIERT</h2>
<h2 class="text-center">H2 ÜBERSCHRIFT / ZENTRIERT</h2>
<h2 class="text-center primary-color-dark">H2 ÜBERSCHRIFT / ZENTRIERT / HAUPTFARBE DUNKEL</h2>
<h2 class="text-center primary-color-light">H2 ÜBERSCHRIFT / ZENTRIERT / HAUPTFARBE HELL</h2>
<h2 class="text-center primary-color-dark headline-35">H2 ÜBERSCHRIFT / ZENTRIERT / HAUPTFARBE DUNKEL / 35PX</h2>
... Links/Buttons ...
Button Button (Primary) Button (Link) Button (Success) Button (Error)<a href="" class="btn">Button</a>
<a href="" class="btn btn-primary">Button (Primary)</a>
<a href="" class="btn btn-link">Button (Link)</a>
<a href="" class="btn btn-success">Button (Success)</a>
<a href="" class="btn btn-error">Button (Error)</a>
<a href="" class="btn btn-sm">Button (klein)</a>
<a href="" class="btn btn-sm btn-primary">Button (primary / klein)</a>
<a href="" class="btn btn-lg">Button (groß)</a>
<a href="" class="btn btn-lg btn-primary">Button (primary / groß)</a>
<a href="" class="btn btn-block">Button (fullwidth)</a>
<a href="" class="btn btn-block btn-primary btn-lg">Button (fullwidth / primary / groß)</a>
Weitere Textelemente
Übersicht von weiteren Textelementen, wie Listen und Textblöcke.
... Texte ...
Dieser Text wird nur in Großbuchstaben ausgegeben.
<div class="text-uppercase">
Dieser Text wird in Großbuchstaben ausgegeben.
</div>
Dieser Text wird nur in Kleinbuchstaben ausgegeben.
<div class="text-lowercase">
Dieser Text wird in Kleinbuchstaben ausgegeben.
</div>
Jeder Anfangsbuchstabe wird großgeschrieben.
<div class="text-capitalize">
Jeder Anfangsbuchstabe wird großgeschrieben.
</div>
... Listen ...
Nummerierte Liste
- Informationen reduzieren
- Code mehrfach verwenden
- Vorhandene Materialien nutzen
Unnummerierte Liste
- Informationen reduzieren
- Code mehrfach verwenden
- Vorhandene Materialien nutzen
Stundenplan
Mittwoch |
---|
Grade 1 (Alter 7 bis 8) 13:30-14:30 |
Grade 3 (Alter 10 bis 11) |
Grade 4 (Alter 12 bis 13) |
Grade 5 (Alter ab 13) |
Talentförderung |
Donnerstag |
---|
|
Grade 2 (Alter 9 bis 10) |
Grade 4 (Alter 12 bis 14) |
Intermediate (Alter ab 14) |
Advanced Foundation (Alter ab 15) |
Freitag |
---|
Pre-/Primary (Alter 5) 14:45-15:45 |
Primary (Alter 6 bis 7) |
Jazztanz Kinder (Alter ab 9) |
Grade 5 (Alter ab 13) |
Yoga Flow (Alter ab 17) |