{{> head title="Layout | Dokumentation HWK Relaunch" }} {{> skip }} {{> docu/header }}

DokumentationLayout

Sections und Abstände

Beschreibung Header Bild ...
© Gusen Fertelmann

Beratung Gemeinsam zur erfolgreichen
Betriebsübergabe

Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement.

-120px

Hintergrund: Transparent

120px

Das ist die Überschrift H2

Das ist ein Einleitungstext. Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.

80px

Das ist die Überschrift H2

Das ist ein Text. Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.

80px
{{> components/accordion }}
40px
120px

Hintergrund: Weiß

120px

Das ist die Überschrift H2

Das ist ein Einleitungstext. Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.

80px

Das ist die Überschrift H2

Das ist ein Text. Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.

80px
{{> components/accordion }}
40px
120px

Hintergrund: Hellblau 200

120px

Das ist die Überschrift H2

Das ist ein Einleitungstext. Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.

80px

Das ist die Überschrift H2

Das ist ein Text. Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.

80px
{{> components/accordion }}
40px
120px

Hintergrund: Dunkelgrün 200

120px

Das ist die Überschrift H2

Das ist ein Einleitungstext. Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.

80px

Das ist die Überschrift H2

Das ist ein Text. Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.

80px
{{> components/accordion }}
40px
120px

Hintergrund: Orange 200

120px

Das ist die Überschrift H2

Das ist ein Einleitungstext. Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.

80px

Das ist die Überschrift H2

Das ist ein Text. Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.

80px
{{> components/accordion }}
40px
120px

Hintergrund: Dunkelrot 200

120px

Das ist die Überschrift H2

Das ist ein Einleitungstext. Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.

80px

Das ist die Überschrift H2

Das ist ein Text. Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.

80px
{{> components/accordion }}
40px
120px
{{!--> section text on image --}} {{> docu/components/image-fullscreen-text-right }}
1. Row 1. Column 1. Element
1. Row 1. Column 2. Element
1. Row 1. Column 3. Element
1. Row 2. Column 1. Element
1. Row 2. Column 2. Element
1. Row 2. Column 3. Element
2. Row 1. Column 1. Element
2. Row 1. Column 2. Element
2. Row 1. Column 3. Element ...

            <div class="container d-flex flex-column gap-8 py-9">
                <div class="row row-gap-8">
                    <div class="col-12 d-flex flex-column gap-6">
                        ...
                    </div>
                    <div class="col-12 d-flex flex-column gap-6">
                        ...
                    </div>
                </div>
                <div class="row row-gap-8">
                    <div class="col-12 d-flex flex-column gap-6">
                        ...
                    </div>
                    <div class="col-12 d-flex flex-column gap-6">
                        ...
                    </div>
                </div>
            </div>
{{!--> Columns --}}

Spalten

col-md-6 col-lg-4

col-md-6 col-lg-4

col-md-6 col-lg-4


        <div class="col-md-6 col-lg-4">
            ...
        </div>
        <div class="col-md-6 col-lg-4">
           ...
        </div>
        <div class="col-md-6 col-lg-4">
            ...
        </div>

col-md-6 col-lg-3

col-md-6 col-lg-3

col-md-6 col-lg-3

col-md-6 col-lg-3


        <div class="col-md-6 col-lg-3">
            ...
        </div>
        <div class="col-md-6 col-lg-3">
            ...
        </div>
        <div class="col-md-6 col-lg-3">
            ...
        </div>
        <div class="col-md-6 col-lg-3">
            ...
        </div>

col-md-8

col-md-4


        <div class="col-md-8">
            ...
        </div>
        <div class="col-md-4">
            ...
        </div>

col-md-4

col-md-8


        <div class="col-md-4">
            ...
        </div>
        <div class="col-md-8">
            ...
        </div>

col-md-6

col-md-6


        <div class="col-md-6">
            ...
        </div>
        <div class="col-md-6">
            ...
        </div>

col-12


        <div class="col-12">
            ...
        </div>
{{!--> Grid --}}

Grid

3 Spalten

.row.g-2
.col-md-6.col-lg-4

.row.g-2
.col-md-6.col-lg-4

.row.g-2
.col-md-6.col-lg-4


         <div class="row g-2">
            <div class="col-md-6 col-lg-4 stretch-child">
                ...
            </div>
            <div class="col-md-6 col-lg-4 stretch-child">
                ...
            </div>
            <div class="col-md-6 col-lg-4 stretch-child">
                ...
            </div>
        </div>

4 Spalten

.row.g-2
.col-md-6.col-lg-3

.row.g-2
.col-md-6.col-lg-3

.row.g-2
.col-md-6.col-lg-3

.row.g-2
.col-md-6.col-lg-3


        <div class="row g-2">
            <div class="col-md-6 col-lg-3 stretch-child">
                ...
            </div>
            <div class="col-md-6 col-lg-3 stretch-child">
                ...
            </div>
            <div class="col-md-6 col-lg-3 stretch-child">
                ...
            </div>
            <div class="col-md-6 col-lg-3 stretch-child">
                ...
            </div>
        </div>
{{> foot }}