<div class="layout layout--single-column">
    <div class="nav-bar nav-bar--minimal">
        <a class="nav-bar__home-button" href="/">
            <img src="assets/images/360-logos/registry/360registry-color.svg" alt="360Registry">
            <span class="nav-bar__product-name">Dashboard</span>
        </a>

        <nav class="nav-bar__nav-menu">
            <ul>
                <li class="nav-menu__item">
                    Based on data published by UK grantmakers in the 360Giving Data Standard
                </li>
            </ul>
        </nav>
    </div>

    <hr class="separator-light">

    <main>

        <div class="layout__content dashboard-page">
            <div class="cards-section">
                <section class="grid grid--five-columns">
                    <div class="grid__1">

                        <div class="base-card base-card--yellow">

                            <div class="base-card__content">
                                <h2 class="base-card__title">589,282</h2>
                                <p class="base-card__text">Grants</p>

                            </div>
                        </div>

                    </div>
                    <div class="grid__1">

                        <div class="base-card base-card--orange">

                            <div class="base-card__content">
                                <h2 class="base-card__title">260,921</h2>
                                <p class="base-card__text">Recipients</p>

                            </div>
                        </div>

                    </div>
                    <div class="grid__1">

                        <div class="base-card base-card--teal">

                            <div class="base-card__content">
                                <h2 class="base-card__title">172</h2>
                                <p class="base-card__text">Publishers</p>

                            </div>
                        </div>

                    </div>
                    <div class="grid__1">

                        <div class="base-card base-card--black">

                            <div class="base-card__content">
                                <h2 class="base-card__title">202</h2>
                                <p class="base-card__text">Funders</p>

                            </div>
                        </div>

                    </div>
                    <div class="grid__1">

                        <div class="base-card base-card--red">

                            <div class="base-card__content">
                                <h2 class="base-card__title">£107.9bn</h2>
                                <p class="base-card__text">Total</p>

                            </div>
                        </div>

                    </div>
                </section>

                <div class="grid-aligned align-right">
                    <small>last updated: 4 am 21st April 2021</small>
                </div>
            </div>

            <div class="tabs">
                <span class="tab tab--active">
                    <a class="tab__inner" href="/components/preview/dashboard--overview-by-grant">Overview</a>
                </span><span class="tab tab--inactive">
                    <a class="tab__inner" href="/components/preview/dashboard--publishers">Publishers</a>
                </span>
                <span class="tabs-empty-bar">
            </div>

            <div class="spacer-2"></div>

            <div class="dashboard-page__section-radios">
                <div class="radio-buttons">

                    <div class="radio-buttons__group">
                        <input class="screen-reader-only" type="radio" id="" name="radioGroupName" value="" checked>
                        <label class="radio-buttons__button" for="">Publisher</label>
                    </div>

                    <div class="radio-buttons__group">
                        <input class="screen-reader-only" type="radio" id="" name="radioGroupName" value="">
                        <label class="radio-buttons__button" for="">Grant</label>
                    </div>

                </div>

            </div>

            <div class="spacer-2 clearfix"></div>

            <div class="dashboard-stats-card">
                <div class="dashboard-stats-card__head">
                    <div class="dashboard-stats-card__left-side">
                        <h3 class="dashboard-stats-card__title">Location data</h3>
                        <p class="dashboard-stats-card__description">Location data helps users to understand where grants go.
                            Location codes allow grants data to be visualised in maps and to be
                            linked to official statistics.
                        </p>
                    </div>

                    <div class="dashboard-stats-card__right-side">
                        <a class="alert-tag alert-tag--anchor" href="#">
                            <span class="alert-tag__icon"><svg width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5.83333C6.70833 5.83333 6.41667 6.06667 6.41667 6.41667V9.91667C6.41667 10.2667 6.65 10.5 7 10.5C7.29167 10.5 7.58333 10.2667 7.58333 9.91667V6.41667C7.58333 6.125 7.29167 5.83333 7 5.83333ZM7 3.5C6.70833 3.5 6.41667 3.73333 6.41667 4.08333C6.41667 4.375 6.65 4.66667 7 4.66667C7.29167 4.66667 7.58333 4.43333 7.58333 4.08333C7.58333 3.79167 7.29167 3.5 7 3.5ZM7 0C3.15 0 0 3.15 0 7C0 10.85 3.15 14 7 14C10.85 14 14 10.85 14 7C14 3.15 10.85 0 7 0ZM7 12.8333C3.79167 12.8333 1.16667 10.2083 1.16667 7C1.16667 3.79167 3.79167 1.16667 7 1.16667C10.2083 1.16667 12.8333 3.79167 12.8333 7C12.8333 10.2083 10.2083 12.8333 7 12.8333Z" fill="#1D1536" />
                                </svg>
                            </span>
                            <span class="alert-tag__content">Learn more about location data</span>
                        </a>

                    </div>
                </div>

                <div class="dashboard-stats-card__groups">

                    <div class="dashboard-stats-card__group">
                        <span>
                            <div class="icon">

                                <i class="material-icons icon__mat-icon">person_pin_circle</i>

                            </div>
                        </span>
                        <span id="stat-0">Include recipient location codes</span>
                        <span aria-labelledby="stat-0" class="dashboard-stats-card__value">84%</span>
                    </div>

                    <div class="dashboard-stats-card__group">
                        <span>
                            <div class="icon">

                                <i class="material-icons icon__mat-icon">edit_location</i>

                            </div>
                        </span>
                        <span id="stat-1">Include grant location names</span>
                        <span aria-labelledby="stat-1" class="dashboard-stats-card__value">64%</span>
                    </div>

                    <div class="dashboard-stats-card__group">
                        <span>
                            <div class="icon">

                                <i class="material-icons icon__mat-icon">add_location</i>

                            </div>
                        </span>
                        <span id="stat-2">Include grant location codes</span>
                        <span aria-labelledby="stat-2" class="dashboard-stats-card__value">37%</span>
                    </div>

                </div>

                <div class="spacer-2"></div>

            </div>

            <div class="dashboard-stats-card">
                <div class="dashboard-stats-card__head">
                    <div class="dashboard-stats-card__left-side">
                        <h3 class="dashboard-stats-card__title">Organisation identifiers</h3>
                        <p class="dashboard-stats-card__description">Org IDs help users to understand who is involved in each grant. External
                            org IDs are used to show when funders give grants to the same
                            recipient and allow grants data to be linked to official sources of
                            organisation data.
                        </p>
                    </div>

                    <div class="dashboard-stats-card__right-side">
                        <a class="alert-tag alert-tag--anchor" href="#">
                            <span class="alert-tag__icon"><svg width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5.83333C6.70833 5.83333 6.41667 6.06667 6.41667 6.41667V9.91667C6.41667 10.2667 6.65 10.5 7 10.5C7.29167 10.5 7.58333 10.2667 7.58333 9.91667V6.41667C7.58333 6.125 7.29167 5.83333 7 5.83333ZM7 3.5C6.70833 3.5 6.41667 3.73333 6.41667 4.08333C6.41667 4.375 6.65 4.66667 7 4.66667C7.29167 4.66667 7.58333 4.43333 7.58333 4.08333C7.58333 3.79167 7.29167 3.5 7 3.5ZM7 0C3.15 0 0 3.15 0 7C0 10.85 3.15 14 7 14C10.85 14 14 10.85 14 7C14 3.15 10.85 0 7 0ZM7 12.8333C3.79167 12.8333 1.16667 10.2083 1.16667 7C1.16667 3.79167 3.79167 1.16667 7 1.16667C10.2083 1.16667 12.8333 3.79167 12.8333 7C12.8333 10.2083 10.2083 12.8333 7 12.8333Z" fill="#1D1536" />
                                </svg>
                            </span>
                            <span class="alert-tag__content">Learn more about organisation identifiers</span>
                        </a>

                    </div>
                </div>

                <div class="dashboard-stats-card__groups">

                    <div class="dashboard-stats-card__group">
                        <span>
                            <div class="icon">

                                <i class="material-icons icon__mat-icon">tag</i>

                            </div>
                        </span>
                        <span id="stat-0">Include charity or company nos.</span>
                        <span aria-labelledby="stat-0" class="dashboard-stats-card__value">64%</span>
                    </div>

                    <div class="dashboard-stats-card__group">
                        <span>
                            <div class="icon">

                                <i class="material-icons icon__mat-icon">confirmation_number</i>

                            </div>
                        </span>
                        <span id="stat-1">Include external org IDs for at least 50% of recipients</span>
                        <span aria-labelledby="stat-1" class="dashboard-stats-card__value">37%</span>
                    </div>

                </div>

                <div class="spacer-2"></div>

                <hr class="separator-light">

                <div class="graph-container">
                    <img src="assets/images/dashboard-samples/overview-graph-publishers-with-ids.png" alt="Publishers with IDs">
                </div>

            </div>

            <div class="dashboard-stats-card">
                <div class="dashboard-stats-card__head">
                    <div class="dashboard-stats-card__left-side">
                        <h3 class="dashboard-stats-card__title">Grant data</h3>
                        <p class="dashboard-stats-card__description">All 360Giving data includes information about award amounts,
                            award dates and the purpose of each grant. Information about the grant
                            duration, grant programmes names and classifications help users to
                            understand more context for each grant.
                        </p>
                    </div>

                    <div class="dashboard-stats-card__right-side">
                        <a class="alert-tag alert-tag--anchor" href="#">
                            <span class="alert-tag__icon"><svg width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5.83333C6.70833 5.83333 6.41667 6.06667 6.41667 6.41667V9.91667C6.41667 10.2667 6.65 10.5 7 10.5C7.29167 10.5 7.58333 10.2667 7.58333 9.91667V6.41667C7.58333 6.125 7.29167 5.83333 7 5.83333ZM7 3.5C6.70833 3.5 6.41667 3.73333 6.41667 4.08333C6.41667 4.375 6.65 4.66667 7 4.66667C7.29167 4.66667 7.58333 4.43333 7.58333 4.08333C7.58333 3.79167 7.29167 3.5 7 3.5ZM7 0C3.15 0 0 3.15 0 7C0 10.85 3.15 14 7 14C10.85 14 14 10.85 14 7C14 3.15 10.85 0 7 0ZM7 12.8333C3.79167 12.8333 1.16667 10.2083 1.16667 7C1.16667 3.79167 3.79167 1.16667 7 1.16667C10.2083 1.16667 12.8333 3.79167 12.8333 7C12.8333 10.2083 10.2083 12.8333 7 12.8333Z" fill="#1D1536" />
                                </svg>
                            </span>
                            <span class="alert-tag__content">Learn more about grant data</span>
                        </a>

                    </div>
                </div>

                <div class="dashboard-stats-card__groups">

                    <div class="dashboard-stats-card__group">
                        <span>
                            <div class="icon">

                                <i class="material-icons icon__mat-icon">event_note</i>

                            </div>
                        </span>
                        <span id="stat-0">Include grant duration</span>
                        <span aria-labelledby="stat-0" class="dashboard-stats-card__value">37%</span>
                    </div>

                    <div class="dashboard-stats-card__group">
                        <span>
                            <div class="icon">

                                <i class="material-icons icon__mat-icon">format_quote</i>

                            </div>
                        </span>
                        <span id="stat-1">Include programme names</span>
                        <span aria-labelledby="stat-1" class="dashboard-stats-card__value">64%</span>
                    </div>

                    <div class="dashboard-stats-card__group">
                        <span>
                            <div class="icon">

                                <i class="material-icons icon__mat-icon">label</i>

                            </div>
                        </span>
                        <span id="stat-2">Include classifications</span>
                        <span aria-labelledby="stat-2" class="dashboard-stats-card__value">64%</span>
                    </div>

                </div>

                <div class="spacer-2"></div>

            </div>

            <div class="dashboard-files-card">
                <div class="dashboard-files-card__head">
                    <div class="dashboard-files-card__left-side">
                        <h3 class="dashboard-files-card__title">Metadata</h3>
                        <p class="dashboard-files-card__description">Metadata is data about the data which helps users to understand more about the data and how it might be useful in a particular case.</p>
                    </div>

                    <div class="dashboard-files-card__right-side">
                        <a class="alert-tag alert-tag--anchor" href="#">
                            <span class="alert-tag__icon"><svg width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5.83333C6.70833 5.83333 6.41667 6.06667 6.41667 6.41667V9.91667C6.41667 10.2667 6.65 10.5 7 10.5C7.29167 10.5 7.58333 10.2667 7.58333 9.91667V6.41667C7.58333 6.125 7.29167 5.83333 7 5.83333ZM7 3.5C6.70833 3.5 6.41667 3.73333 6.41667 4.08333C6.41667 4.375 6.65 4.66667 7 4.66667C7.29167 4.66667 7.58333 4.43333 7.58333 4.08333C7.58333 3.79167 7.29167 3.5 7 3.5ZM7 0C3.15 0 0 3.15 0 7C0 10.85 3.15 14 7 14C10.85 14 14 10.85 14 7C14 3.15 10.85 0 7 0ZM7 12.8333C3.79167 12.8333 1.16667 10.2083 1.16667 7C1.16667 3.79167 3.79167 1.16667 7 1.16667C10.2083 1.16667 12.8333 3.79167 12.8333 7C12.8333 10.2083 10.2083 12.8333 7 12.8333Z" fill="#1D1536" />
                                </svg>
                            </span>
                            <span class="alert-tag__content">Learn more about metadata</span>
                        </a>

                    </div>
                </div>

                <div class="dashboard-files-card__groups">
                    <div class="dashboard-files-card__group">
                        <span>
                            <div class="icon">

                                <i class="material-icons icon__mat-icon">reorder</i>

                            </div>
                        </span>
                        <span id="stat-metadata">Include metadata</span>
                        <span aria-labelledby="stat-metadata" class="dashboard-files-card__value">64%</span>
                    </div>

                    <div class="dashboard-files-card__group dashboard-files-card__graph">

                        <img src="assets/images/dashboard-samples/overview-graph-files.png" alt="Metadata by type">
                    </div>
                </div>
            </div>

            <div class="dashboard-stats-card">
                <div class="dashboard-stats-card__head">
                    <div class="dashboard-stats-card__left-side">
                        <h3 class="dashboard-stats-card__title">Data updates</h3>
                        <p class="dashboard-stats-card__description">Timely updates provide users with an up-to-date picture of grantmaking.
                            Publishers make updates at different frequencies; annual, biannual, quarterly, monthly
                            or some publish in real-time.
                        </p>
                    </div>

                    <div class="dashboard-stats-card__right-side">
                        <a class="alert-tag alert-tag--anchor" href="#">
                            <span class="alert-tag__icon"><svg width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5.83333C6.70833 5.83333 6.41667 6.06667 6.41667 6.41667V9.91667C6.41667 10.2667 6.65 10.5 7 10.5C7.29167 10.5 7.58333 10.2667 7.58333 9.91667V6.41667C7.58333 6.125 7.29167 5.83333 7 5.83333ZM7 3.5C6.70833 3.5 6.41667 3.73333 6.41667 4.08333C6.41667 4.375 6.65 4.66667 7 4.66667C7.29167 4.66667 7.58333 4.43333 7.58333 4.08333C7.58333 3.79167 7.29167 3.5 7 3.5ZM7 0C3.15 0 0 3.15 0 7C0 10.85 3.15 14 7 14C10.85 14 14 10.85 14 7C14 3.15 10.85 0 7 0ZM7 12.8333C3.79167 12.8333 1.16667 10.2083 1.16667 7C1.16667 3.79167 3.79167 1.16667 7 1.16667C10.2083 1.16667 12.8333 3.79167 12.8333 7C12.8333 10.2083 10.2083 12.8333 7 12.8333Z" fill="#1D1536" />
                                </svg>
                            </span>
                            <span class="alert-tag__content">Learn more about data updates</span>
                        </a>

                    </div>
                </div>

                <div class="dashboard-stats-card__groups">

                    <div class="dashboard-stats-card__group">
                        <span>
                            <div class="icon">

                                <i class="material-icons icon__mat-icon">event_available</i>

                            </div>
                        </span>
                        <span id="stat-0">Have published in the last year</span>
                        <span aria-labelledby="stat-0" class="dashboard-stats-card__value">52%</span>
                    </div>

                    <div class="dashboard-stats-card__group">
                        <span>
                            <div class="icon">

                                <i class="material-icons icon__mat-icon">event_available</i>

                            </div>
                        </span>
                        <span id="stat-1">Have published in the last month</span>
                        <span aria-labelledby="stat-1" class="dashboard-stats-card__value">90%</span>
                    </div>

                </div>

                <div class="spacer-2"></div>

                <hr class="separator-light">

                <div class="graph-container">
                    <img src="assets/images/dashboard-samples/overview-graph-publishers-with-ids.png" alt="Publishers with IDs">
                </div>

            </div>

        </div>

    </main>

    <footer class="layout__footer">

        <footer class="footer footer--compact">

            <div class="footer__row wrapper footer__small-print">
                <div class="footer__column-1">
                    <div class="footer__logo"><img src="/images/360-giving-logo-white.svg" alt="360Giving"></div>
                </div>

                <div class="footer__column-2 footer__policy-links">
                    <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>

            <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>
{# This is 'Overview By Publisher' – the default variant. #}

{% extends '@layout--slim' %}

{% block main_content %}
  <div class="layout__content dashboard-page">
    {% render '@cards-section--dashboard-stats' %}

    {% render '@tab-bar' %}

    <div class="spacer-2"></div>

    <div class="dashboard-page__section-radios">
      {% render '@radio-buttons', { radioGroupName: 'view', radioItems: view_radios } %}
    </div>

    <div class="spacer-2 clearfix"></div>

    {% render '@dashboard-stats-card', {
      title: location_title,
      description: location_description,
      info_label: location_info_label,
      stats: location_stats
    } %}

    {% render '@dashboard-stats-card', {
      title: organisation_title,
      description: organisation_description,
      info_label: organisation_info_label,
      stats: organisation_stats,
      graph_description: organisation_graph_description
    } %}

    {% render '@dashboard-stats-card', {
      title: grant_data_title,
      description: grant_data_description,
      info_label: grant_data_info_label,
      stats: grant_data_stats
    } %}

    {% render '@dashboard-files-card' %}

    {% render '@dashboard-stats-card', {
      title: up_to_date_title,
      description: up_to_date_description,
      info_label: up_to_date_info_label,
      stats: up_to_date_stats,
      graph_description: up_to_date_graph_description
    } %}    

  </div>
{% endblock %}
{
  "product_name": "Registry",
  "auxiliary_name": "Dashboard",
  "product_logo_svg": "360registry-color.svg",
  "product_logo_alt": "360Registry",
  "product_summary": "Based on data published by UK grantmakers in the 360Giving Data Standard",
  "view_radios": [
    {
      "name": "Publisher",
      "default": true
    },
    {
      "name": "Grant"
    }
  ],
  "location_title": "Location data",
  "location_description": "Location data helps users to understand where grants go.\nLocation codes allow grants data to be visualised in maps and to be\nlinked to official statistics.\n",
  "location_info_label": "Learn more about location data",
  "location_stats": [
    {
      "icon_name": "person_pin_circle",
      "label": "Include recipient location codes",
      "value": "84%"
    },
    {
      "icon_name": "edit_location",
      "label": "Include grant location names",
      "value": "64%"
    },
    {
      "icon_name": "add_location",
      "label": "Include grant location codes",
      "value": "37%"
    }
  ],
  "organisation_title": "Organisation identifiers",
  "organisation_description": "Org IDs help users to understand who is involved in each grant. External\norg IDs are used to show when funders give grants to the same\nrecipient and allow grants data to be linked to official sources of\norganisation data.\n",
  "organisation_info_label": "Learn more about organisation identifiers",
  "organisation_stats": [
    {
      "icon_name": "tag",
      "label": "Include charity or company nos.",
      "value": "64%"
    },
    {
      "icon_name": "confirmation_number",
      "label": "Include external org IDs for at least 50% of recipients",
      "value": "37%"
    }
  ],
  "organisation_graph_description": "Percentage of recipients with external org IDs\n",
  "grant_data_title": "Grant data",
  "grant_data_description": "All 360Giving data includes information about award amounts,\naward dates and the purpose of each grant. Information about the grant\nduration, grant programmes names and classifications help users to\nunderstand more context for each grant.\n",
  "grant_data_info_label": "Learn more about grant data",
  "grant_data_stats": [
    {
      "icon_name": "event_note",
      "label": "Include grant duration",
      "value": "37%"
    },
    {
      "icon_name": "format_quote",
      "label": "Include programme names",
      "value": "64%"
    },
    {
      "icon_name": "label",
      "label": "Include classifications",
      "value": "64%"
    }
  ],
  "up_to_date_title": "Data updates",
  "up_to_date_description": "Timely updates provide users with an up-to-date picture of grantmaking.\nPublishers make updates at different frequencies; annual, biannual, quarterly, monthly\nor some publish in real-time.\n",
  "up_to_date_info_label": "Learn more about data updates",
  "up_to_date_stats": [
    {
      "icon_name": "event_available",
      "label": "Have published in the last year",
      "value": "52%"
    },
    {
      "icon_name": "event_available",
      "label": "Have published in the last month",
      "value": "90%"
    }
  ],
  "up_to_date_graph_description": "Publishers with grants awarded in\neach of the past 10 years\n"
}
  • Content:
    .dashboard-page {
      &__section-radios {
        float: right;
    
        label {
          min-width: 6rem;
          text-align: center;
        }
      }
    
      &__back-link {
        color: $black;
      }
    
      &__pager {
        display: flex;
        justify-content: center;
        margin-bottom: 48px;
      }
    }
    
  • URL: /components/raw/dashboard/dashboard.scss
  • Filesystem Path: src/components/06-prototypes/dashboard/dashboard.scss
  • Size: 264 Bytes

No notes defined.