Typografie
Das Typografiesystem basiert auf UIkit 3 und stellt einheitliche Schriftstile, Abstände und Hierarchien bereit.
Überschriften
Sechs Überschriftenebenen stehen zur Verfügung. UIkit bietet zusätzlich dekorative Klassen wie .uk-heading-large.
H1 – Hauptüberschrift
H2 – Abschnittsüberschrift
H3 – Unterabschnitt
H4 – Gruppenüberschrift
H5 – Kleinere Überschrift
H6 – Kleinste Überschrift
<h1 class="uk-heading-medium">H1 – Hauptüberschrift</h1>
<h2>H2 – Abschnittsüberschrift</h2>
<h3>H3 – Unterabschnitt</h3>
<h4>H4 – Gruppenüberschrift</h4>
<h5>H5 – Kleinere Überschrift</h5>
<h6>H6 – Kleinste Überschrift</h6>UIkit Heading-Klassen
Für dekorative Großüberschriften bietet UIkit eigene Klassen an, unabhängig vom HTML-Tag:
2XLarge
XLarge
Large
Medium
Small
<p class="uk-heading-2xlarge">2XLarge</p>
<p class="uk-heading-xlarge">XLarge</p>
<p class="uk-heading-large">Large</p>
<p class="uk-heading-medium">Medium</p>
<p class="uk-heading-small">Small</p>Fließtext
Dies ist ein normaler Absatz. UIkit verwendet eine optimierte Schriftgröße und Zeilenhöhe für beste Lesbarkeit auf allen Bildschirmgrößen.
Lead-Text: Einleitender Text, der größer dargestellt wird und als Intro-Absatz dient.
Small-Text: Kleinerer Text für Hinweise, Fußnoten und Hilfstexte.
<p>Normaler Absatztext</p>
<p class="uk-text-lead">Lead-Text</p>
<p class="uk-text-small">Small-Text</p>
<p class="uk-text-meta">Meta-Text</p>Textformatierungen
Fett • Kursiv • Unterstrichen • Durchgestrichen
Markierter Text • Kleiner Text • TextHochgestellt • TextTiefgestellt
Inline-Code • Tastenkürzel • HTML
Das ist ein Blockquote – ideal für Zitate, Hervorhebungen oder Kundenaussagen.
<strong>Fett</strong>
<em>Kursiv</em>
<mark>Markiert</mark>
<code>Inline-Code</code>
<kbd>Ctrl</kbd>
<blockquote class="uk-blockquote">
<p>Zitat...</p>
<footer>— Autor</footer>
</blockquote>Listen
Unsortiert
- Erstes Element
- Zweites Element
- Drittes Element
Sortiert
- Erstes Element
- Zweites Element
- Drittes Element
Mit Divider
- Erstes Element
- Zweites Element
- Drittes Element
Mit Bullet
- Erstes Element
- Zweites Element
- Drittes Element
<ul class="uk-list uk-list-disc">
<li>Element</li>
</ul>
<ul class="uk-list uk-list-divider"> ... </ul>
<ul class="uk-list uk-list-bullet"> ... </ul>Text-Utilities
UIkit bietet eine Vielzahl von Utility-Klassen für Textausrichtung, Farbe und Transformationen.
| Klasse | Wirkung | Beispiel |
|---|---|---|
| .uk-text-left | Linksbündig | Links |
| .uk-text-center | Zentriert | Mitte |
| .uk-text-right | Rechtsbündig | Rechts |
| .uk-text-bold | Fett | Fett |
| .uk-text-italic | Kursiv | Kursiv |
| .uk-text-uppercase | Großbuchstaben | Text |
| .uk-text-lowercase | Kleinbuchstaben | TEXT |
| .uk-text-primary | Primärfarbe | Primär |
| .uk-text-danger | Fehlerfarbe | Fehler |
| .uk-text-success | Erfolgsfarbe | Erfolg |
| .uk-text-warning | Warnfarbe | Warnung |
| .uk-text-muted | Gedämpft | Gedämpft |
| .uk-text-truncate | Text abschneiden | Sehr langer Text... |