UiKit - Typography

Programmierhilfe für static Content, nicht für Produktivbetrieb ! - © D.H. 2026

HTML Entity Konverterter

Bei Neuaufnahme von Code:

HTML Entity Konverterter

UIkit

Get familiar with the basic setup and overview of UIkit:

UIkit Documentation

Auflösungen für Bilder

Bildschirmauflösungen beschreiben die Anzahl der Pixel, die ein Bildschirm horizontal und vertikal anzeigen kann, und sind ein wichtiger Faktor für die Bildqualität. Je höher die Auflösung, desto schärfer und detaillierter das Bild. Gängige Bildschirmauflösungen:

SD (768x576): Standard Definition, oft für ältere Geräte
OG (1200x630) Open Graph beste Größe für WhatsApp und Facebook
HD Ready (1280x720): High Definition ready, auch Half HD genannt, für kleinere Bildschirme
Full HD (1920x1080): Der Standard für viele Anwendungen, bietet scharfe Bilder und Details
Quad HD (2560x1440): Zwischen Full HD und 4K, ideal für Gaming und professionelle Anwendungen
4K UHD (3840x2160): Ideal für Videobearbeitung und immersive Gaming-Erlebnisse
8K UHD (7680x4320): Sehr hohe Auflösung, die noch selten eingesetzt wird

Hinweistext: JEvents

entfällt !

Code: <span style="color:red"><i class="fa-regular fa-circle-xmark"></i> <b>entfällt !</b></span>

neues Datum !

Code: <span style="color:red"><i class="fa fa-calendar blink"></i> <b>neues Datum !</b></span>

neue Zeit !

Code: <span style="color:red"><i class="fa-regular fa-clock blink"></i> <b>neue Zeit !</b></span>

static - Seitenüberschrift

Horizontale Linie mit grauem Balken unter <hx class="ul-msw-haedline-1">

Schullaufbahnberatung

Code: <h2 class="uk-msw-headline-1"><i class="fa fa-arrow-up-right-dots"></i> Schullaufbahnberatung</h2>

Anreisser Überschrift mit grauem/roten Balken

Überschrift mit Anreisserbalken grau

Code: <h4 class="uk-msw-bar-grey">Überschrift mit Anreisserbalken</h4>

Überschrift mit Anreisserbalken rot

Code: <h4 class="uk-msw-bar-red">Überschrift mit Anreisserbalken</h4>

Klappt mit allen Tags, Klasse ist nicht auf h4 beschränkt.

Artikelhinweise unten

Badge mit grauem Hintergrund rechteckig mit Fahne unter Artikel Hinweis

- mit Link

Hinweis:

Weitere Bilder und Informamtionen auf den Seiten der Linktext
Hinweistext: Lore Ipsum....

Code:
<div style="margin-top: 5px;" class="rib-alert">
 <div class="rib-hinweis">Hinweis:</div>Weitere Bilder und Informamtionen auf den Seiten der <a href="#" target="_blank"><i class="fa-solid fa-arrow-up-right-from-square fa"></i> Linktext</a><br />Hinweistext: Lore Ipsum....
</div>

- ohne Link

Hinweis:

Hinweistext

Code:
<div style="margin-top: 25px;" class="rib-alert">
 <div class="rib-hinweis">Hinweis:</div>Hinweistext
</div>

- andere Farbe im Ribbon

Hinweis:

Hinweistext

Code:
<div style="margin-top: 5px;" class="rib-alert">
  <div class="rib-hinweis" style="background-color: red">Hinweis:</div>Hinweistext
</div>

- Text und Bilder

Artikeltext und Bilder:

Name

Code:
<div style="margin-top: 25px;" class="rib-alert">
 <div class="rib-hinweis">Artikeltext und Bilder:</div><b>Name</b>
</div>

- mit beidem

Weiterführende Links:

Vollbrand Wohnhaus in Wernsbach: Hompepage der FF Georgensgmünd

Hinweis:

Artikeltext und Bilder: Dietmar Hättig

Code:
<div style="margin-top: 25px;" class="rib-alert">
 <div class="rib-hinweis">Weiterführende Links:</div>Vollbrand Wohnhaus in Wernsbach: <a href="#" target="_blank"><i class="fa-solid fa-arrow-up-right-from-square fa"></i> Hompepage der FF Georgensgmünd<br><br>
 <div class="rib-hinweis">Hinweis:</div>Artikeltext und Bilder: Dietmar Hättig
</div>

Link Button

Download

Code: <a href="#"><i class="fa fa-download"></i> Download</a>

Sie erhalten hier weitere Infomationen

Code: <a href="#"><i class="fa fa-external-link"></i> weitere Informationen</a>

UI-Kit Dokumentation

Code: <a class="uk-button" href="#" target="_blank"><i class="fa fa-external-link"></i> UI-Kit Dokumentation</a>

Button

Buttontext

Code:
<a class="uk-button" href="#">Buttontext</a> oder class="as-readmore"

Badge

Text

Code:
  <span class="uk-msw-badge">Text</span>

Horizontale Linien

Code:
  <hr class="style-one">

Code:
  <hr class="style-two">