Article

<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>
<main>
    <article class="grav-o-full-bleed__content grav-c-article">
        <header class="grav-c-page-intro">
            <h1>Better Together</h1>
            <p>It was few anti-money laundering behind many zero knowledge proof, for Ethereum thought few flippening in many node! Although SHA 256 cost lots of amazing soft fork behind few double spend, Satoshi Nakamoto specialises in some!</p>

            <time datetime="Tue Jan 01 2019 12:00:00 GMT+0000 (Greenwich Mean Time)">1st January, 2019</time>

            <img src="../../images/buildit-roundtable-purple.jpg" alt="Brief description of this fascinating image">

        </header>
        <div class="grav-c-ostentatious-copy">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
            <figure><img src="/images/img-random-1.png" alt="An example image">
                <figcaption>Joe Steer</figcaption>
            </figure>
            <ul>
                <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</li>
                <li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</li>
                <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. uptate velit esse cillum dolore eu fugiat nulla pariatur. </li>
            </ul>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
            <blockquote>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            </blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p><img src="/images/img-random-5.png" alt="An example landscape image"></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <blockquote>
                <p>The quick brown fox jumps over the lazy dog.</p><cite>- Joe Bloggs</cite>
            </blockquote>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p><img src="/images/img-random-2.png" alt="An example portrait image"></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </article>
    <hr />
</main>
<aside class="grav-o-full-bleed__content">
    <ul class="grav-c-related-items">

        <li>
            <span>Next Story</span>
            <a href="#">
                Everything We Do is Driven By You
            </a>
        </li>

    </ul>

</aside>
<footer class="grav-u-color-scheme-contrast">
    <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>
{%- from '@page-intro' import pageIntroContents -%}

{%- extends '@basic-page' -%}

{%- block pageContent %}
<main>
  <article class="grav-o-full-bleed__content grav-c-article">
    <header class="grav-c-page-intro">
      {{ pageIntroContents(article.title, article.description, article.dateTime, article.img) | safe }}
    </header>
    <div class="grav-c-ostentatious-copy">
      {{ article.copy | safe }}
    </div>
  </article>
  <hr />
</main>
<aside class="grav-o-full-bleed__content">
  {% include '@related-items' %}
</aside>
{%- endblock -%}
{
  "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-u-color-scheme-contrast"
  },
  "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"
      }
    ]
  },
  "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"
            }
          }
        ]
      }
    ]
  },
  "bodyClass": "grav-o-full-bleed",
  "article": {
    "copy": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p><figure><img src=\"/images/img-random-1.png\" alt=\"An example image\"><figcaption>Joe Steer</figcaption></figure><ul><li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</li><li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</li><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</li><li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. uptate velit esse cillum dolore eu fugiat nulla pariatur. </li></ul><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p><blockquote><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p><img src=\"/images/img-random-5.png\" alt=\"An example landscape image\"></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><blockquote><p>The quick brown fox jumps over the lazy dog.</p><cite>- Joe Bloggs</cite></blockquote><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p><img src=\"/images/img-random-2.png\" alt=\"An example portrait image\"></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
    "title": "Better Together",
    "img": {
      "src": "../../images/buildit-roundtable-purple.jpg",
      "alt": "Brief description of this fascinating image"
    },
    "dateTime": {
      "human": "1st January, 2019",
      "machine": "Tue Jan 01 2019 12:00:00 GMT+0000 (Greenwich Mean Time)"
    },
    "description": "It was few anti-money laundering behind many zero knowledge proof, for Ethereum thought few flippening in many node! Although SHA 256 cost lots of amazing soft fork behind few double spend, Satoshi Nakamoto specialises in some!"
  },
  "relatedItems": [
    {
      "title": "Next Story",
      "text": "Everything We Do is Driven By You",
      "link": "#"
    }
  ]
}

There are no notes for this item.