Grundlagen

Farben

Primary

.bg-primary

Mobility

.bg-mobility

Energy

.bg-energy

Baths

.bg-baths

Green

.bg-green

Internet

.bg-internet

Internet Sekundär

.bg-internet-secondary

Internet Tertiär

.bg-internet-tertiary

Water

.bg-water

Coprate Grau

.bg-coporategray

Farben mit Verlauf

Primary Gradient

.bg-primary-gradient

Mobility Gradient

.bg-mobility-gradient

Energy Gradient

.bg-energy-gradient

Baths Gradient

.bg-baths-gradient

Green Gradient

.bg-green-gradient

Internet Gradient

.bg-internet-gradient

Internet Sekundär Gradient

.bg-internet-secondary-gradient

Internet Tertiär Gradient

.bg-internet-tertiary-gradient

Water Gradient

.bg-water-gradient

Future Gradient

.bg-future-gradient

Future Gradient Horizontal

.bg-future-gradient-x

Typographie

Überschriften

h1. Überschrift

h2. Überschrift

h3. Überschrift

h4. Überschrift

h5. Überschrift

h6. Überschrift

<h1>h1. Überschrift</h1>
<h2>h2. Überschrift</h2>
<h3>h3. Überschrift</h3>
<h4>h4. Überschrift</h4>
<h5>h5. Überschrift</h5>
<h6>h6. Überschrift</h6>

Display-Überschriften

Display 1

Display 2

Display 3

Display 4

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Big-Überschriften

Big 1

Big 2

<h1 class="big-1">Big 1</h1>
<h1 class="big-2">Big 2</h1>

Text

Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

<p class="lead">Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>

Animierte Zahl

87431

<p class="big-number">87431</p>

Handwriting

ZukunftBa

<p><span class="font-naturalscript">Zukunft</span>Ba</p>
<p><span class="text-naturalscript">Zukunft</span>Ba</p>