Blocks and Panels

Block

Ein Element mit der Klasse block kann zur Gruppierung von Einheiten verwendet werden und fügt einen Abstand nach dem Element ein. So haben alle Block-Elemente immer einen einheitlichen Abstand.

    <div class="block">
    [...]
    </div>

In manchen Fällen soll zwar eine Gruppierung der Einheiten stattfinden, jedoch der Abstand nach dem Element nicht hinzugefügt werden. In diesem Fall kann die Klasse block--nogap verwendet werden.

    <div class="block--nogap">
    [...]
    </div>

Panels

Panels gibt es in verschiedenen Ausführungen und Stylings. Allen gemeinsam ist eine visuelle Gruppierung und Abhebung der beinhalteten Einheiten.

Different panel versions and styling variants are available. A visual grouping and differentiation of the contained units are common to them all.

Mit der Klasse panel--heavy wird dem Panel ein grauer Hintergrund hinzugefügt.

    <div class="panel--heavy">
    [...]
    </div>

Mit der Klasse panel--light wird dem Panel eine umschließende Rahmung hinzugefügt.

    <div class="panel--light">
    [...]
    </div>

Mit der Klasse panel--bordered wird dem Panel ein Rahmen oben und unten hinzugefügt.

    <div class="panel--bordered">
    [...]
    </div>

Mit der Klasse panel--dark wird dem Panel dunkler Hintergrund und weiße Schrift hinzugefügt.

    <div class="panel--dark">
    [...]
    </div>

Mit der Klasse panel--colored wird dem Panel ein farbiger Hintergrund hinzugefügt, insofern dies im entsprechenden Vertical verfügbar ist. Andernfalls ist der Hintergrund grau.

    <div class="panel--colored">
    [...]
    </div>

Mit der Klasse panel--colored2 wird dem Panel ein farbiger Hintergrund hinzugefügt, insofern dies im entsprechenden Vertical verfügbar ist. Andernfalls ist der Hintergrund grau.

    <div class="panel--colored2">
    [...]
    </div>

Mit der Klasse panel--boxed wird dem Panel ein kräftiger Rahmen hinzugefügt.

    <div class="panel--boxed">
    [...]
    </div>

Die Klasse .panel--hint fügt ein Hinweis Icon an den Anfang des Containers.

    <div class="panel--hint">
    [...]
    </div>

Test: Panel nesting

Panel Heavy

Remove nested panel layout with class .panel--remove-inner-panels

Panel Heavy

Test: Panel Footer

Optional Footer Area .panel__footer. (Needs a .panel__main contentarea to work in stretched flexgrids)

This is our .panel__main content area inside a .panel--heavy container.

This is our .panel__footer to add a footer area to the panel.

    <div class="block panel--heavy">
            <div class="panel__main">
    <p>This is our <code class="sg-code-inline">.panel__main</code> content area inside a <code class="sg-code-inline">.panel--heavy</code> container.</p>
    </div>            <div class="panel__footer panel--heavy">
    This is our <code class="sg-code-inline">.panel__footer</code> to add a footer area to the panel.
    </div>    </div>

Test: Panels im (Stretched) Grid mit Flexbox, panelmain und panelfooter

.panel__main inside .panel--light
Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
.panel__footer
.panel__main inside .panel--light
Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, Philosophy is considered a science but or chemistry.
.panel__footer.panel--light
.panel__main inside .panel--heavy
Philosophy is considered a science but it is difficult to say, when one has to compare, is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
.panel__footer.panel--heavy