Die globale Schriftgröße und der Zeilenabstand werden im "Body (All Pages)" definiert. Die jeweilige Schriftpalette kann mit body--lexware oder body--neutral ausgewählt werden.
h1 through h6 selectors are available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
This is the standard paragraph
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.
Für lange Texte wird die Merriweather mit Serifen eingesetzt. Mit der Klasse p--serif kann die Serifen Schrift ausgewählt werden.
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.
Make a paragraph stand out by adding lead
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.
Reine Textlinks können durch markieren eines Textes und Verwendung des Buttons "Insert Link" eingefügt werden. Um den Link rot zu färben und zu unterstreichen, muss dem Link die Klasse text-link hinzugefügt werden
Lorem link amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Use "Wrap with span" and choose a selector to change parts of a paragraph or other text element.
Lorem ipsum highlighted sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
For quoting blocks of content from another source within your document.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Suspendisse varius enim in eros elementum tristique.
Listen bleiben ohne zusätzliche Styles, da diese je nach Kontext eher störend sind. Zusätzliche styles können per opt-in durch eine Klasse hinzugefügt werden.
Listen, die ein Icon als Marker haben sollen müssen mit Grafiken konstruiert werden. Zuerst die Bullets der "Unordered List" im Menüpunkt "Settings" deaktivieren. Für die Konstruktion wird die Klasse list__item-img auf das "List Item" angewandt. Um dann eine bestimmte Grafik auszuwählen, wird zusätzlich eine Klasse list__item-img--check hinzugefügt, die hier im Beispiel ein "Check"-Icon zeigt. Soll ein anderes Icon eingesetzt werden, muss eine neue Klassen nach dem selben Schema angelegt werden, z.B. list__item-img--heart und dann nur die Hintergrundgrafik neu definiert werden.
icons aus dem Iconfont können auf für Listen eingesetzt werden. Es wird eine zusätzliche Klasse list__item-icon an das Icon angefügt, um den Abstand zum Text hinzuzufügen.
Listen mit mehr Weißraum und Trennlinien können durch eine zusätzliche Klasse list__item--spaced beim List Item erstellt werden.
Auf mobilen Geräten kann es immer wieder Probleme mit der Wörter-Trennung kommen. Hier kann eine automatische Trennung per CSS Abhilfe schaffen. Leider hat Chrome bei Umsetzung der CSS-Befehle noch Probleme. Das CSS muss als Code unter "Einstellungen" eingefügt werden. Die Klasse hyphenate muss anschließend der jeweiligen Section oder Element zugewiesen werden