<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">Grants with location data can be used to map grants, and help people understand where the money goes.
</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 locations</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">edit_location</i>
</div>
</span>
<span id="stat-1">Include grant location names</span>
<span aria-labelledby="stat-1" 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">add_location</i>
</div>
</span>
<span id="stat-2">Include grant location codes</span>
<span aria-labelledby="stat-2" class="dashboard-stats-card__value">64%</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">{{ title }}</h3>
<p class="dashboard-stats-card__description">{{ description }}</p>
</div>
<div class="dashboard-stats-card__right-side">
{% render '@alert-tag--general', { label: info_label } %}
</div>
</div>
<div class="dashboard-stats-card__groups">
{% for ii in range(stats.length) %}
<div class="dashboard-stats-card__group">
<span>{% render '@icon', { icon_name: stats[ii].icon_name } %}</span>
<span id="stat-{{ ii }}">{{ stats[ii].label }}</span>
<span aria-labelledby="stat-{{ ii }}" class="dashboard-stats-card__value">{{ stats[ii].value }}</span>
</div>
{% endfor %}
</div>
<div class="spacer-2"></div>
{% if graph_description %}
{% render '@separator' %}
{# Consider using this or equivalent when the graph doesn't have an embedded title? #}
{# <div class="graph-label">{{ graph_description }}</div> #}
<div class="graph-container">
<img src="assets/images/dashboard-samples/overview-graph-publishers-with-ids.png" alt="Publishers with IDs">
</div>
{% endif %}
</div>
{
"title": "Location data",
"description": "Grants with location data can be used to map grants, and help people understand where the money goes.\n",
"info_label": "Learn more about location data",
"stats": [
{
"icon_name": "person_pin_circle",
"label": "Include recipient locations",
"value": "64%"
},
{
"icon_name": "edit_location",
"label": "Include grant location names",
"value": "37%"
},
{
"icon_name": "add_location",
"label": "Include grant location codes",
"value": "64%"
}
],
"graph_description": "Count of publishers for each 10% band, % of recipients with external identifier"
}
.dashboard-stats-card {
border-left: 4px solid $teal;
&--grant {
border-left-color: $orange;
}
box-shadow: 1px 4px 4px 4px rgba(0, 0, 0, 0.06);
padding: 20px 24px;
margin-bottom: 20px;
&__head {
display: flex;
}
&__right-side {
min-width: 40%;
@include breakpoint($medium) {
min-width: 25%;
}
}
&__title {
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 16px;
display: block;
}
&__description {
font-weight: 400;
font-size: 16px;
}
&__groups {
display: flex;
flex-direction: column;
@include breakpoint($medium) {
flex-direction: row;
}
}
&__group {
display: flex;
flex-direction: column;
max-width: 100%;
padding: 2rem 0;
border-bottom: solid 1px $blue-tint-dark;
@include breakpoint($medium) {
max-width: 20%;
padding: 0 2rem;
border-bottom-width: 0;
border-right: solid 1px $blue-tint-dark;
}
&:last-child {
border-width: 0;
}
}
&__value {
font-size: 1.2rem;
font-weight: 700;
}
}
No notes defined.