Gut zu wissen
Grundlagen
Komponenten
Templates
Helper Classes

Margin und Padding

Mittels Shorthand-Klassen weisen Sie Elementen responsive Marginwerte (Abstand nach außen) oder Paddingwerte (Abstand nach innen) zu.

Notation

Abstände, die für alle Breakpoints (xs - xxl) gelten, benötigen kein Breakpoint-Kürzel, da sie an kein Media-Query gebunden sind. Soll der Wert ab einem bestimmten Breakpoint aufwärts überschrieben werden, muss ein Kürzel in die Klasse eingefügt werden.

Die Klassen werden im folgenden Muster angegeben:

  • Für xs: {property}{sides}-{size}
  • Für sm, md, lg, xl und xxl: {property}{sides}-{breakpoint}-{size}

PROPERTY

  • m - für Margin-Klassen
  • p - für Padding-Klassen

SIDES

  • Ohne Angabe - Abstand in alle Richtungen
  • t - top: Abstand nach oben
  • b - bottom: Abstand nach unten
  • s - start: Abstand zum Start (Der Start wird furch die Leserichtung definiert)
  • e - end: Abstand zum Ende (Das Ende wird furch die Leserichtung definiert)
  • x - x-achse: Abstand nach links und rechts
  • y - y-achse: Abstand nach oben und unten

SIZE

  • 0 - um einen Abstand zu beseitigen
  • 1 - 4 Pixel
  • 2 - 8 Pixel
  • 3 - 16 Pixel
  • 4 - 24 Pixel
  • 5 - 48 Pixel
  • auto - automatischer Abstand
Spacing
draft
      <h6 class="headline headline--h6">Margin (Abstand nach außen)</h6>

<div class="wrapper row">
  <div class="wrapper__element col">
    <p>m-1</p>
    <div class="background">
      <div class="element m-1"></div>
    </div>
  </div>

  <div class="wrapper__element col">
    <p>m-2</p>
    <div class="background">
      <div class="element m-2"></div>
    </div>
  </div>

  <div class="wrapper__element col">
    <p>m-3</p>
    <div class="background">
      <div class="element m-3"></div>
    </div>
  </div>

  <div class="wrapper__element col">
    <p>m-4</p>
    <div class="background">
      <div class="element m-4"></div>
    </div>
  </div>
</div>


<h6 class="headline headline--h6">Padding (Abstand nach innen)</h6>

<div class="wrapper row">
  <div class="wrapper__element col">
    <p>p-1</p>
    <div class="background">
      <div class="inner p-1 m-1">
        <div class="element"></div>
      </div>
    </div>
  </div>

  <div class="wrapper__element col">
    <p>p-2</p>
    <div class="background">
      <div class="inner p-2 m-1">
        <div class="element"></div>
      </div>
    </div>
  </div>

  <div class="wrapper__element col">
    <p>p-3</p>
    <div class="background">
      <div class="inner p-3 m-1">
        <div class="element"></div>
      </div>
    </div>
  </div>

  <div class="wrapper__element col">
    <p>p-4</p>
    <div class="background">
      <div class="inner p-4 m-1">
        <div class="element"></div>
      </div>
    </div>
  </div>
</div>

{{ page.inlinestyles }}

Farben

Mittels Shorthand-Klassen weisen Sie Elementen eine Text- bzw. Hintergrundfarbe zu

Notation

Die Klassen werden im folgenden Muster angegeben:

  • {property}-{color}

PROPERTY

  • bg - für Hintergründe
  • text - für Textfarben

COLOR

  • primary – Hauptfarbe (Dunkelblau)
  • secondary - Sekundärfarbe (Weiß)
  • blue
  • green
  • teal
  • aloevera
  • cyan
  • white
  • gray-light
  • gray-medium
  • gray-dark
  • black
Colors
draft
      <h6 class="headline headline--h6">Text</h6>

<div><p class="text-primary">text-primary</p></div>
<div style="background: var(--bs-gray-dark)"><p class="text-secondary">text-secondary</p></div>
<div><p class="text-blue">text-blue</p></div>
<div><p class="text-green">text-green</p></div>
<div><p class="text-teal">text-teal</p></div>
<div><p class="text-aloevera">text-aloevera</p></div>
<div><p class="text-cyan">text-cyan</p></div>
<div style="background: var(--bs-gray-dark)"><p class="text-white">text-white</p></div>
<div style="background: var(--bs-gray-dark)"><p class="text-gray-light">text-gray-light</p></div>
<div><p class="text-gray-medium">text-gray-medium</p></div>
<div><p class="text-gray-dark">text-gray-dark</p></div>
<div><p class="text-black">text-black</p></div>

<h6 class="headline headline--h6 mt-5">Hintergrund</h6>

<div style="display:block; margin-bottom: 10px" class="bg-primary"><p>bg-primary</p></div>
<div style="display:block; margin-bottom: 10px;" class="bg-secondary"><p style="border: 1px solid #ebebeb;">bg-secondary</p></div>
<div style="display:block; margin-bottom: 10px" class="bg-blue"><p>bg-blue</p></div>
<div style="display:block; margin-bottom: 10px" class="bg-green"><p>bg-green</p></div>
<div style="display:block; margin-bottom: 10px" class="bg-teal"><p>bg-teal</p></div>
<div style="display:block; margin-bottom: 10px" class="bg-aloevera"><p>bg-aloevera</p></div>
<div style="display:block; margin-bottom: 10px" class="bg-cyan"><p>bg-cyan</p></div>
<div style="display:block; margin-bottom: 10px;" class="bg-white"><p style="border: 1px solid #ebebeb;">bg-white</p></div>
<div style="display:block; margin-bottom: 10px" class="bg-gray-light"><p>bg-gray-light</p></div>
<div style="display:block; margin-bottom: 10px" class="bg-gray-medium"><p>bg-gray-medium</p></div>
<div style="display:block; margin-bottom: 10px" class="bg-gray-dark"><p>bg-gray-dark</p></div>
<div style="display:block; margin-bottom: 10px" class="bg-black"><p>bg-black</p></div>



{{ page.inlinestyles }}