Struktur-Klassen (Für Hauptcontainer)

2 Spaltig - mit linkem Inhaltsbereich (66 % | 2% | 32 %).

Klasse "two-columns content-left". Dieser Container hat eine Breite von 66 %. Der zweite Container rechts, hat eine Breite von 32 %. Bei einer Bildschirmbreite von unter 768px, wird dieser Container unterhalb des rechten Containers angezeigt.
Beispiel:

<div class="two-columns content-left">
    <div>Inhalt 1</div>
    <div>Inhalt 2</div>
</div>

2 Spaltig - mit rechtem Inhaltsbereich (32 % | 2% | 66 %)

Klasse "two-columns content-right". Dieser Container hat eine Breite von 66 %. Der Container links, hat eine Breite von 32 %. Bei einer Bildschirmbreite von unter 768px, wird dieser Container unterhalb des linken Containers angezeigt.
Beispiel:

<div class="two-columns content-right">
    <div class="content-center" >Inhalt 1</div>
    <div>Inhalt 2</div>
</div>

2 Spaltig - gleichmäßig verteilt (49% | 2% | 49 %)

Klasse "two-columns". Dieser Container hat eine Breite von 49 %. Der andere Container hat ebenfalls eine Breite von 49%. Bei einer Bildschirmbreite von unter 768px, wird dieser Container unterhalb des linken Containers angezeigt.
Beispiel:

<div class="two-columns">
    <div class="content-center" >Inhalt 1</div>
    <div>Inhalt 2</div>
</div>

Klassen zur Anordnung (Für Untercontainer)

Elemente zentrieren (horizontal & vertikal)

Ich bin mittig angeordnet

Klasse "content-center". Der Inhalt des linken Containers wird horizontal & vertikal zentriert
Beispiel:

<div class="two-columns">
    <div class="content-center">Inhalt 1</div>
    <div>Inhalt 2</div>
</div>

Elemente zentriert & rechtsbündig

Ich bin mittig und rechts angeordnet

Klasse "content-center-right". Der Inhalt des linken Containers wird entlang der y-Achse zentriert und entlang der x-Achse rechts angeordnet.
Beispiel:

<div class="two-columns">
    <div class="content-center-right">Inhalt 1</div>
    <div>Inhalt 2</div>
</div>

Elemente zentriert & linksbündig

Ich bin mittig und links angeordnet

Klasse "content-center-left". Der Inhalt des linken Containers wird entlang der y-Achse zentriert und entlang der x-Achse links angeordnet.
Beispiel:

<div class="two-columns">
    <div class="content-center-left">Inhalt 1</div>
    <div>Inhalt 2</div>
</div>

Elemente zentriert & oberbündig

Ich bin mittig und oben angeordnet

Klasse "content-center-top". Der Inhalt des linken Containers wird entlang der x-Achse zentriert und entlang der y-Achse oben angeordnet.
Beispiel:

<div class="two-columns">
    <div class="content-center-top">Inhalt 1</div>
    <div>Inhalt 2</div>
</div>

Elemente zentriert & unterbündig

Ich bin mittig und unten angeordnet

Klasse "content-center-bottom". Der Inhalt des linken Containers wird entlang der x-Achse zentriert und entlang der y-Achse unten angeordnet.
Beispiel:

<div class="two-columns">
    <div class="content-center-bottom">Inhalt 1</div>
    <div>Inhalt 2</div>
</div>

Wichtig:

<p class="important-hint"><strong>Nur eine begrenzte Menge </strong></p>

Aufklappen

<div data-role="collapsible">
<div data-role="trigger">
<div class="opener">MEHR</div>
<div class="closer">WENIGER</div>
</div>
</div>
<div id="hiddentext1" class="hidder" data-role="content">
<h2 style="text-align: center;">Kosmetikbedarf und Pflegeutensilien im Porta-Kosmetik Shop</h2>
</div>