<div class="layout layout--two-columns">

    <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">
            <div class="prose">
                <section class="prose__section">
                    <div id="templates" class="section">
                        <h2>Templates</h2>
                        <p>Two standard templates are available.</p>
                    </div>
                </section>

                <div class="prose__section">

                    <section class="grid grid--two-columns">
                        <div class="grid__1">

                            <div class="prose-card prose-card--orange">
                                <div class="prose-card__content">
                                    <img class="prose-card__image" src="/images/icon-spreadsheet.svg" alt="">
                                    <div class="align-left">
                                        <h3 class="prose-card__title">Spreadsheet Template (Excel)</h3>
                                        <p class="prose-card__text">With user-friendly column headings, summary sheet and tabs for additional information. <br>
                                            <strong>(CSV versions also available.)</strong>
                                        </p>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="grid__1">

                            <div class="prose-card prose-card--orange">
                                <div class="prose-card__content">
                                    <img class="prose-card__image" src="/images/icon-json.svg" alt="">
                                    <div class="align-left">
                                        <h3 class="prose-card__title">360Giving JSON Schemas</h3>
                                        <p class="prose-card__text">Provide the canonical definition of fields, as well as developer-friendly structure for working with 360Giving data.</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </section>

                </div>

            </div>

            <div class="prose">
                <section class="prose__section prose__intro">
                    <h1 class="h1">Spreadsheet format</h1>
                    <p class="intro">To produce 360Giving data in a spreadsheet, it is possible to start with an empty spreadsheet and construct the column titles (and any additional sheets), using the information given below.</p>
                </section>

                <section class="prose__section">
                    <p>Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Fuga nesciunt culpa pariatur assumenda corrupti consectetur quibusdam reprehenderit commodi dolore natus praesentium repudiandae possimus sunt, eos, beatae quod maiores, incidunt soluta!</p>

                    <div class="prose">

                        <figure>
                            <img src="https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg" alt="">
                            <figcaption>Lorem ipsum, dolor, sit amet consectetur adipisicing elit. <em>Fuga deleniti architecto nisi</em>, rerum aliquid aperiam minima <strong>saepe magnam eum. Odit aliquid similique magnam minima</strong>, corrupti, aliquam laudantium eos asperiores possimus?</figcaption>
                        </figure>

                    </div>

                    <h2>This is a level 2 heading</h2>

                    <ol>
                        <li>Where data producers have more complex information, for example where a grant has many beneficiary locations, we call this a One to many relationships. Information about how to create data with One to many relationships is described below.</li>
                        <li>The 360Giving Spreadsheet <a href="#">template consists</a> of a ‘grants’ sheet which contains the most common data fields.</li>
                        <li>The Additional fields section provides details of all other possible fields that can be reported. (These are derived from the 360Giving JSON Schemas ).</li>
                    </ol>

                    <h3>Nested list</h3>

                    <ol>
                        <li>Where data producers have more complex information, for example where a grant has many beneficiary locations, we call this a One to many relationships. Information about how to create data with One to many relationships is described below.</li>
                        <li>
                            <p>The 360Giving Spreadsheet <a href="#">template consists</a> of a ‘grants’ sheet which contains the most common data fields.</p>
                            <blockquote>
                                <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
                            </blockquote>
                            <ul>
                                <li>Where data producers have more complex information, for example where a grant has many beneficiary locations, we call this a One to many relationships. Information about how to create data with One to many relationships is described below.</li>
                                <li>The 360Giving Spreadsheet template consists of a ‘grants’ sheet which contains the most common data fields.</li>
                                <li>The Additional fields section provides details of all other possible fields that can be reported. (These are derived from the 360Giving JSON Schemas ).</li>
                            </ul>
                        </li>
                        <li>The Additional fields section provides details of all other possible fields that can be reported. (These are derived from the 360Giving JSON Schemas ).</li>
                    </ol>

                    <h4>This is a heading 4</h4>

                    <blockquote>
                        <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
                        <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
                        <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
                        <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
                    </blockquote>

                    <h2>Spreadsheet template</h2>
                    <p>For convenience we provide a <a href="#">360Giving Spreadsheet Template</a> that can be used directly, or adapted to your needs.</p>
                    <p>The template is a multi-sheet <strong><a href="#">spreadsheet</a></strong>, and each sheet is described below.</p>
                    <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>

                    <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>

                    <ul>
                        <li>Where data producers have more complex information, for example where a grant has many beneficiary locations, we call this a One to many relationships. Information about how to create data with One to many relationships is described below.</li>
                        <li>The 360Giving Spreadsheet template consists of a ‘grants’ sheet which contains the most common data fields.</li>
                        <li>The Additional fields section provides details of all other possible fields that can be reported. (These are derived from the 360Giving JSON Schemas ).</li>
                    </ul>

                    <h5>This is a heading 5</h5>
                    <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 an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
                    <p>Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Fuga nesciunt culpa pariatur assumenda corrupti consectetur quibusdam reprehenderit commodi dolore natus praesentium repudiandae possimus sunt, eos, beatae quod maiores, incidunt soluta!</p>

                    <p>Ea incidunt maxime sunt ipsa repellat dolorem, aperiam quas nemo natus tempore enim id totam blanditiis error rerum debitis vel laboriosam doloribus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea incidunt maxime sunt ipsa repellat dolorem, aperiam quas nemo natus tempore enim id totam blanditiis error rerum debitis vel laboriosam doloribus.</p>

                    <div class="box box--teal">
                        <h3 class="box__heading">Developers</h3>
                        <p>For a JSON feed of published datasets visit <a href="http://standard.threesixtygiving.org/en/latest/getdata/" target="_blank">standard.threesixtygiving.org</a></p>
                    </div>

                    <h3>Spreadsheet</h3>
                    <p>Data placed in a spreadsheet can make use of easy to read, user-friendly column titles, and is ideal for recording one grant per row. This is the most common format that publishers choose. More complex representations of data can also be reported if required.</p>

                    <div class="table table--zebra">
                        <table>

                            <thead>
                                <th>Title</th>
                                <th>Description</th>
                                <th>Type</th>
                                <th>Required</th>
                            </thead>

                            <tbody>

                                <tr>
                                    <td class="table__lead-cell" data-header="Title">Identifier</td>
                                    <td data-header="Description">The unique identifier for this grant. Made up of your 360Giving prefix, and an identifier from your records. See the 360Giving Grant identifier guidance for details.</td>
                                    <td data-header="Type"><code>string</code></td>
                                    <td data-header="Required" class="table__checks">

                                        <i class="material-icons table--true">check</i>

                                    </td>
                                </tr>

                                <tr>
                                    <td class="table__lead-cell" data-header="Title">Title</td>
                                    <td data-header="Description">A title for this grant activity. This should be under 140 characters long.</td>
                                    <td data-header="Type"><code>string</code></td>
                                    <td data-header="Required" class="table__checks">

                                        <i class="material-icons table--true">check</i>

                                    </td>
                                </tr>

                                <tr>
                                    <td class="table__lead-cell" data-header="Title">Description</td>
                                    <td data-header="Description">A short description of this grant activity.</td>
                                    <td data-header="Type"><code>string</code></td>
                                    <td data-header="Required" class="table__checks">

                                        <i class="material-icons table--true">check</i>

                                    </td>
                                </tr>

                                <tr>
                                    <td class="table__lead-cell" data-header="Title">Currency</td>
                                    <td data-header="Description">The currency used in amounts. Use the three-letter <a href='#'>currency code from ISO 4217</a> eg: Use GBP for Pounds Sterling.</td>
                                    <td data-header="Type"><code>string</code></td>
                                    <td data-header="Required" class="table__checks">

                                        <i class="material-icons table--true">check</i>

                                    </td>
                                </tr>

                                <tr>
                                    <td class="table__lead-cell" data-header="Title">Amount Applied For</td>
                                    <td data-header="Description">Total amount applied for in numbers (do not include commas or currency symbols such as £). If you have provided detailed transaction information on a separate table, this should equal the sum of all the application transactions for this grant.</td>
                                    <td data-header="Type"><code>number</code></td>
                                    <td data-header="Required" class="table__checks">

                                        <i class="material-icons table--false">close</i>

                                    </td>
                                </tr>

                                <tr>
                                    <td class="table__lead-cell" data-header="Title">Amount Awarded</td>
                                    <td data-header="Description">Total amount awarded in numbers (do not include commas or currency symbols such as £). If you have provided detailed transaction information on a separate table, this should equal the sum of all the award transactions for this grant.</td>
                                    <td data-header="Type"><code>number</code></td>
                                    <td data-header="Required" class="table__checks">

                                        <i class="material-icons table--true">check</i>

                                    </td>
                                </tr>

                                <tr>
                                    <td class="table__lead-cell" data-header="Title">Amount Disbursed</td>
                                    <td data-header="Description">Total amount disbursed (paid) to this grantee when this record was last updated (in numbers: do not include commas or currency symbols such as £)). If you have provided detailed transaction information on a separate table, this should equal the sum of all the disbursement transactions for this grant.</td>
                                    <td data-header="Type"><code>number</code></td>
                                    <td data-header="Required" class="table__checks">

                                        <i class="material-icons table--false">close</i>

                                    </td>
                                </tr>

                                <tr>
                                    <td class="table__lead-cell" data-header="Title">Award Date</td>
                                    <td data-header="Description">When was the decision to award this grant made. The date should be written as YYYY-MM-DD, or in full date-time format.</td>
                                    <td data-header="Type"><code>string</code></td>
                                    <td data-header="Required" class="table__checks">

                                        <i class="material-icons table--true">check</i>

                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>

                    <h4>json</h4>
                    <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 an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

                    <ol>
                        <li>Where data producers have more complex information, for example where a grant has many beneficiary locations, we call this a One to many relationships. Information about how to create data with One to many relationships is described below.</li>
                        <li>The 360Giving Spreadsheet template consists of a ‘grants’ sheet which contains the most common data fields.</li>
                        <li>The Additional fields section provides details of all other possible fields that can be reported. (These are derived from the 360Giving JSON Schemas ).</li>
                    </ol>

                    <h1>This is a heading 1</h1>
                    <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 an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

                    <h2>This is a heading 2</h2>
                    <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 an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

                    <h3>This is a heading 3</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 an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

                    <h4>This is a heading 4</h4>
                    <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 an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

                    <h5>This is a heading 5</h5>
                    <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 an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

                    <h6>This is a heading 6</h6>
                    <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 an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
                </section>
            </div> // Adding another Prose block, just to make sure things work together.
        </div>

    </main>
    <aside class="layout__sidebar">

        <div class="sidebar-section sidebar-section--orange">
            <div class="layout__content-inner">
                <div class="sidebar-section__item">
                    <ul class="sidebar-list">

                        <li class="sidebar-list__item" aria-hidden>

                            <span class="sidebar-list__trigger">
                                <i class="material-icons">add</i>
                            </span>

                            <a href="">Reference</a>

                            <ul class="sidebar-list">

                                <li class="sidebar-list__item" aria-hidden>

                                    <span class="sidebar-list__trigger">
                                        <i class="material-icons">add</i>
                                    </span>

                                    <a href="">Data formats</a>

                                    <ul class="sidebar-list">

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Spreadsheet format</a>

                                        </li>

                                        <li class="sidebar-list__item" aria-hidden>

                                            <span class="sidebar-list__trigger">
                                                <i class="material-icons">add</i>
                                            </span>

                                            <a href="">Additional fields</a>

                                            <ul class="sidebar-list">

                                                <li class="sidebar-list__item" aria-hidden>
                                                    <a href="">Actual Dates</a>
                                                </li>

                                                <li class="sidebar-list__item" aria-hidden>
                                                    <a href="">Planned Dates</a>
                                                </li>

                                            </ul>

                                        </li>

                                    </ul>

                                </li>

                                <li class="sidebar-list__item" aria-hidden>

                                    <span class="sidebar-list__trigger">
                                        <i class="material-icons">add</i>
                                    </span>

                                    <a href="">One to many relationships</a>

                                    <ul class="sidebar-list">

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Additional sheets</a>

                                        </li>

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Numbering</a>

                                        </li>

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Multiple Rows</a>

                                        </li>

                                    </ul>

                                </li>

                                <li class="sidebar-list__item" aria-hidden>

                                    <span class="sidebar-list__trigger">
                                        <i class="material-icons">add</i>
                                    </span>

                                    <a href="">Field Guidance</a>

                                    <ul class="sidebar-list">

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Dates and Times</a>

                                        </li>

                                    </ul>

                                </li>

                                <li class="sidebar-list__item" aria-hidden>

                                    <a href="">Conformance</a>

                                </li>

                            </ul>

                        </li>

                        <li class="sidebar-list__item" aria-hidden>

                            <span class="sidebar-list__trigger">
                                <i class="material-icons">add</i>
                            </span>

                            <a href="">Reference</a>

                            <ul class="sidebar-list">

                                <li class="sidebar-list__item" aria-hidden>

                                    <span class="sidebar-list__trigger">
                                        <i class="material-icons">add</i>
                                    </span>

                                    <a href="">Data formats</a>

                                    <ul class="sidebar-list">

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Spreadsheet format</a>

                                        </li>

                                        <li class="sidebar-list__item" aria-hidden>

                                            <span class="sidebar-list__trigger">
                                                <i class="material-icons">add</i>
                                            </span>

                                            <a href="">Additional fields</a>

                                            <ul class="sidebar-list">

                                                <li class="sidebar-list__item" aria-hidden>
                                                    <a href="">Actual Dates</a>
                                                </li>

                                                <li class="sidebar-list__item" aria-hidden>
                                                    <a href="">Planned Dates</a>
                                                </li>

                                            </ul>

                                        </li>

                                    </ul>

                                </li>

                                <li class="sidebar-list__item" aria-hidden>

                                    <span class="sidebar-list__trigger">
                                        <i class="material-icons">add</i>
                                    </span>

                                    <a href="">One to many relationships</a>

                                    <ul class="sidebar-list">

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Additional sheets</a>

                                        </li>

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Numbering</a>

                                        </li>

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Multiple Rows</a>

                                        </li>

                                    </ul>

                                </li>

                                <li class="sidebar-list__item" aria-hidden>

                                    <span class="sidebar-list__trigger">
                                        <i class="material-icons">add</i>
                                    </span>

                                    <a href="">Field Guidance</a>

                                    <ul class="sidebar-list">

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Dates and Times</a>

                                        </li>

                                    </ul>

                                </li>

                                <li class="sidebar-list__item" aria-hidden>

                                    <a href="">Conformance</a>

                                </li>

                            </ul>

                        </li>

                        <li class="sidebar-list__item" aria-hidden>

                            <span class="sidebar-list__trigger">
                                <i class="material-icons">add</i>
                            </span>

                            <a href="">Reference</a>

                            <ul class="sidebar-list">

                                <li class="sidebar-list__item" aria-hidden>

                                    <span class="sidebar-list__trigger">
                                        <i class="material-icons">add</i>
                                    </span>

                                    <a href="">Data formats</a>

                                    <ul class="sidebar-list">

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Spreadsheet format</a>

                                        </li>

                                        <li class="sidebar-list__item" aria-hidden>

                                            <span class="sidebar-list__trigger">
                                                <i class="material-icons">add</i>
                                            </span>

                                            <a href="">Additional fields</a>

                                            <ul class="sidebar-list">

                                                <li class="sidebar-list__item" aria-hidden>
                                                    <a href="">Actual Dates</a>
                                                </li>

                                                <li class="sidebar-list__item" aria-hidden>
                                                    <a href="">Planned Dates</a>
                                                </li>

                                            </ul>

                                        </li>

                                    </ul>

                                </li>

                                <li class="sidebar-list__item" aria-hidden>

                                    <span class="sidebar-list__trigger">
                                        <i class="material-icons">add</i>
                                    </span>

                                    <a href="">One to many relationships</a>

                                    <ul class="sidebar-list">

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Additional sheets</a>

                                        </li>

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Numbering</a>

                                        </li>

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Multiple Rows</a>

                                        </li>

                                    </ul>

                                </li>

                                <li class="sidebar-list__item" aria-hidden>

                                    <span class="sidebar-list__trigger">
                                        <i class="material-icons">add</i>
                                    </span>

                                    <a href="">Field Guidance</a>

                                    <ul class="sidebar-list">

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Dates and Times</a>

                                        </li>

                                    </ul>

                                </li>

                                <li class="sidebar-list__item" aria-hidden>

                                    <a href="">Conformance</a>

                                </li>

                                <li class="sidebar-list__item" aria-hidden>

                                    <span class="sidebar-list__trigger">
                                        <i class="material-icons">add</i>
                                    </span>

                                    <a href="">Reference</a>

                                    <ul class="sidebar-list">

                                        <li class="sidebar-list__item" aria-hidden>

                                            <span class="sidebar-list__trigger">
                                                <i class="material-icons">add</i>
                                            </span>

                                            <a href="">Data formats</a>

                                            <ul class="sidebar-list">

                                                <li class="sidebar-list__item" aria-hidden>
                                                    <a href="">Spreadsheet format</a>
                                                </li>

                                                <li class="sidebar-list__item" aria-hidden>
                                                    <a href="">Additional fields</a>
                                                </li>

                                            </ul>

                                        </li>

                                        <li class="sidebar-list__item" aria-hidden>

                                            <span class="sidebar-list__trigger">
                                                <i class="material-icons">add</i>
                                            </span>

                                            <a href="">One to many relationships</a>

                                            <ul class="sidebar-list">

                                                <li class="sidebar-list__item" aria-hidden>
                                                    <a href="">Additional sheets</a>
                                                </li>

                                                <li class="sidebar-list__item" aria-hidden>
                                                    <a href="">Numbering</a>
                                                </li>

                                                <li class="sidebar-list__item" aria-hidden>
                                                    <a href="">Multiple Rows</a>
                                                </li>

                                            </ul>

                                        </li>

                                        <li class="sidebar-list__item" aria-hidden>

                                            <span class="sidebar-list__trigger">
                                                <i class="material-icons">add</i>
                                            </span>

                                            <a href="">Field Guidance</a>

                                            <ul class="sidebar-list">

                                                <li class="sidebar-list__item" aria-hidden>
                                                    <a href="">Dates and Times</a>
                                                </li>

                                            </ul>

                                        </li>

                                        <li class="sidebar-list__item" aria-hidden>

                                            <a href="">Conformance</a>

                                        </li>

                                    </ul>

                                </li>

                            </ul>

                        </li>

                    </ul>

                    <div class="sidebar-content sidebar-content--orange">
                        <h3 class="sidebar-content__heading">This is a heading in the sidebar</h3>
                        <p class="sidebar-content__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque dolorem molestias numquam, necessitatibus perferendis consequatur asperiores, veritatis similique illum repudiandae quibusdam consectetur mollitia doloribus officia. Beatae nobis atque molestias pariatur voluptas totam consequatur, neque obcaecati commodi architecto modi laudantium ab suscipit optio impedit ea aut?
                        </p>

                        <figure class="sidebar-content__image">
                            <img src="https://images.unsplash.com/photo-1529655683826-aba9b3e77383?ixlib=rb-1.2.1&amp;amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;amp;auto=format&amp;amp;fit=crop&amp;amp;w=802&amp;amp;q=80" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, quod, voluptatibus. Ex id, autem distinctio.">
                            <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, quod, voluptatibus. Ex id, autem distinctio.</figcaption>
                        </figure>

                    </div>

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

    </aside>

    <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--two-columns' %}

{% block main_content %}
  <div class="layout__content-inner">
    <div class="prose">
      <section class="prose__section">
        <div id="templates" class="section">
          <h2>Templates</h2>
          <p>Two standard templates are available.</p>  
        </div>
      </section>
      
      <div class="prose__section">
        
        <section class="grid grid--two-columns">
          <div class="grid__1">
            
            <div class="prose-card prose-card--orange">
              <div class="prose-card__content">
                <img class="prose-card__image" src="/images/icon-spreadsheet.svg" alt="">
                <div class="align-left">
                  <h3 class="prose-card__title">Spreadsheet Template (Excel)</h3>
                  <p class="prose-card__text">With user-friendly column headings, summary sheet and tabs for additional information. <br>
                  <strong>(CSV versions also available.)</strong></p>
                </div>
              </div>
            </div>

          </div>

          <div class="grid__1">
        
            <div class="prose-card prose-card--orange">
              <div class="prose-card__content">
                <img class="prose-card__image" src="/images/icon-json.svg" alt="">
                <div class="align-left">
                  <h3 class="prose-card__title">360Giving JSON Schemas</h3>
                  <p class="prose-card__text">Provide the canonical definition of fields, as well as developer-friendly structure for working with 360Giving data.</p>
                </div>
              </div>
            </div>

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

    {% render '@prose' %} // Adding another Prose block, just to make sure things work together. 
  </div>
  
{% endblock %}

{% block sidebar %}
  
  {% render '@sidebar-section' %}

{% endblock %}
/* No context defined. */

No notes defined.