Startseite /
Grid, UI & Typo Elements

Headings

H-Tags

Alle HTML headings, <h1> bis <h6> verfügbar.

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

Seitentitel

This Is a Pagetitle in Uppercase

<div class="page-title">
<h1>This Is a Pagetitle in Uppercase</h1>
</div>

Sektions-Titel mit Icon

Section Title With Icon

<h2 class="section-title">Section Title With Line</h2>

Sektions-Titel Einfach

Section Title Simple

<h2 class="section-title simple">Section Title Simple</h2>

Sektions-Titel Boxed

Section Title Boxed

<h2 class="section-title simple boxed">Section Title Boxed</h2>

Buttons

Alle Buttons

Styles der unterschiedlichen Buttons, als a oder button möglich.

Button Primary Button Secondary Button Outline Disabled

<a href="" class="button">Button Primary</a>
<a href="" class="button button-secondary">Button Secondary</a>
<a href="" class="button button-outline">Button Outline</a>
<a href="" class="button disabled">Disabled</a>

Listen & Tabellen

UL, OL Listen

Standard-Styles für, <ul> und <ol> Listen.

Unsortierte Listen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

Sortierte Listen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
2. Aliquam tincidunt mauris eu risus.
3. Vestibulum auctor dapibus neque.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

Tabellen

#	First Name	Last Name	Username
1	John	Doe	JohnDoe
2	Jane	Doe	JaneDoe
3	Bob	Doe	BobDoe

Text Helfer

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Großer Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<p class="large-text"gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

Kleiner Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</small>

Grid System

12er Grid-System

Einfaches und responsives Grid-System.

COL 2

COL 3

COL 4

COL 6

COL 12

COL 4

COL 8

<!-- 4 Columns 2+2+2+2+2+2 -->
<div class="row">
	<div class="columns col-2">COL 2</div>
	<div class="columns col-2">COL 2</div>
	<div class="columns col-2">COL 2</div>
	<div class="columns col-2">COL 2</div>
	<div class="columns col-2">COL 2</div>
	<div class="columns col-2">COL 2</div>
</div>

<div class="row">
	<div class="columns col-3">COL 3</div>
	<div class="columns col-3">COL 3</div>
	<div class="columns col-3">COL 3</div>
	<div class="columns col-3">COL 3</div>
</div>


<!-- 3 Columns 4+4+4 -->
<div class="row">
	<div class="columns col-4">COL 4</div>
	<div class="columns col-4">COL 4</div>
	<div class="columns col-4">COL 4</div>
</div>

<!-- 2 Columns 6+6 -->
<div class="row">
	<div class="columns col-6">COL 6</div>
	<div class="columns col-6">COL 6</div>
</div>

<!-- 1 Column -->
<div class="row">
	<div class="columns col-12">COL 12</div>
</div>

<!-- 2 Columns with different sizes 4+8 -->
<div class="row">
	<div class="columns col-4">COL 4</div>
	<div class="columns col-8">COL 8</div>
</div>

<!-- To remove outer padding -->
<div class="row">
	<div class="row">
		...
	</div>
</div>

Grid mit zentrierten Spalten

Für Spalten mit zentriertem Inhalt innerhalb einer Reihe, fügen Sie die Klasse equal-height hinzu.

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

<!-- 3 Columns 4+4+4 mit zentrierter Höhe-->
<div class="row equal-height">
	<div class="columns col-4">...</div>
	<div class="columns col-4">...</div>
	<div class="columns col-4">...</div>
</div>

Grid mit zentrierten Inhalten

Für Spalten mit zentriertem Inhalt innerhalb einer Reihe, fügen Sie die Klasse equal-height hinzu.

Lorem Ipsum

<!-- 3 Columns 4+4+4 mit zentrierter Höhe-->
<div class="row equal-height-content">
	<div class="columns col-4">...</div>
	<div class="columns col-4">...</div>
	<div class="columns col-4">...</div>
</div>

Container für "Volle Breite"

Um die gesamte Viewport-Breite zu nutzen, fügen Sie die Klasse full-width hinzu.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<!-- 3 Columns 4+4+4 in voller Breite -->
<div class="full-width">
	<div class="row">
		<div class="columns col-4">...</div>
		<div class="columns col-4">...</div>
		<div class="columns col-4">...</div>
	</div>
</div>

Kein Padding zwischen Spalten

Um die Abstände zwischen den einzelnen Spalten zu entfernen, fügen Sie no-col-padding hinzu.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<!-- 3 Columns 4+4+4 in voller Breite -->
<div class="row">
	<div class="columns col-6 no-col-padding">...</div>
	<div class="columns col-6 no-col-padding">...</div>
</div>

Cards

Usage

Simple Content cards.

DefaultLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

PrimaryLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

SecondaryLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Default + HoverLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Default + Small SpaceLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Default + Large SpaceLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<!-- 3 Columns 4+4+4 mit Cards -->
<div class="row">
	<div class="columns col-4">
		<div class="mi-card mi-card-default mi-card-body mi-card-shadow"><div class="mi-card-title">...</div></div>
	</div>
	<div class="columns col-4">
		<div class="mi-card mi-card-primary mi-card-body"><div class="mi-card-title">...</div></div>
	</div>
	<div class="columns col-4">
		<div class="mi-card mi-card-secondary mi-card-body"><div class="mi-card-title">...</div></div>
	</div>
</div>

<div class="row">
	<div class="columns col-4">
		<div class="mi-card mi-card-default mi-card-body mi-card-border mi-card-hover"><div class="mi-card-title">...</div></div>
	</div>
	<div class="columns col-4">
		<div class="mi-card mi-card-default mi-card-body-small mi-card-shadow"><div class="mi-card-title">...</div></div>
	</div>
	<div class="columns col-4">
		<div class="mi-card mi-card-default mi-card-body-large mi-card-shadow"><div class="mi-card-title">...</div></div>
	</div>
</div>

Media Vertical

Cards mit Bildern.

Media TopLorem ipsum dolor sit amet, consetetur sadipscing.

Media BottomLorem ipsum dolor sit amet, consetetur sadipscing.

<!-- 2 Columns 6+6 mit Cards mit Bildern oben/unten -->
<div class="row">
	<div class="columns col-6">
		<div class="mi-card mi-card-default mi-card-shadow">
			<div class="mi-card-media-top"><img src="..."></div>
			<div class="mi-card-body">...</div>
		</div>
	</div>
	<div class="columns col-6">
		<div class="mi-card mi-card-default mi-card-shadow">
			<div class="mi-card-body">...</div>
			<div class="mi-card-media-bottom"><img src="..."></div>
		</div>
	</div>
</div>

Media Horizontal

Cards mit Bildern.

Media LeftLorem ipsum dolor sit amet, consetetur sadipscing.

Media RightLorem ipsum dolor sit amet, consetetur sadipscing.

<!-- 2 Columns 6+6 mit Cards mit Bildern daneben -->
<div class="row">
	<div class="columns col-6">
		<div class="mi-card mi-card-default mi-card-shadow mi-card-media-container">
			<div class="mi-card-media-left mi-cover-container">
				<img class="mi-cover" src="...">
				<canvas width="600" height="400">
			</div>
			<div class="mi-card-body">...</div>
		</div>
	</div>
	<div class="columns col-6">
		<div class="mi-card mi-card-default mi-card-shadow mi-card-media-container">
			<div class="mi-card-media-right mi-cover-container">
				<img class="mi-cover" src="...">
				<canvas width="600" height="400">
			</div>
			<div class="mi-card-body">...</div>
		</div>
	</div>
</div>

Media LeftLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<!-- 2 Columns 6+6 mit Cards mit Bildern daneben auf voller Breite -->
<div class="row">
	<div class="columns col-6 no-col-padding">
		<div class="mi-card mi-card-secondary mi-card-media-container">
			<div class="mi-card-media-left mi-cover-container">
				<img class="mi-cover" src="...">
				<canvas width="800" height="400">
			</div>
			<div class="mi-card-body">...</div>
		</div>
	</div>
	<div class="columns col-6 no-col-padding">
		<div class="mi-card mi-card-default mi-card-media-container">
			<div class="mi-card-media-left mi-cover-container">
				<img class="mi-cover" src="...">
				<canvas width="800" height="400">
			</div>
			<div class="mi-card-body">...</div>
		</div>
	</div>
</div>

Videos

Responsive Videos

Für ein responsives Video (YouTube, Vimeo etc.), fügen Sie die Klasse responsive-video hinzu.

<div class="responsive-video">
<iframe src="https://player.vimeo.com/video/249816684?title=0&byline=0&portrait=0&autoplay=0" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

This Is a Pagetitle in Uppercase

Section Title With Icon

Section Title Simple

Section Title Boxed

Können wir helfen?

Das Regalsystem