Freie Grundschule Pfefferwerk - Frontend Design

Ce Section: Narrow 

<section class="c-section u-color-bg:g1">
    <!--
        @int:
        optional colored class: u-color-bg:g1
        section width: "wide" o-grid__col:12, "narrow" o-grid__col:12 o-grid__col:8@md
    -->
    <div class="c-section__grid o-grid">

        <div class="c-section__row o-grid__row o-grid__row--center">

            <div class="c-section__col o-grid__col:12 o-grid__col:8@md ">
                <h2 class="c-section__headline u-typo:xl">Section Narrow</h2>

                <!-- add content elements -->
            </div>

        </div>

    </div>

</section>
 
<section class="c-section {{#if color}}u-color-bg:{{color}}{{/if}}">
    <!--
        @int:
        optional colored class: u-color-bg:g1
        section width: "wide" o-grid__col:12, "narrow" o-grid__col:12 o-grid__col:8@md
    -->
    <div class="c-section__grid o-grid">

        <div class="c-section__row o-grid__row o-grid__row--center">

            <div class="c-section__col {{#if narrow}}o-grid__col:12 o-grid__col:8@md {{else}}o-grid__col:12{{/if}}">
                {{#if sectionHeadline}}<h2 class="c-section__headline u-typo:xl">{{sectionHeadline}}</h2>{{/if}}

                {{#block "sectionContent"}}
                    <!-- add content elements -->
                {{/block}}
            </div>

        </div>

    </div>

</section>
 
{
  "color": "g1",
  "sectionHeadline": "Section Narrow",
  "narrow": true
}

There are no notes for this item.