Übersicht GLRR-Styles

Diese Seite dient als interne Dokumentation wiederverwendbarer Designelemente der Homepage der Georg-Ludwig-Rexroth-Realschule Lohr.

So verwendest du das System

1. Das gewünschte Element auswählen.
2. Den HTML-Code kopieren.
3. In einen Artikel einfügen.
4. Das Aussehen übernimmt automatisch das hinterlegte Stylesheet bluebusiness.css.

Verwendete Designelemente

• Hero-Banner
• Informationsboxen
• Karten-Layouts
• Button-Gruppen
• Galerien
• Hinweisboxen
• Kontaktblöcke
• Tabellen
• Akkordeons
• Call-to-Action-Bereiche

Hinweis:
Alle Beispiele sind ausschließlich für die interne Verwendung gedacht und können beliebig erweitert oder angepasst werden.

Infoboxen

Infoboxen dienen dazu, wichtige Informationen optisch hervorzuheben. Sie eignen sich für allgemeine Hinweise, Erfolgsmeldungen oder Warnungen und sorgen für eine einheitliche Darstellung auf der Homepage.

Information

Die CSS-Klasse .glrr-info wird für allgemeine Hinweise und neutrale Informationen verwendet.

HTML-Code

<div class="glrr-info">
    <strong>Information</strong><br>
    Dies ist eine allgemeine Infobox für wichtige Hinweise.
</div>

Erfolg

Die CSS-Klasse .glrr-success dient zur Darstellung erfolgreicher Aktionen oder positiver Rückmeldungen.

HTML-Code

<div class="glrr-success">
    <strong>Erfolg</strong><br>
    Die Aktion wurde erfolgreich abgeschlossen.
</div>

Warnung

Die CSS-Klasse .glrr-warning wird für Warnungen oder besonders wichtige Hinweise verwendet.

HTML-Code

<div class="glrr-warning">
    <strong>Achtung</strong><br>
    Bitte beachten Sie die folgenden Hinweise.
</div>

Buttons

Buttons dienen dazu, wichtige Aktionen auf der Homepage hervorzuheben. Sie werden für Links zu Formularen, Downloads, Anmeldungen oder weiterführenden Informationen verwendet. Verwenden Sie Buttons sparsam und nur für Aktionen mit besonderer Bedeutung.

Primärbutton

Die CSS-Klassen glrr-button glrr-button-primary kennzeichnen die wichtigste Aktion einer Seite. Sie sollte nur einmal pro Inhaltsbereich verwendet werden.

Mehr erfahren

HTML-Code

<a href="#" class="glrr-button glrr-button-primary">
    Mehr erfahren
</a>

Sekundärbutton

Die CSS-Klassen glrr-button glrr-button-secondary dienen für alternative oder weniger wichtige Aktionen.

Weitere Informationen

HTML-Code

<a href="#" class="glrr-button glrr-button-secondary">
    Weitere Informationen
</a>

Erfolgsbutton

Die CSS-Klassen glrr-button glrr-button-success werden für positive Aktionen oder Bestätigungen verwendet.

Anmeldung abschließen

HTML-Code

<a href="#" class="glrr-button glrr-button-success">
    Anmeldung abschließen
</a>

Warnbutton

Die CSS-Klassen glrr-button glrr-button-warning eignen sich für Aktionen, die besondere Aufmerksamkeit erfordern.

Jetzt beachten

HTML-Code

<a href="#" class="glrr-button glrr-button-warning">
    Jetzt beachten
</a>

Mailbutton

Die CSS-Klassen glrr-button glrr-button-mail werden für Kontaktaktionen per E-Mail verwendet. Sie eignen sich besonders für Ansprechpartner, Sekretariat oder Funktionspostfächer.

E-Mail an das Sekretariat

HTML-Code

<a href="mailto:verwaltung@rs-lohr.de" class="glrr-button glrr-button-mail">
    E-Mail an das Sekretariat
</a>

Linkfelder

Linkfelder sind großflächige, klickbare Bereiche für besonders wichtige Verlinkungen. Sie eignen sich beispielsweise für Anmeldungen, Formulare, Downloads oder zentrale Informationen. Verwenden Sie Linkfelder sparsam und nur für Inhalte mit hoher Bedeutung.

Einfaches Linkfeld

Die CSS-Klasse glrr-linkfield erzeugt ein großflächiges Linkelement. Der Titel wird mit glrr-linkfield-title, der Beschreibungstext mit glrr-linkfield-text ausgezeichnet.

Anmeldung zum Übertritt in die 5. Jahrgangsstufe

HTML-Code

<a href="#" class="glrr-linkfield">
    <span class="glrr-linkfield-title">
        Anmeldung zum Übertritt
    </span>
    <span class="glrr-linkfield-text">
        in die 5. Jahrgangsstufe
    </span>
</a>

Linkfeld mit längerer Beschreibung

Das Linkfeld kann auch für ausführlichere Informationen verwendet werden. Die Gestaltung bleibt unabhängig von der Textlänge erhalten.

Anmeldung zum Eintritt Informationen und Formulare für Schülerinnen und Schüler der 6. bis 10. Jahrgangsstufe

HTML-Code

<a href="#" class="glrr-linkfield">
    <span class="glrr-linkfield-title">
        Anmeldung zum Eintritt
    </span>
    <span class="glrr-linkfield-text">
        Informationen und Formulare für Schülerinnen und Schüler
        der 6. bis 10. Jahrgangsstufe
    </span>
</a>

Glaspanels

Glaspanels dienen dazu, Inhalte besonders hochwertig hervorzuheben. Durch einen leicht transparenten Hintergrund und einen dezenten Weichzeichner entsteht ein moderner Glassmorphism-Effekt. Besonders gut wirken Glaspanels auf farbigen Flächen oder Hintergrundgrafiken.

Hinweis
Verwenden Sie Glaspanels sparsam für wichtige Informationen, Terminübersichten oder zentrale Hinweise. Auf weißen Hintergründen ist der Glaseffekt nur eingeschränkt sichtbar. Für die Dokumentation wird deshalb ein farbiger Hintergrund verwendet.

Beispiel

Die CSS-Klasse glrr-glasspanel erzeugt ein halbtransparentes Panel mit leichtem Weichzeichner.

HTML-Code

<div style="padding:40px;
            background:linear-gradient(135deg,#4a8fd4,#68aee6);
            border-radius:12px;">

    <div class="glrr-glasspanel">

        <h2>Wichtige Informationen</h2>

        <ul>
            <li>
                <strong>Sprechzeiten während der Sommerferien</strong><br>
                03.08.2026 bis 07.08.2026<br>
                jeweils 09:00 bis 12:00 Uhr
            </li>

            <li>
                <strong>Nach-, Feststellungs- und Aufnahmeprüfungen</strong><br>
                10.09.2026 bis 11.09.2026
            </li>

            <li>
                <strong>Erster Unterrichtstag</strong><br>
                Dienstag, 15.09.2026
            </li>
        </ul>

    </div>

</div>

Abschnittsüberschrift Elternbrief - Gold / Glossy

<h3 class="glrr-section-title">
    Wahlunterrichte am Nachmittag
</h3>