<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">
<ul class="card-list card-list--linked">
<li class="card-list__item">
<article class="media-card media-card--red">
<div class="media-card__content">
<header class="media-card__header">
<h3 class="media-card__heading">Rachel Rank</h3>
<span class="media-card__subtitle">Chief Operating Officer</span>
</header>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis. Ipsum, maiores cumque quo atque. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni. </p>
</div>
<div class="media-card__image-wrapper">
<div class="media-card__image" style="background-image: url(https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg)"></div>
</div>
</article>
</li>
<li class="card-list__item">
<article class="media-card media-card--red">
<div class="media-card__content">
<header class="media-card__header">
<h3 class="media-card__heading">Rachel Rank</h3>
<span class="media-card__subtitle">Chief Operating Officer</span>
</header>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis. Ipsum, maiores cumque quo atque. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni. </p>
</div>
<div class="media-card__image-wrapper">
<div class="media-card__image" style="background-image: url(https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg)"></div>
</div>
</article>
</li>
<li class="card-list__item">
<article class="media-card media-card--red">
<div class="media-card__content">
<header class="media-card__header">
<h3 class="media-card__heading">Rachel Rank</h3>
<span class="media-card__subtitle">Chief Operating Officer</span>
</header>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis. Ipsum, maiores cumque quo atque. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni. </p>
</div>
<div class="media-card__image-wrapper">
<div class="media-card__image" style="background-image: url(https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg)"></div>
</div>
</article>
</li>
<li class="card-list__item">
<article class="media-card media-card--red">
<div class="media-card__content">
<header class="media-card__header">
<h3 class="media-card__heading">Rachel Rank</h3>
<span class="media-card__subtitle">Chief Operating Officer</span>
</header>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis. Ipsum, maiores cumque quo atque. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni. </p>
</div>
<div class="media-card__image-wrapper">
<div class="media-card__image" style="background-image: url(https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg)"></div>
</div>
</article>
</li>
<li class="card-list__item">
<article class="media-card media-card--red">
<div class="media-card__content">
<header class="media-card__header">
<h3 class="media-card__heading">Rachel Rank</h3>
<span class="media-card__subtitle">Chief Operating Officer</span>
</header>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis. Ipsum, maiores cumque quo atque. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni. </p>
</div>
<div class="media-card__image-wrapper">
<div class="media-card__image" style="background-image: url(https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg)"></div>
</div>
</article>
</li>
</ul>
</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>
{% extends '@layout' %}
{% block header %}
{% render '@hero' %}
{% endblock %}
{% block main_content %}
<div class="layout__content-inner">
<ul class="card-list card-list--linked">
{% for i in range(5) %}
<li class="card-list__item">
{% render '@media-card' %}
</li>
{% endfor %}
</ul>
</div>
{% endblock %}
/* No context defined. */
No notes defined.