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.

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--boxed wird dem Panel ein kräftiger Rahmen hinzugefügt.

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

Hint

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

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

Panel Footer

Optional Footer Area .panel__footer

This is our .panel--heavy.

We can use .panel__footer to add a footer area to the panel. 
    <div class="block panel--heavy">
        <p>This is our <code class="sg-code-inline">.panel--heavy</code>.</p>
            <div class="panel__footer panel--heavy">
    We can use <code class="sg-code-inline">.panel__footer</code> to add a footer area to the panel.
    </div>    </div>

Panel nesting

Panel Heavy

Panel Heavy

Panel Heavy

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

Panel Heavy

Panel Heavy

Panel Heavy