Relume Library Style Guide

Version 1.4 - Client-First V2

Client-First-Dokumente

Typografie

HTML-Überschriften-Tags
HTML-Tags definieren Standard-Überschriftenstile.

Alle H1-Überschriften

Rubrik 1

Alle H2-Überschriften

Rubrik 2

Alle H3-Überschriften

Rubrik 3

Alle H4-Rubriken

Rubrik 4

Alle H5 Rubriken

Rubrik 5

Alle H6 Rubriken

Rubrik 6

Überschriftenklassen
Überschriftenklassen, wenn der Typografiestil nicht mit dem Standard-HTML-Tag übereinstimmt.

Überschrift-Stil-h1

64px | Überschrift-Stil-h1

Überschrift-Stil-h2

56px | Überschrift-Stil-h2

Überschrift-Stil-h3

36px | Überschrift-Stil-h3

Überschrift-Stil-h4

28px | Überschrift-Stil-h4

Überschrift-Stil-h5

24px | Überschrift-Stil-h4

Überschrift-Stil-h6

Andere HTML-Tags
HTML-Tags definieren Standardtextstile.

Alle Paragraphen

Alle Links

Alle Block-Zitate

Block Zitat

Alle unsortierten Listen

Keine Aufzählungsliste
Keine Aufzählungsliste

Alle unsortierten Listen

Keine Aufzählungsliste
Keine Aufzählungsliste

Alle geordneten Listen

Keine Aufzählungsliste
Keine Aufzählungsliste
Keine Aufzählungsliste

Textgrößen
Textgrößenklassen, wenn die Größe der Typografie nicht mit dem Standard-HTML-Tag übereinstimmt.

text-size-large

28px | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-medium

24px | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-regular

18px | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-small

16px | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-tiny

14px | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-extra-tiny

12px | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Textgewichte
Textgewichtsklassen, wenn das Gewicht der Typografie nicht mit dem Standard-HTML-Tag übereinstimmt.

text-weight-xbold

text-weight-xbold (800)

text-weight-bold

text-weight-bold (700)

text-weight-semibold

text-weight-semibold (600)

text-weight-medium

text-weight-medium (500)

text-weight-normal

text-weight-normal (400)

text-weight-light

text-weight-light (300)

Textstile
Textstilklassen, wenn der Typografiestil nicht mit dem Standard-HTML-Tag übereinstimmt.

text-style-italic

text-style-strikethrough

text-style-allcaps

text-style-nowrap

text-style-quote

text-style-link

text-style-2lines

text-style-3lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-style-muted

Textausrichtung
Textausrichtungsklassen, wenn die Ausrichtung der Typografie nicht mit dem Standard-HTML-Tag übereinstimmt.

text-align-left

text-align-center

text-align-right

Reichhaltiger Text

text-rich-text

Rubrik 1

Rubrik 2

Rubrik 3

Rubrik 4

Rubrik 5

Rubrik 6

Dies ist ein Blockzitat

Mit dem Rich-Text-Element können Sie Überschriften, Absätze, Blockzitate, Bilder und Videos an einem Ort erstellen und formatieren, anstatt sie einzeln hinzufügen und formatieren zu müssen. Mit einem Doppelklick können Sie einfach Inhalte erstellen.

Dies ist ein Link innerhalb eines Rich Textes

Posten auflisten
Posten auflisten
Posten auflisten

Posten auflisten
Posten auflisten
Posten auflisten

Farben

Farbpalette

ist-schwarz

ist-weiß

is-grau

Vorgefertigte Farbpaletten hinzufügen
Greifen Sie auf vorgefertigte Farbpaletten zu und fügen Sie sie unten ein.

Farbpaletten ansehen

Farbpalette anklicken und einfügen

Hintergrundfarbe
Verwalten Sie wiederkehrende Hintergrundfarben.

Hintergrundfarbe-schwarz

Hintergrundfarbe-weiß

Hintergrundfarbe-grau

hintergrundfarbe-blau

Hintergrundfarbe-hellblau

Vorgefertigte Hintergrundfarben hinzufügen
Greifen Sie auf vorgefertigte Farbpaletten zu und fügen Sie sie unten ein.

Hintergrundfarben anzeigen

Farbpalette anklicken und einfügen

Textfarbe
Verwalten Sie wiederkehrende Textfarben.

text-color-white

Text-Farbe-Schwarz

Text-Farbe-Schwarz65

Text-Farbe-Schwarz45

Text-Farbe-Schwarz65

Text-Farbe-Blau

Vorgefertigte Textfarben hinzufügen
Greifen Sie auf vorgefertigte Textfarben zu und fügen Sie sie unten ein.

Ansicht Textfarben

Farbpalette anklicken und einfügen

Auswirkungen

Box Shadows
‍Schattenermöglichen es Ihnen, Entwürfen Tiefe und Realismus zu verleihen, indem Sie Elemente auf einer Z-Achse positionieren.

Möchten Sie lernen, wie man Schattenklassen auf die Client-first Methode verwendet?

schatten-xx-klein

schatten-x-klein

schatten-klein

schatten-medium

schattengroß

schatten-xlarge

schatten-xxgroß

Animationen

slideIn-1

Von: Unten
Verzögerung: 0

DiaIn-2

Von: Unten
Verzögerung: 200

slideIn-3

Von: Unten
Verzögerung: 400

slideIn-4

Von: Unten
Verzögerung: 600

DiaIn-5

slideIn-6

slideIn-7

UI-Elemente

Buttons

Taste

Schaltfläche

Taste

ist-klein

Schaltfläche

Taste

is-secondary

Schaltfläche

Taste

is-secondary

ist-klein

Schaltfläche

Taste

is-link

Schaltfläche

Zur Verwendung auf einem dunklen Hintergrund verwenden Sie einfach die Zusatzklasse is-alternate

Taste

ist-Alternativ

Schaltfläche

Taste

ist-Alternativ

ist-klein

Schaltfläche

Taste

is-secondary

ist-Alternativ

Schaltfläche

Taste

is-secondary

ist-klein

ist-Alternativ

Schaltfläche

Taste

is-link

ist-Alternativ

Schaltfläche

Schaltflächen mit Symbolen

Taste

is-icon

Schaltfläche

Taste

ist-klein

is-icon

Schaltfläche

Taste

is-secondary

is-icon

Schaltfläche

Taste

is-secondary

ist-klein

is-icon

Schaltfläche

Taste

is-link

is-icon

Schaltfläche

Formular-Elemente

Vielen Dank! Ihr Beitrag ist eingegangen!

Ups, beim Absenden des Formulars ist etwas schief gegangen.

Icons (Bild)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

Icon-Höhe-mittel

icon-height-large

icon-height-xlarge

Icon-Höhe-benutzerdefiniert1

Symbol-1x1-xxklein

Symbol-1x1-xklein

Symbol-1x1-klein

Symbol-1x1-mittel

Symbol-1x1-groß

Symbol-1x1-xgroß

Symbol-1x1-angepasst1

Symbole (HTML-Einbettung)
HTML-Einbettungssymbole ermöglichen es Ihnen, die Farbe des Symbols beim Überfahren zu steuern.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-groß

icon-embed-xlarge

icon-embed-custom1

Struktur-Klassen

Definierte und flexible Kernstruktur, die wir auf allen oder den meisten Seiten verwenden können.

page-wrapper

main-wrapper

container-klein

container-medium

Container-groß

padding-global

Auffüll-Abschnitt-klein

padding-section-medium

padding-section-large

Tastengruppe

Maximale Breiten

Verwenden Sie die CSS-Eigenschaft max-width, um innere Inhalte auf eine maximale Breite zu beschränken.

max-width-full

max-width-full-tablet

max-width-full-mobile-landscape

max-width-full-mobile-portrait

max-width-xxlarge

max-width-xlarge

max-width-large

max-width-medium

max-width-small

max-width-xsmall

max-width-xxsmall

Auffüllungen

Richtung Klassen

Polsterung-unten

padding-top

Polsterung-vertikal

Aufpolsterung-horizontal

padding-left

padding-right

Größenklassen

Polsterung-0

padding-tiny

padding-xxsmall

padding-xsmall

Polsterung-klein

Polsterung-mittel

polsterung-groß

padding-xlarge

padding-xxlarge

padding-huge

padding-xhuge

padding-xxhuge

padding-custom1

padding-custom2

padding-custom3

Margen

Richtung Klassen

Rand-unten

Rand-oben

Rand-vertikal

Rand-horizontal

margin-left

Rand rechts

Größenklassen

Marge-0

margin-tiny

margin-xxsmall

margin-xsmall

margin-klein

margin-medium

randgroß

margin-xlarge

margin-xxlarge

margin-huge

margin-xhuge

margin-xxhuge

rand-benutzerdefiniert1

spanne-benutzerdefiniert2

spanne-benutzerdefiniert3

Abstandshalter

Einheitliches Abstandshaltersystem für das Projekt.

Abstandshalter-klein

Abstandshalter-xxklein

Abstandshalter-xklein

Abstandshalter-klein

Abstandshalter-medium

Abstandshalter-groß

Abstandshalter-xlarge

Abstandshalter-xxgroß

Abstandshalter-groß

Abstandshalter-xhuge

abstandhalter-xxhuge

Utility-Klassen

Nützliche Utility-Klassen, die wir in den meisten unserer Projekte gerne verwenden, um schneller zu bauen.

ausblenden

Dieses Element ist ausgeblendet

Versteckbares Tablet

Mobiles Porträt ausblenden

ausblenden-mobile-landschaft

Überlauf-sichtbar

Überlauf-versteckt

Überlauf-Automatik

Überlauf-Rollen

Zeiger-Ereignisse-auf

zeiger-ereignisse-aus

Ebene

div-Quadrat

abstand-sauber

ausrichten-zentrieren

z-index-1

z-index-2

display-inlineflex

Rand-oben-Automatik

Schlagzeilen

Nützliche Utility-Klassen, die wir in den meisten unserer Projekte gerne verwenden, um schneller zu bauen.

Mitte + groß

Unser Ziel

Wir kümmern uns um Sie, Ihre Reisenden und Ihr Unternehmen.

Wir von Intermundial sind seit 30 Jahren führend bei Reiselösungen und begleiten Sie in jeder Phase Ihres Unternehmens und der Reise Ihrer Reisenden, damit Sie eine sorgenfreie Reise genießen können. Wir stehen Ihnen zur Seite und sorgen dafür, dass jeder Schritt und jede Versicherung einen Unterschied macht, um den Schutz und die Zufriedenheit Ihrer Kunden sowie das Wachstum Ihres Unternehmens zu gewährleisten. Wir sorgen dafür, dass Sie ein einzigartiges Erlebnis genießen können, in der Gewissheit, dass wir gemeinsam alle Erwartungen übertreffen werden.

links + groß

Für alle Geschäftsbereiche

Maßgeschneiderte Lösungen für Ihr Unternehmen

Mitte + klein

Vereinfachen Sie Ihre Verwaltung

Nur Safer verfügt über fortschrittliche Funktionalitäten, die es größeren Unternehmen ermöglichen, ihre gesamten Versicherungsaktivitäten auf skalierbare Weise zu verwalten.

Premium-Service für Agenten und Reisende

Im Rahmen unserer Qualitätsverpflichtung und in Zusammenarbeit mit Servisegur garantieren wir, dass unsere Teams in jeder Situation oder bei jedem Vorfall die optimale Antwort geben.