<div class="file-summary grid grid--three-columns">
<div class="grid__1">
Grants from Jan 2013 to Jan 2021
</div>
<div class="grid__1 align-right">
<span class="file-summary__label">Records</span>
<span class="file-summary__stat">783</span>
</div>
<div class="grid__1 align-right">
<span class="file-summary__label">Total Grants £</span>
<span class="file-summary__stat">12.8m</span>
</div>
<div class="grid__1">
<span class="tag file-summary__specs">XLSX – 194kB</span>
</div>
<div class="grid__1 align-right">
<span class="file-summary__label">Valid data</span>
<div class="icon" style="--icon-color: var(--color-black)">
<i class="material-icons icon__mat-icon">check_circle_outline</i>
</div>
</div>
<div class="grid__1 align-right">
<span class="file-summary__label">Licence</span>
<span class="file-summary__native-icon">
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64">
<path d="M31.957,0.311c-8.682,0-16.322,3.213-22.226,9.203
C3.653,15.678,0.354,23.666,0.354,32c0,8.422,3.212,16.236,9.29,22.313c6.078,6.078,13.978,9.377,22.313,9.377
c8.334,0,16.409-3.299,22.66-9.463c5.904-5.817,9.029-13.544,9.029-22.227c0-8.595-3.125-16.408-9.116-22.399
C48.453,3.523,40.639,0.311,31.957,0.311z M32.043,6.041c7.12,0,13.458,2.691,18.406,7.641c4.862,4.861,7.466,11.286,7.466,18.318
c0,7.119-2.518,13.371-7.379,18.146c-5.123,5.035-11.721,7.727-18.493,7.727c-6.858,0-13.283-2.691-18.232-7.641
C8.862,45.283,6.084,38.772,6.084,32c0-6.858,2.778-13.369,7.727-18.406C18.673,8.646,24.924,6.041,32.043,6.041z" />
<path id="c" d="M31.635,26.734c-1.79-3.264-4.844-4.563-8.389-4.563
c-5.16,0-9.267,3.65-9.267,9.828c0,6.283,3.861,9.829,9.442,9.829c3.581,0,6.635-1.966,8.319-4.949l-3.931-2.001
c-0.878,2.105-2.212,2.738-3.896,2.738c-2.914,0-4.248-2.422-4.248-5.617c0-3.193,1.124-5.616,4.248-5.616
c0.842,0,2.527,0.456,3.51,2.563L31.635,26.734z" />
<use xlink:href="#c" transform="translate(18.281)" />
</svg>
</span>
</div>
</div>
<div class="file-summary grid grid--three-columns">
<div class="grid__1">
{{ description }}
</div>
<div class="grid__1 align-right">
<span class="file-summary__label">Records</span>
<span class="file-summary__stat">{{ num_records }}</span>
</div>
<div class="grid__1 align-right">
<span class="file-summary__label">Total Grants £</span>
<span class="file-summary__stat">{{ grant_total_shorthand }}</span>
</div>
<div class="grid__1">
<span class="tag file-summary__specs">{{ file_type }} – {{ file_size }}</span>
</div>
<div class="grid__1 align-right">
<span class="file-summary__label">Valid data</span>
{% if valid_data %}
{% render '@icon--black', { icon_name: 'check_circle_outline' } %}
{% else %}
{% render '@icon--black', { icon_name: 'priority_high' } %}
{% endif %}
</div>
<div class="grid__1 align-right">
<span class="file-summary__label">Licence</span>
{% if licence == 'cc' %}
<span class="file-summary__native-icon">
{% render '@cc-licence' %}
</span>
{% else %}
<span class="file-summary__stat">{{ licence }}</span>
{% endif %}
</div>
</div>
{
"description": "Grants from Jan 2013 to Jan 2021",
"num_records": 783,
"grant_total_shorthand": "12.8m",
"file_type": "XLSX",
"file_size": "194kB",
"valid_data": true,
"licence": "cc"
}
.file-summary {
align-items: baseline;
&__label {
margin-right: 0.5rem;
}
&__stat {
font-size: 2rem;
}
&__specs {
// This is also a `.tag` so gets most styling from that element.
border-color: $red;
color: $red;
}
&__native-icon {
position: relative;
top: 5px;
svg {
width: 22px;
height: auto;
}
}
}
No notes defined.