Typography

Document Font

Lead Alliance Standard Font: Roboto

Word break

csstagumlangewörterumzubrechenvorallembeiurls

Text Wrapping

Dieser Text ignoriert den Container und geht weiter.

Text Overflow

Dieser Text bricht um und geht in eine neue Zeile.

Text Kürzen

Dieser Text wird automatisch gekürzt.

Text Link

Text Text Text Text Text Link Inhalt Text Text Text Text Text

italic Text

Text Text Text Text Text Text Text

Text Text

Class Reference

SASS/CSS	Erklärung
`$font-family-roboto`	Roboto, sans serif
`$tx-font-weights`	"thin": 100, "light": 300, "regular": 400, "medium": 500, "bold": 700, "black": 900
`<span><a href="#">Link Inhalt</a></span>`	Styling für Links in Textabschnitten, div, Datatable, etc.
`class="text-break"`	Bricht Wörter um, vor allem hilfreich für lange URL´s, sollte sparsam verwendet werden
`class="text-wrap"`	Bricht Sätze um
`class="text-nowrap"`	Bricht nicht um und ignoriert die Container Klassen
`class="text-truncate"`	Der Text wird gekürzt
`<em> </em> <i> </i>`	kursiver Text
`class="text-italic"`	kursiver Text

Heading tags

Heading 1

Lorem ipsum dolor sit amet

Heading 2

Lorem ipsum dolor sit amet

Heading 3

Lorem ipsum dolor sit amet

Heading 4

Lorem ipsum dolor sit amet

Heading 5

Lorem ipsum dolor sit amet

Heading 6

Lorem ipsum dolor sit amet

Paragraph Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan ligula in ex aliquam, id blandit mi mattis. Nam vulputate mollis ultrices. Suspendisse iaculis magna sed magna molestie tristique in in erat. Curabitur sollicitudin interdum convallis. Duis mattis, leo non molestie porttitor, enim sapien eleifend eros, vitae dignissim eros purus quis nulla. Suspendisse fermentum pulvinar eleifend. Nulla quis orci vulputate, mollis est et, dictum sem. Fusce aliquet, lacus id porttitor cursus, magna lectus volutpat metus, nec ornare felis elit ac tellus. Ut faucibus nec sem eget facilisis. Etiam facilisis ipsum non leo pulvinar sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi blandit lobortis egestas. Duis et magna nunc. Sed accumsan et purus id molestie. Integer aliquam quam elit, ac dapibus mauris feugiat sit amet. Curabitur id imperdiet ex, vel maximus ipsum. Donec ut quam faucibus, rutrum enim vitae, posuere orci. Proin tincidunt sed eros vel lacinia. Donec in consectetur turpis, ut bibendum nisl. Aenean gravida efficitur ligula, et iaculis eros eleifend ut.

Source Code


<h1><h1/>
<h2><h2/>
<h3><h3/>
<h4><h4/>
<h5><h5/>
<h6><h6/>
<p><p/>