<div class="backendlayout-subnavigation_left_2_columns layout-default">
    <div id="top"></div>
    <div class="body-bg">

        <header id="page-header" class="bp-page-header navbar navbar-mainnavigation navbar-default navbar-has-image navbar-top header-layout-bootstrap-default">
            <div class="container">
                <a href="#" class="navbar-brand navbar-brand-image" title="">

                    <img class="navbar-brand-logo-normal" src="holder.js/150x75?auto=yes&text=Logo&theme=vine" alt="Fractal" height="" width="" />

                    <img class="navbar-brand-logo-inverted" src="holder.js/150x75?auto=yes&text=Logo&theme=lava" alt="Fractal" height="" width="" />
                </a>
                <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainnavigation" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <nav id="mainnavigation" class="collapse navbar-collapse">

                    <ul class="navbar-nav">

                        <li class="nav-item active">

                            <a href="#" id="nav-item-1" class="nav-link" title="Home">

                                <span class="nav-link-text">
                                    Home <span class="sr-only">(current)</span>
                                </span>
                            </a>
                        </li>

                        <li class="nav-item">

                            <a href="#" id="nav-item-2" class="nav-link" title="Customizings">

                                <span class="nav-link-text">
                                    Customizings </span>
                            </a>
                        </li>

                        <li class="nav-item">

                            <a href="#" id="nav-item-3" class="nav-link" title="Features">

                                <span class="nav-link-text">
                                    Features </span>
                            </a>
                        </li>

                        <li class="nav-item dropdown dropdown-hover">

                            <a href="#" id="nav-item-4" class="nav-link dropdown-toggle" title="Pages" aria-haspopup="true" aria-expanded="false">

                                <span class="nav-link-text">
                                    Pages </span>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="nav-item-4">
                                <li>

                                    <a href="#" class="dropdown-item" title="Default">

                                        <span class="dropdown-text">
                                            Default </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="2 Columns">

                                        <span class="dropdown-text">
                                            2 Columns </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="2 Columns 25/75">

                                        <span class="dropdown-text">
                                            2 Columns 25/75 </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="2 Columns 50/50">

                                        <span class="dropdown-text">
                                            2 Columns 50/50 </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="2 Columns, Offset Right">

                                        <span class="dropdown-text">
                                            2 Columns, Offset Right </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="3 Columns">

                                        <span class="dropdown-text">
                                            3 Columns </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="Simple">

                                        <span class="dropdown-text">
                                            Simple </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="Subnavigation, Left">

                                        <span class="dropdown-text">
                                            Subnavigation, Left </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="Subnavigation, Left and 2 Columns">

                                        <span class="dropdown-text">
                                            Subnavigation, Left and 2 Columns </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="Subnavigation, Right">

                                        <span class="dropdown-text">
                                            Subnavigation, Right </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="Subnavigation, Right and 2 Columns">

                                        <span class="dropdown-text">
                                            Subnavigation, Right and 2 Columns </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="Feature">

                                        <span class="dropdown-text">
                                            Feature </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="Startpage">

                                        <span class="dropdown-text">
                                            Startpage </span>
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <li class="nav-item dropdown dropdown-hover">

                            <a href="#" id="nav-item-5" class="nav-link dropdown-toggle" title="Content Examples" aria-haspopup="true" aria-expanded="false">

                                <span class="nav-link-text">
                                    Content Examples </span>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="nav-item-5">
                                <li>

                                    <a href="#" class="dropdown-item" title="Text">

                                        <span class="dropdown-text">
                                            Text </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="Media">

                                        <span class="dropdown-text">
                                            Media </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="Interactive">

                                        <span class="dropdown-text">
                                            Interactive </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="Form elements">

                                        <span class="dropdown-text">
                                            Form elements </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="Menu's">

                                        <span class="dropdown-text">
                                            Menu's </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="Special elements">

                                        <span class="dropdown-text">
                                            Special elements </span>
                                    </a>
                                </li>
                                <li>

                                    <a href="#" class="dropdown-item" title="And more...">

                                        <span class="dropdown-text">
                                            And more... </span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>

                </nav>
            </div>
        </header>

        <!-- ### Begin: Element text ### -->
        <div id="c701" class="frame frame-default frame-type-text frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
            <div class="frame-container">
                <div class="frame-inner">
                    Border </div>
            </div>
        </div>
        <!-- ### End: Element text ### -->

        <nav aria-label="Breadcrumb" class="breadcrumb-section">
            <div class="container">
                <p class="sr-only" id="breadcrumb">You are here:</p>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#" class="breadcrumb-link"><span class="breadcrumb-text">Startpage</span></a></li>
                    <li class="breadcrumb-item"><a href="#" class="breadcrumb-link"><span class="breadcrumb-text">Subpage</span></a></li>
                    <li class="breadcrumb-item active" aria-current="page"><span class="breadcrumb-text">Current Page</span></li>
                </ol>
            </div>
        </nav>

        <!-- ### Begin: Element text ### -->
        <div id="c773" class="frame frame-default frame-type-text frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
            <div class="frame-container">
                <div class="frame-inner">
                    Content Before </div>
            </div>
        </div>
        <!-- ### End: Element text ### -->

        <div class="section section-default">
            <div class="container">
                <div class="section-row">
                    <div class="section-column subnav-wrap">

                        <nav class="frame frame-type-subnavigation frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none" role="navigation">
                            <div class="frame-container">
                                <div class="frame-inner">
                                    <ul class="subnav-nav">
                                        <li class="subnav-item active">
                                            <a href="/components/preview/page-template-default" id="subnav-item-1" class="subnav-link" title="Default">

                                                <span class="subnav-link-text">Default <span class="sr-only">(current)</span></span>
                                            </a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="/components/preview/page-template-2columns" id="subnav-item-2" class="subnav-link" title="2 Columns">

                                                <span class="subnav-link-text">2 Columns</span>
                                            </a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="/components/preview/page-template-2columns2575" id="subnav-item-3" class="subnav-link" title="2 Columns 25/75">

                                                <span class="subnav-link-text">2 Columns 25/75</span>
                                            </a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="/components/preview/page-template-2columns5050" id="subnav-item-4" class="subnav-link" title="2 Columns 50/50">

                                                <span class="subnav-link-text">2 Columns 50/50</span>
                                            </a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="/components/preview/page-template-2columns-offset-right" id="subnav-item-5" class="subnav-link" title="2 Columns, Offset Right">

                                                <span class="subnav-link-text">2 Columns, Offset Right</span>
                                            </a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="/components/preview/page-template-3columns" id="subnav-item-6" class="subnav-link" title="3 Columns">

                                                <span class="subnav-link-text">3 Columns</span>
                                            </a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="/components/preview/page-template-simple" id="subnav-item-7" class="subnav-link" title="Simple">

                                                <span class="subnav-link-text">Simple</span>
                                            </a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="/components/preview/page-template-subnavigation-left" id="subnav-item-8" class="subnav-link" title="Subnavigation, Left">

                                                <span class="subnav-link-text">Subnavigation, Left</span>
                                            </a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="/components/preview/page-template-subnavigation-left-2columns" id="subnav-item-9" class="subnav-link" title="Subnavigation, Left and 2 Columns">

                                                <span class="subnav-link-text">Subnavigation, Left and 2 Columns</span>
                                            </a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="/components/preview/page-template-subnavigation-right" id="subnav-item-10" class="subnav-link" title="Subnavigation, Right">

                                                <span class="subnav-link-text">Subnavigation, Right</span>
                                            </a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="/components/preview/page-template-subnavigation-right-2columns" id="subnav-item-11" class="subnav-link" title="Subnavigation, Right and 2 Columns">

                                                <span class="subnav-link-text">Subnavigation, Right and 2 Columns</span>
                                            </a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="/components/preview/page-template-feature" id="subnav-item-12" class="subnav-link" title="Feature">

                                                <span class="subnav-link-text">Feature</span>
                                            </a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="/components/preview/page-template-startpage" id="subnav-item-13" class="subnav-link" title="Startpage">

                                                <span class="subnav-link-text">Startpage</span>
                                            </a>
                                        </li>
                                    </ul>

                                </div>
                            </div>
                        </nav>

                    </div>
                    <main class="section-column maincontent-wrap" role="main">

                        <!-- ### Begin: Element text ### -->
                        <div id="c981" class="frame frame-default frame-type-text frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
                            <div class="frame-container">
                                <div class="frame-inner">
                                    Normal </div>
                            </div>
                        </div>
                        <!-- ### End: Element text ### -->

                    </main>
                    <div class="section-column subcontent-wrap">

                        <!-- ### Begin: Element text ### -->
                        <div id="c546" class="frame frame-default frame-type-text frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
                            <div class="frame-container">
                                <div class="frame-inner">
                                    Left </div>
                            </div>
                        </div>
                        <!-- ### End: Element text ### -->

                    </div>
                </div>
            </div>
        </div>

        <!-- ### Begin: Element text ### -->
        <div id="c718" class="frame frame-default frame-type-text frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
            <div class="frame-container">
                <div class="frame-inner">
                    Content After </div>
            </div>
        </div>
        <!-- ### End: Element text ### -->

        <footer id="page-footer" class="bp-page-footer">
            <section class="section footer-section footer-section-content">
                <div class="container">
                    <div class="section-row">
                        <div class="section-column footer-section-content-column footer-section-content-column-left">

                            <!-- ### Begin: Element text ### -->
                            <div id="c310" class="frame frame-default frame-type-text frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
                                <div class="frame-container">
                                    <div class="frame-inner">
                                        Footer: Left </div>
                                </div>
                            </div>
                            <!-- ### End: Element text ### -->

                        </div>
                        <div class="section-column footer-section-content-column footer-section-content-column-middle">

                            <!-- ### Begin: Element text ### -->
                            <div id="c149" class="frame frame-default frame-type-text frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
                                <div class="frame-container">
                                    <div class="frame-inner">
                                        Footer: Center </div>
                                </div>
                            </div>
                            <!-- ### End: Element text ### -->

                        </div>
                        <div class="section-column footer-section-content-column footer-section-content-column-right">

                            <!-- ### Begin: Element text ### -->
                            <div id="c192" class="frame frame-default frame-type-text frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
                                <div class="frame-container">
                                    <div class="frame-inner">
                                        Footer: Right </div>
                                </div>
                            </div>
                            <!-- ### End: Element text ### -->

                        </div>
                    </div>
                </div>
            </section>

            <!-- ### Begin: Element form_formframework ### -->
            <div id="c546" class="frame frame-section footer-section footer-section-newsletter frame-type-form_formframework frame-layout-0 frame-background-dark frame-no-backgroundimage frame-space-before-none frame-space-after-none">
                <div class="frame-container">
                    <div class="frame-inner">

                        <div class="form-container form-identifier-contactform-497">
                            <form enctype="multipart/form-data" method="post" novalidate="novalidate" id="contactform-497">
                                <div class="form-row row">

                                    <div class="col-12">
                                        <fieldset id="contactform-497-fieldset-" class="form-fieldset form-fieldset-">
                                            <div class="form-fieldset-inner">
                                                <legend>Newsletter</legend>

                                                <div class="form-element form-element-type-text form-group">
                                                    <div class="input">
                                                        <label for="input439">
                                                            Email * </label>

                                                        <input class="form-control" id="input439" placeholder="Please enter your email" required="true" type="text" />

                                                    </div>
                                                </div>

                                            </div>
                                        </fieldset>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <nav class="form-navigation">
                                        <div class="btn-toolbar" role="toolbar">
                                            <div class="btn-group" role="group">
                                                <span class="btn-group next submit">
                                                    <button class="btn btn-primary" type="submit" name="tx_form_formframework[contactform-497][__currentPage]" value="1">
                                                        Submit
                                                    </button>
                                                </span>
                                            </div>
                                        </div>
                                    </nav>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ### End: Element form_formframework ### -->

            <section class="section footer-section footer-section-meta">
                <div class="frame frame-background-none frame-space-before-none frame-space-after-none">
                    <div class="frame-container">
                        <div class="frame-inner">
                            <div class="footer-meta">

                                <ul id="meta_menu" class="meta-menu">
                                    <li>
                                        <a href="#" title="Imprint">
                                            <span>Imprint</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" title="Privacy">
                                            <span>Privacy</span>
                                        </a>
                                    </li>
                                </ul>

                            </div>

                            <div class="footer-language">

                                <ul id="language_menu" class="language-menu">
                                    <li class="active">
                                        <a href="#" title="English">
                                            <span>English</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" title="German">
                                            <span>German</span>
                                        </a>
                                    </li>
                                    <li class="text-muted">
                                        <span>French (not available)</span>
                                    </li>
                                </ul>

                            </div>

                            <div class="footer-copyright">

                                <!-- ### Begin: Element text ### -->
                                <div id="c378" class="frame frame-default frame-type-text frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-none frame-space-inner-after-none">
                                    <div class="frame-container">
                                        <div class="frame-inner">
                                            © copyright Project 2021 </div>
                                    </div>
                                </div>
                                <!-- ### End: Element text ### -->

                            </div>

                            <div class="footer-sociallinks">
                                <div class="sociallinks">
                                    <ul class="sociallinks-list">
                                        <li class="sociallinks-item sociallinks-item-facebook" title="Facebook">
                                            <a class="sociallinks-link sociallinks-link-facebook" href="#" rel="noopener" target="_blank">
                                                <span class="sociallinks-link-icon bootstrappackageicon bootstrappackageicon-facebook"></span>
                                                <span class="sociallinks-link-label">Facebook</span>
                                            </a>
                                        </li>
                                        <li class="sociallinks-item sociallinks-item-instagram" title="Instagram">
                                            <a class="sociallinks-link sociallinks-link-instagram" href="#" rel="noopener" target="_blank">
                                                <span class="sociallinks-link-icon bootstrappackageicon bootstrappackageicon-instagram"></span>
                                                <span class="sociallinks-link-label">Instagram</span>
                                            </a>
                                        </li>
                                        <li class="sociallinks-item sociallinks-item-youtube" title="Youtube">
                                            <a class="sociallinks-link sociallinks-link-youtube" href="#" rel="noopener" target="_blank">
                                                <span class="sociallinks-link-icon bootstrappackageicon bootstrappackageicon-youtube"></span>
                                                <span class="sociallinks-link-label">Youtube</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </footer>
    </div>
</div>
{% extends '@page-layout-default' %}
{% import '@macro-render' as render %}

{% set pagelayout = 'subnavigation_left_2_columns' %}

{% block main %}
    {% include '@page-partial-header' %}

    {{ render.frames(content_before) }}

    <div class="section section-default">
        <div class="container">
            <div class="section-row">
                <div class="section-column subnav-wrap">
                    {{ render.frames(subnav) }}
                </div>
                <main class="section-column maincontent-wrap" role="main">
                    {{ render.frames(normal) }}
                </main>
                <div class="section-column subcontent-wrap">
                    {{ render.frames(left) }}
                </div>
            </div>
        </div>
    </div>

    {{ render.frames(content_after) }}

    {% include '@page-partial-footer' %}
{% endblock %}
{
  "siteTitle": "Fractal",
  "headerVariant": "bootstrap-default",
  "footerVariant": "bootstrap-default",
  "settings": {
    "logo": {
      "width": null,
      "height": null,
      "linktitle": null
    }
  },
  "logo": {
    "normal": {
      "url": null,
      "holder": {
        "width": 150,
        "height": 75,
        "theme": "vine",
        "text": "Logo"
      }
    },
    "inverted": {
      "url": null,
      "holder": {
        "width": 150,
        "height": 75,
        "theme": "lava",
        "text": "Logo"
      }
    }
  },
  "theme": {
    "navigation": {
      "style": "default",
      "type": null
    },
    "meta": {
      "enable": null
    },
    "language": {
      "enable": null
    },
    "copyright": {
      "enable": null
    },
    "socialmedia": {
      "enable": null
    }
  },
  "header": {
    "mainnavigation": [
      {
        "type": "menu-main",
        "context": {
          "menu": [
            {
              "title": "Home",
              "link": "#",
              "target": null,
              "active": true,
              "current": true
            },
            {
              "link": "#",
              "title": "Customizings"
            },
            {
              "link": "#",
              "title": "Features"
            },
            {
              "link": "#",
              "title": "Pages",
              "children": [
                {
                  "link": "#",
                  "title": "Default"
                },
                {
                  "link": "#",
                  "title": "2 Columns"
                },
                {
                  "link": "#",
                  "title": "2 Columns 25/75"
                },
                {
                  "link": "#",
                  "title": "2 Columns 50/50"
                },
                {
                  "link": "#",
                  "title": "2 Columns, Offset Right"
                },
                {
                  "link": "#",
                  "title": "3 Columns"
                },
                {
                  "link": "#",
                  "title": "Simple"
                },
                {
                  "link": "#",
                  "title": "Subnavigation, Left"
                },
                {
                  "link": "#",
                  "title": "Subnavigation, Left and 2 Columns"
                },
                {
                  "link": "#",
                  "title": "Subnavigation, Right"
                },
                {
                  "link": "#",
                  "title": "Subnavigation, Right and 2 Columns"
                },
                {
                  "link": "#",
                  "title": "Feature"
                },
                {
                  "link": "#",
                  "title": "Startpage"
                }
              ]
            },
            {
              "link": "#",
              "title": "Content Examples",
              "children": [
                {
                  "link": "#",
                  "title": "Text",
                  "children": [
                    {
                      "link": "#",
                      "title": "Rich Text"
                    },
                    {
                      "link": "#",
                      "title": "Headers"
                    },
                    {
                      "link": "#",
                      "title": "Bullet List"
                    },
                    {
                      "link": "#",
                      "title": "Text with Teaser"
                    },
                    {
                      "link": "#",
                      "title": "Text and Icon"
                    },
                    {
                      "link": "#",
                      "title": "Text in Columns"
                    },
                    {
                      "link": "#",
                      "title": "List Group"
                    },
                    {
                      "link": "#",
                      "title": "Panel"
                    },
                    {
                      "link": "#",
                      "title": "Table"
                    },
                    {
                      "link": "#",
                      "title": "Quote"
                    }
                  ]
                },
                {
                  "link": "#",
                  "title": "Media",
                  "children": [
                    {
                      "link": "#",
                      "title": "Audio"
                    },
                    {
                      "link": "#",
                      "title": "Card Group"
                    },
                    {
                      "link": "#",
                      "title": "Icon Group"
                    },
                    {
                      "link": "#",
                      "title": "Gallery"
                    },
                    {
                      "link": "#",
                      "title": "Text and Images"
                    },
                    {
                      "link": "#",
                      "title": "Text and Media"
                    },
                    {
                      "link": "#",
                      "title": "File downloads"
                    },
                    {
                      "link": "#",
                      "title": "Images"
                    },
                    {
                      "link": "#",
                      "title": "Media"
                    },
                    {
                      "link": "#",
                      "title": "External Media"
                    }
                  ]
                },
                {
                  "link": "#",
                  "title": "Interactive",
                  "children": [
                    {
                      "link": "#",
                      "title": "Accordion"
                    },
                    {
                      "link": "#",
                      "title": "Carousel"
                    },
                    {
                      "link": "#",
                      "title": "Tab"
                    },
                    {
                      "link": "#",
                      "title": "Timeline"
                    }
                  ]
                },
                {
                  "link": "#",
                  "title": "Form elements",
                  "children": [
                    {
                      "link": "#",
                      "title": "Forms"
                    },
                    {
                      "link": "#",
                      "title": "Login"
                    },
                    {
                      "link": "#",
                      "title": "Search"
                    }
                  ]
                },
                {
                  "link": "#",
                  "title": "Menu's",
                  "children": [
                    {
                      "link": "#",
                      "title": "Abstract"
                    },
                    {
                      "link": "#",
                      "title": "Cards",
                      "children": [
                        {
                          "link": "#",
                          "title": "Page 1"
                        },
                        {
                          "link": "#",
                          "title": "Page 2"
                        },
                        {
                          "link": "#",
                          "title": "Page 3"
                        },
                        {
                          "link": "#",
                          "title": "Page 4"
                        },
                        {
                          "link": "#",
                          "title": "Page 5"
                        },
                        {
                          "link": "#",
                          "title": "Page 6"
                        }
                      ]
                    },
                    {
                      "link": "#",
                      "title": "Categorized"
                    },
                    {
                      "link": "#",
                      "title": "Pages"
                    },
                    {
                      "link": "#",
                      "title": "Recently Updated"
                    },
                    {
                      "link": "#",
                      "title": "Related Pages"
                    },
                    {
                      "link": "#",
                      "title": "Sections"
                    },
                    {
                      "link": "#",
                      "title": "Sitemap"
                    },
                    {
                      "link": "#",
                      "title": "Thumbnails",
                      "children": [
                        {
                          "link": "#",
                          "title": "Page 1"
                        },
                        {
                          "link": "#",
                          "title": "Page 2"
                        },
                        {
                          "link": "#",
                          "title": "Page 3"
                        },
                        {
                          "link": "#",
                          "title": "Page 4"
                        },
                        {
                          "link": "#",
                          "title": "Page 5"
                        },
                        {
                          "link": "#",
                          "title": "Page 6"
                        }
                      ]
                    }
                  ]
                },
                {
                  "link": "#",
                  "title": "Special elements",
                  "children": [
                    {
                      "link": "#",
                      "title": "Insert records"
                    },
                    {
                      "link": "#",
                      "title": "HTML"
                    },
                    {
                      "link": "#",
                      "title": "Divider"
                    }
                  ]
                },
                {
                  "link": "#",
                  "title": "And more...",
                  "children": [
                    {
                      "link": "#",
                      "title": "Frames"
                    },
                    {
                      "link": "#",
                      "title": "Images with links"
                    },
                    {
                      "link": "#",
                      "title": "Languages and characters"
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    ]
  },
  "breadcrumb": [
    {
      "title": "Startpage"
    },
    {
      "title": "Subpage"
    },
    {
      "title": "Current Page"
    }
  ],
  "border": [
    {
      "type": "text",
      "context": {
        "bodytext": "Border"
      }
    }
  ],
  "footer_content": {
    "left": [
      {
        "type": "text",
        "context": {
          "bodytext": "Footer: Left"
        }
      }
    ],
    "center": [
      {
        "type": "text",
        "context": {
          "bodytext": "Footer: Center"
        }
      }
    ],
    "right": [
      {
        "type": "text",
        "context": {
          "bodytext": "Footer: Right"
        }
      }
    ],
    "newsletter": [
      {
        "type": "forms",
        "context": {
          "background_color_class": "dark",
          "frame_class": "section footer-section footer-section-newsletter",
          "form": {
            "submit": {
              "label": "Submit"
            },
            "fieldsets": [
              {
                "label": "Newsletter",
                "elements": [
                  {
                    "type": "input",
                    "context": {
                      "label": "Email",
                      "placeholder": "Please enter your email",
                      "required": true
                    }
                  }
                ]
              }
            ]
          }
        }
      }
    ]
  },
  "footer": {
    "meta": [
      {
        "type": "menu-meta",
        "context": {
          "menu": [
            {
              "title": "Imprint"
            },
            {
              "title": "Privacy"
            }
          ]
        }
      }
    ],
    "language": [
      {
        "type": "menu-language",
        "context": {
          "menu": [
            {
              "title": "English",
              "active": true
            },
            {
              "title": "German"
            },
            {
              "title": "French (not available)",
              "available": false
            }
          ]
        }
      }
    ],
    "copyright": [
      {
        "type": "text",
        "context": {
          "space_inner_before_class": "none",
          "space_inner_after_class": "none",
          "bodytext": "© copyright Project {{ \"now\"|date(\"Y\") }}"
        }
      }
    ],
    "sociallinks": {
      "channels": {
        "facebook": {
          "label": "Facebook",
          "url": "#"
        },
        "instagram": {
          "label": "Instagram",
          "url": "#"
        },
        "youtube": {
          "label": "Youtube",
          "url": "#"
        }
      }
    }
  },
  "subnav": [
    {
      "type": "menu-subnavigation",
      "context": {
        "menu": [
          {
            "title": "Default",
            "link": "/components/preview/page-template-default",
            "active": true,
            "current": true
          },
          {
            "title": "2 Columns",
            "link": "/components/preview/page-template-2columns"
          },
          {
            "title": "2 Columns 25/75",
            "link": "/components/preview/page-template-2columns2575"
          },
          {
            "title": "2 Columns 50/50",
            "link": "/components/preview/page-template-2columns5050"
          },
          {
            "title": "2 Columns, Offset Right",
            "link": "/components/preview/page-template-2columns-offset-right"
          },
          {
            "title": "3 Columns",
            "link": "/components/preview/page-template-3columns"
          },
          {
            "title": "Simple",
            "link": "/components/preview/page-template-simple"
          },
          {
            "title": "Subnavigation, Left",
            "link": "/components/preview/page-template-subnavigation-left"
          },
          {
            "title": "Subnavigation, Left and 2 Columns",
            "link": "/components/preview/page-template-subnavigation-left-2columns"
          },
          {
            "title": "Subnavigation, Right",
            "link": "/components/preview/page-template-subnavigation-right"
          },
          {
            "title": "Subnavigation, Right and 2 Columns",
            "link": "/components/preview/page-template-subnavigation-right-2columns"
          },
          {
            "title": "Feature",
            "link": "/components/preview/page-template-feature"
          },
          {
            "title": "Startpage",
            "link": "/components/preview/page-template-startpage"
          }
        ]
      }
    }
  ],
  "content_before": [
    {
      "type": "text",
      "context": {
        "bodytext": "Content Before"
      }
    }
  ],
  "left": [
    {
      "type": "text",
      "context": {
        "bodytext": "Left"
      }
    }
  ],
  "normal": [
    {
      "type": "text",
      "context": {
        "bodytext": "Normal"
      }
    }
  ],
  "content_after": [
    {
      "type": "text",
      "context": {
        "bodytext": "Content After"
      }
    }
  ]
}

No notes defined.