<div class="layout layout--single-column">
<div class="top-bar layout__nav">
<button class="top-bar__menu-trigger"><i class="material-icons">menu</i></button>
<nav class="top-bar__menu contextual-menu">
<ul>
<li class="contextual-menu__item">
<a class="contextual-menu__button contextual-menu--active" ref="#" title="Home">
Home
</a>
</li>
<li class="contextual-menu__item">
<a class="contextual-menu__button" ref="#" title="About">
About
</a>
</li>
<li class="contextual-menu__item submenu">
<a class="contextual-menu__button" ref="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<ul class="submenu__list">
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
</ul>
</li>
<li class="contextual-menu__item">
<a class="contextual-menu__button contextual-menu--disabled" ref="/about.html" title="About">
About
</a>
</li>
<li class="contextual-menu__item submenu">
<a class="contextual-menu__button" ref="http://ccm.design" title="Test" target="_blank">
Test
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<ul class="submenu__list">
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Lael longer">
Button Lael longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="submenu__button" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
</ul>
</li>
</ul>
</nav>
<div class="off-canvas-menu" aria-hidden>
<button class="off-canvas-menu__trigger"><i class="material-icons">close</i></button>
<nav>
<ul class="off-canvas-menu__contextual">
<li class="off-canvas-menu__item">
<a href="#" class=" off-canvas-menu--active" title="Home">
Home
</a>
</li>
<li class="off-canvas-menu__item">
<a href="#" class="" title="About">
About
</a>
</li>
<li class="off-canvas-menu__item off-canvas-menu__submenu">
<a href="http://ccmdesign.ca" class="" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<ul class="submenu__list">
<li class="submenu__item">
<a class="" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<li class="submenu__item">
<a class="" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<li class="submenu__item">
<a class="" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
</ul>
</li>
<li class="off-canvas-menu__item">
<a href="/about.html" class=" off-canvas-menu--disabled" title="About">
About
</a>
</li>
<li class="off-canvas-menu__item off-canvas-menu__submenu">
<a href="http://ccm.design" class="" title="Test" target="_blank">
Test
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
<ul class="submenu__list">
<li class="submenu__item">
<a class="" href="#" title="Button Lael longer">
Button Lael longer
</a>
<li class="submenu__item">
<a class="" href="#" title="Button Label longer">
Button Label longer
</a>
<li class="submenu__item">
<a class="" href="http://ccmdesign.ca" title="CCM Design" target="_blank">
CCM Design
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
</ul>
</li>
</ul>
<ul class="off-canvas-menu__list">
<li class="off-canvas-menu__item off-canvas-menu--disabled">
<a href="http://ccm.design">
Test
</a>
</li>
<li class="off-canvas-menu__item">
<a href="http://ccm.design" target="_blank">
Test
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
</li>
<li class="off-canvas-menu__item
">
<h3 class="off-canvas-menu__heading">Menu Group Title</h3>
</li>
<li class="off-canvas-menu__item">
<a href="http://ccm.design">
Test
</a>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing elit</a>, 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>
</li>
<li class="off-canvas-menu__item">
<a href="http://ccm.design">
Test
</a>
</li>
<li class="off-canvas-menu__item">
<a href="http://ccm.design">
Test
</a>
</li>
<li class="off-canvas-menu__item
">
<h3 class="off-canvas-menu__heading">Menu Group Title</h3>
</li>
<li class="off-canvas-menu__item">
<a href="http://ccm.design">
Test
</a>
</li>
</ul>
</nav>
</div>
</div>
<header class="layout__header">
<div class="hero-section">
<div class="wrapper">
<div class="hero hero--orange">
<!-- .hero--orange, .hero--yellow, .hero--red -->
<div class="hero__column hero__logo">
<a href="/"><img src="/images/360-logos/main/360giving-logo.svg" alt="360 Giving"></a>
</div>
<div class="hero__column hero__lead">
<h2 class="hero__title">
This is the title of the Hero
</h2>
<p class="hero__blurb">
360 Resources is a repository of resources to help Data Champions make better informed decisions by leveraging other people’s experiences.
</p>
</div>
</div>
</div>
</div>
</header>
<main class="layout__content">
<div class="layout__content-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est voluptate, autem architecto consequuntur qui suscipit harum voluptas quis dolor, hic, amet culpa praesentium adipisci vel aperiam dolores! Deleniti impedit sunt vel iusto dolores ab, repellendus at laborum tenetur labore neque corporis, illum dolorem aliquam ipsa inventore reprehenderit! Neque, assumenda minus deleniti, officiis adipisci repellat totam aliquam eveniet facere facilis ab in asperiores ad labore accusantium, at sit culpa modi soluta, necessitatibus a aliquid voluptates. Libero deleniti perferendis illo officiis hic voluptatem minus, ipsam provident distinctio perspiciatis. Quasi recusandae iusto libero, beatae dolore! Nemo totam enim dicta sunt amet tempore, debitis optio quas. Saepe facilis hic sit corrupti. A beatae omnis nulla nihil doloribus temporibus molestias aspernatur, nisi tempore praesentium ut reprehenderit vel quis totam, tenetur dolor repudiandae atque molestiae assumenda maxime possimus necessitatibus odio ullam. Harum architecto placeat ullam, magnam, nostrum tempore dolorum nobis tenetur velit, laudantium libero! Vero dolore, voluptatum, atque dolor voluptas dignissimos alias perferendis veritatis. Eveniet dignissimos odit, eius excepturi iure, iste soluta nobis facere fugit quasi suscipit voluptas delectus id laboriosam quibusdam omnis similique, consequuntur officia?</p>
</div>
</main>
<footer class="layout__footer">
<div class="subscribe-section">
<div class="subscribe-section__wrapper">
<form action="#" class="subscribe-section__form">
<label for="subscribe" class="screen-reader-only">Subscribe</label>
<input type="email" id="subscribe" placeholder="Subscribe to our newsletter">
<input type="submit" value="Send">
</form>
</div>
</div>
<footer class="footer">
<div class="footer__row wrapper">
<div class="footer__column-2 footer__branding">
<div class="footer__logo"><img src="/images/360-giving-logo-white.svg" alt="360Giving"></div>
<p class="footer__tagline">Open data for more effective grantmaking</p>
</div>
<div class="footer__column-1 footer__social hide-print">
<a href="#" class="github-icon"><img src="/images/github-logo.svg" alt="Check our Github"></a>
<a href="#" class="twitter-icon"><img src="/images/twitter-logo.svg" alt="Follow us on Twitter"></a>
</div>
</div>
<div class="footer__row wrapper hide-print">
<div class="footer__column-2 footer__section medium-up">
<h3 class="footer__heading">Products</h3>
<ul>
<li><a href="#">GrantNav</a></li>
<li><a href="#">Insights</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Cove</a></li>
</ul>
</div>
<div class="footer__column-2 footer__section medium-up">
<h3 class="footer__heading">Other Products</h3>
<ul>
<li><a href="#">Data Registry</a></li>
<li><a href="#">Data Standard</a></li>
<li><a href="#">Data Challenge</a></li>
<li><a href="#">Data Champions</a></li>
</ul>
</div>
<div class="footer__column-3 footer__section">
<h3 class="footer__heading">360 Resources</h3>
<p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via</p>
</div>
<div class="footer__column-3 footer__section">
<h3 class="footer__heading">360 Resources</h3>
<p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via</p>
</div>
</div>
<div class="wrapper footer__small-print">
<p>
<strong>360 Giving</strong> (Trading as <strong>360Giving</strong>) is a registered charity <a href="https://register-of-charities.charitycommission.gov.uk/charity-details/?regId=1164883&subId=0">1164883</a> and a registered company <a href="https://beta.companieshouse.gov.uk/company/09668396">09668396</a>.
<br>Registered address: 360 Giving, c/o Sayer Vincent, 110 Golden Lane, London, EC1Y 0TG
</p>
</div>
<div class="footer__row wrapper footer__small-print">
<div class="footer__column-2">
<p>© Copyright 2021 360Giving.<br>Licensed under a <a href="#" target="_blank">Creative Commons Attribution 4.0 International License</a>.</p>
</div>
<div class="footer__column-2 footer__policy-links hide-print">
<p><a href="#">Privacy Notice</a> | <a href="#">Terms & Conditions</a> | <a href="#">Cookie Policy</a> | <a href="#">Take Down Policy</a> | <a href="#">License</a></p>
</div>
</div>
</footer>
</footer>
</div>
<div class="layout layout--single-column">
{% render '@top-bar' %}
<header class="layout__header">
{% block header %}
{% render '@hero' %}
{% endblock %}
</header>
<main class="layout__content">
{% block main_content %}
<div class="layout__content-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est voluptate, autem architecto consequuntur qui suscipit harum voluptas quis dolor, hic, amet culpa praesentium adipisci vel aperiam dolores! Deleniti impedit sunt vel iusto dolores ab, repellendus at laborum tenetur labore neque corporis, illum dolorem aliquam ipsa inventore reprehenderit! Neque, assumenda minus deleniti, officiis adipisci repellat totam aliquam eveniet facere facilis ab in asperiores ad labore accusantium, at sit culpa modi soluta, necessitatibus a aliquid voluptates. Libero deleniti perferendis illo officiis hic voluptatem minus, ipsam provident distinctio perspiciatis. Quasi recusandae iusto libero, beatae dolore! Nemo totam enim dicta sunt amet tempore, debitis optio quas. Saepe facilis hic sit corrupti. A beatae omnis nulla nihil doloribus temporibus molestias aspernatur, nisi tempore praesentium ut reprehenderit vel quis totam, tenetur dolor repudiandae atque molestiae assumenda maxime possimus necessitatibus odio ullam. Harum architecto placeat ullam, magnam, nostrum tempore dolorum nobis tenetur velit, laudantium libero! Vero dolore, voluptatum, atque dolor voluptas dignissimos alias perferendis veritatis. Eveniet dignissimos odit, eius excepturi iure, iste soluta nobis facere fugit quasi suscipit voluptas delectus id laboriosam quibusdam omnis similique, consequuntur officia?</p>
</div>
{% endblock %}
</main>
<footer class="layout__footer">
{% block footer %}
{% render '@footer-section' %}
{% endblock %}
</footer>
</div>
{
"layout": {
"hero": false,
"modifier": false,
"columns": "single-column"
}
}
This is just a structural component, and it should be invisible.
It offers two main options shown as variants.
layout--single-column
Single column layout, with a max-width of 960px, and centered content.
layout--narrow
this is a variant for layout--single-column where the max-width is set to 700px;
layout--two-columns
this variant features a sidebar on the left.
This is the high-level page layouts. Right now, it has two options.
This pattern is implemented using css grid layout.
We consider that all pages will have the three or four main layout pieces:
Header, Main Content, Footer and maybe a sidebar.
With CSS Grid Layout, we make sure that both Header and footer will
take up the necessary space, while the Main Content section will
expand to fill in the extra space. The Footer should always be aligned to the bottom edge of the viewport.