<div id="root">
    <header class="grav-c-page-header">
        <div>
            <div class="grav-c-page-header__logo">
                <a href="./homepage">
                    <svg role="img" class="grav-c-logotype" aria-labelledby="logo-buildit-logotype__title" width="300" height="33">
                        <use xlink:href="#logo-buildit-logotype"></use>
                    </svg></a>
            </div>
            <button class="grav-c-toggle-menu" type="button" aria-pressed="false" aria-label="Toggle navigation menu">
                <span class="grav-c-toggle-menu__icon"></span>
            </button>
            <nav class="grav-c-nav-menu">
                <ul>

                    <li>
                        <a class="grav-c-nav-link" href="./jobs">Jobs</a>
                    </li>

                    <li>
                        <a class="grav-c-nav-link" href="./locations">Locations</a>
                    </li>

                    <li class="grav-c-nav-menu__external-link">
                        <a class="grav-c-nav-link" href="./error-page">Fancy external website</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <h1>Page title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam risus ligula, sollicitudin vitae neque facilisis, vehicula ultrices orci. Aliquam ullamcorper pharetra felis at lacinia. Aenean fermentum lorem sed malesuada pulvinar. Nullam at velit sed nibh dapibus luctus. Mauris mauris lorem, commodo in mattis a, vulputate quis lectus. Integer blandit aliquam placerat. Sed aliquam, erat et efficitur tristique, eros arcu eleifend elit, vitae ultrices massa diam eget magna.</p>

    <h2>Sub-section</h2>
    <p>Quisque sagittis massa mauris, venenatis ultrices augue pellentesque sed. Suspendisse molestie orci ut molestie lacinia. Nulla nisi magna, convallis ut laoreet eu, congue mattis metus. Nulla congue nisl ac maximus tincidunt. Donec mauris massa, eleifend quis lectus id, accumsan iaculis urna. Cras sed elit leo. Curabitur rhoncus, odio sed tempor dignissim, leo est rhoncus mauris, molestie aliquet mi arcu at nunc. Pellentesque in fringilla orci.</p>
    <p>Proin scelerisque dolor nec mi lacinia, vel finibus metus elementum. Nulla quis accumsan purus, ac fringilla erat. In ultricies risus eros, vitae mattis risus lobortis imperdiet. In hac habitasse platea dictumst. Vivamus convallis metus enim, eu porta est feugiat in.</p>
    <p>Pellentesque pellentesque tellus felis, eu dictum quam semper nec. Sed libero lacus, consequat eu ex sed, vehicula accumsan urna. Suspendisse fringilla ultricies nunc, vel eleifend ligula scelerisque sit amet. Donec ac turpis dignissim, dictum ipsum et, egestas lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget nunc eget turpis ullamcorper aliquam. Phasellus at quam in nulla maximus interdum id eget dui. Nulla sed viverra massa. Suspendisse luctus, mi ac mattis dictum, diam urna congue est, vitae imperdiet risus ligula in nulla. Etiam in fringilla nunc.</p>

    <h2>Another sub-section</h2>
    <p>Cras interdum mauris non lectus dapibus rhoncus. Nunc lacinia lorem finibus neque suscipit, congue congue nunc tempor. Mauris nec gravida justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec commodo neque nibh, id vestibulum purus scelerisque a. Nullam pellentesque tincidunt nisl at sagittis. Maecenas suscipit convallis eros, gravida finibus nibh scelerisque non. Sed mattis nisl libero, sed ultricies eros rhoncus a. Sed ultricies nulla in ornare hendrerit. Ut non congue eros. In consectetur tortor ut purus accumsan rhoncus. Ut mollis venenatis quam. Mauris id luctus sem. Quisque molestie dui vel neque aliquam suscipit. Aliquam erat volutpat.</p>
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li>Nulla sollicitudin diam in volutpat rutrum.</li>
        <li>Aliquam laoreet velit ut sagittis lobortis.</li>
        <li>Sed sit amet augue ut felis euismod posuere dictum quis lacus.</li>
        <li>Nullam condimentum urna nec erat aliquam, eget mollis nisl iaculis.</li>
    </ul>
    <p>Donec interdum luctus felis eget vulputate. Phasellus mollis mauris et mi tincidunt, quis semper leo tempus. Aenean ac lorem vitae metus suscipit ultrices quis nec purus. Curabitur ullamcorper, odio quis vulputate ultricies, nulla tortor ultrices tortor, vel placerat risus mi ac diam. Nam elementum vestibulum elit in luctus. Aliquam erat volutpat. Proin ut nulla ut ipsum suscipit sodales. In in lorem congue, fermentum massa at, auctor dolor. Curabitur mattis sed orci ut dictum. Donec ornare arcu eu rhoncus placerat. Aliquam tempor quis mi sed dignissim. Nunc id massa sed eros condimentum hendrerit. Nam a interdum neque, vehicula lacinia nibh. In in neque eros. Etiam ac eleifend purus, eu congue turpis. Fusce aliquam condimentum urna.</p>
    <blockquote>Vivamus ligula enim, pulvinar vel accumsan ac, gravida at dolor. Aenean commodo nec odio at ultricies. Pellentesque fermentum hendrerit libero, eget viverra quam varius ut.</blockquote>
    <p>In hac habitasse platea dictumst. Donec cursus bibendum justo efficitur scelerisque. In rutrum nisl nec nunc aliquet scelerisque. Etiam et nisl accumsan neque condimentum aliquam at pellentesque diam. Nam lobortis justo vel mi lobortis posuere. Proin eget molestie tortor, non dignissim erat. Phasellus faucibus odio vitae ex aliquet, in commodo tortor facilisis.</p>

    <h2>Last sub-section</h2>
    <h3>Sub-sub-section</h3>
    <p>Duis blandit maximus tellus eget dictum. Pellentesque mi est, fermentum at commodo eget, vehicula id est. Nulla facilisi. Donec fringilla congue dui vitae vehicula. Maecenas eleifend, odio ac ultrices tempus, orci eros tincidunt risus, vitae vestibulum lorem erat volutpat felis. Mauris ut finibus purus. Nam non elementum urna, ut efficitur lacus. Nam eu volutpat ante.</p>
    <h3>Sub-sub-section 2</h3>
    <p>Mauris lacinia nisl eget euismod consectetur. Duis porttitor mauris venenatis massa aliquet, ac aliquet tellus feugiat. Vestibulum nec est tortor. Vivamus et nisi elit. Quisque eget metus diam. Ut a convallis erat. Nulla facilisi. In a porta urna.</p>
    <p>Nunc sagittis sem sed viverra pharetra. Praesent venenatis posuere enim, non feugiat dolor pellentesque vel. Morbi ultrices augue id dolor sollicitudin, at elementum odio auctor. </p>

    <footer class="grav-c-page-footer">
        <div>
            <svg role="img" class="grav-c-logotype" aria-labelledby="logo-buildit-logotype__title" width="300" height="33">
                <use xlink:href="#logo-buildit-logotype"></use>
            </svg>

            <div class="grav-c-page-footer__lists">
                <ul>
                    <li><a href="#">Stories</a></li>
                    <li><a href="#">People</a></li>
                    <li><a href="#">Jobs</a></li>
                </ul>

                <ul>
                    <li><a href="#">Terms</a></li>
                    <li><a href="#">Accessibility</a></li>
                    <li><a href="https://wiprodigital.com/privacy-policy">Privacy &amp; Cookie Policy</a></li>
                </ul>
            </div>

            <p>
                &copy; 2019 <strong>Buildit</strong>. All rights reserved.
            </p>
        </div>
    </footer>

</div>
<div id="root">
  {% include '@page-header' %}
  {% include '@rendered-markdown' %}
  {% include '@page-footer' %}
</div>
{
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
  "url": "#",
  "listItems": [
    {
      "htmlContent": "Some list item content"
    },
    {
      "htmlContent": "More list item content"
    },
    {
      "htmlContent": "Even more list item content"
    },
    {
      "htmlContent": "I can't believe there's still more list item content"
    },
    {
      "htmlContent": "Seriously?! That's enough now."
    }
  ],
  "footer": {
    "copy": "&copy; 2019 <strong>Buildit</strong>. All rights reserved.",
    "linksA": [
      {
        "label": "Stories",
        "url": "#"
      },
      {
        "label": "People",
        "url": "#"
      },
      {
        "label": "Jobs",
        "url": "#"
      }
    ],
    "linksB": [
      {
        "label": "Terms",
        "url": "#"
      },
      {
        "label": "Accessibility",
        "url": "#"
      },
      {
        "label": "Privacy & Cookie Policy",
        "url": "https://wiprodigital.com/privacy-policy"
      }
    ],
    "class": "grav-c-page-footer"
  },
  "hero": {
    "pullout": "Big, attention-grabbing headline",
    "paragraph": "Witty subtitle",
    "cta": {
      "text": "Clickbaity label",
      "url": "#"
    }
  },
  "img": {
    "random": {
      "src": "/images/img-random-1.png",
      "alt": "A placeholder image with an arbitrary aspect ratio."
    },
    "square": {
      "src": "/images/img-1x1.png",
      "alt": "A placeholder image with a perfect square (1:1) aspect ratio."
    },
    "tv": {
      "src": "/images/img-4x3.png",
      "alt": "A placeholder image with a 4:3 aspect ratio, like an old TV."
    },
    "widescreen": {
      "src": "/images/img-16x9.png",
      "alt": "A placeholder image with a 16:9 aspect ratio, like a widescreen TV."
    },
    "logo": {
      "src": "/images/img-random-2.png",
      "alt": "A test image for a logo with an arbitrary aspect ratio."
    }
  },
  "title": "Page title",
  "header": {
    "url": "./homepage",
    "links": [
      {
        "text": "Jobs",
        "url": "./jobs"
      },
      {
        "text": "Locations",
        "url": "./locations"
      }
    ],
    "externalLinks": [
      {
        "text": "Fancy external website",
        "url": "./error-page"
      }
    ],
    "withClass": true
  },
  "sections": [
    {
      "title": "Example section",
      "class": "grav-o-full-bleed__content",
      "content": [
        {
          "paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
        }
      ]
    }
  ],
  "section": {
    "title": "This is the title for a section",
    "class": "grav-o-full-bleed__content",
    "content": [
      {
        "paragraph": "Paragraph lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "blockquote": "Blockquote lorem ipsum dolor sit amet, consectetur adipisicing elit"
      },
      {
        "twoColumnsList": [
          {
            "htmlContent": "Vestibulum auctor dapibus neque."
          },
          {
            "htmlContent": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
          },
          {
            "htmlContent": "Aliquam tincidunt mauris eu risus."
          },
          {
            "htmlContent": "Labore et dolore magna aliqua."
          },
          {
            "htmlContent": "Phasellus tempus, orci non mattis sagittis."
          }
        ]
      },
      {
        "inlineRow": [
          {
            "text": "First link",
            "url": "#"
          },
          {
            "text": "Second link",
            "url": "#"
          },
          {
            "text": "Third link",
            "url": "#"
          }
        ]
      },
      {
        "imgCards": [
          {
            "title": "Some fascinating, attention-grabbing headling",
            "content": "Ideally, with a click-baity tagline that entices to you to visit!",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Brief description of this fascinating image"
            }
          },
          {
            "title": "Labore et dolore magna aliqua",
            "content": "Vestibulum pharetra arcu enim, nec porttitor quam ullamcorper et. Phasellus tempus, orci non mattis sagittis, lectus erat fringilla odio, nec auctor erat augue quis eros.",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Phasellus tempus, orci non mattis"
            }
          },
          {
            "title": "Nanotechnology immersion along the information highway",
            "content": "Leverage agile frameworks to provide a robust synopsis for high level overviews.",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Bring to the table win-win survival strategies"
            }
          }
        ]
      },
      {
        "imgLinks": [
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Image linke #1"
            }
          },
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-2.png",
              "alt": "Image linke #2"
            }
          },
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-3.png",
              "alt": "Image linke #3"
            }
          }
        ]
      }
    ]
  }
}

Example of a simple page whose top-level contents are not direct descendents of the <body> element, but instead wrapped in an intermediate container element. This is a pattern commonly used in single page apps (SPA), where a JavaScript framework expects to control all the DOM elements below a specific “root” element. Some frameworks, like React, advise against using <body> as that root though, so people commonly use a nested <div> or similar as their appication’s root.