<div class="dashboard-publisher-result">
<div class="dashboard-publisher-result__head">
<div class="dashboard-publisher-result__left-side">
<a class="dashboard-publisher-result__title">
AB Charitable Trust
</a>
</div>
<div class="dashboard-publisher-result__right-side">
<div class="dashboard-publisher-result__date">
Last update <time datetime="2017-08-22">22 Aug 2017</time>
</div>
</div>
</div>
<span class="dashboard-publisher-result__badge">
<span class="icon-badge">
<div class="icon">
<i class="material-icons icon__mat-icon">location_on</i>
</div>
Include recipient location codes
</span>
</span>
<hr class="separator-light">
<h5>Total grants published</h5>
<div>
<ul class="years-chart">
<li class="years-chart__item" style="--opacity: 0.15;">
<div class="years-chart__block" aria-label="1.5k grants awarded before 2011" title="1.5k grants awarded before 2011"><span>1.5k</span></div>
<div class="years-chart__label">Older data</div>
</li>
<li class="years-chart__item" style="--opacity: 0;">
<div class="years-chart__block" aria-label="No grants awarded in 2011" title="No grants awarded in 2011"><span></span></div>
<div class="years-chart__label">2011</div>
</li>
<li class="years-chart__item" style="--opacity: 0;">
<div class="years-chart__block" aria-label="No grants awarded in 2012" title="No grants awarded in 2012"><span></span></div>
<div class="years-chart__label">2012</div>
</li>
<li class="years-chart__item" style="--opacity: 1;">
<div class="years-chart__block" aria-label="10k+ grants awarded in 2013" title="10k+ grants awarded in 2013"><span>10k+</span></div>
<div class="years-chart__label">2013</div>
</li>
<li class="years-chart__item" style="--opacity: 0.2;">
<div class="years-chart__block" aria-label="2k grants awarded in 2014" title="2k grants awarded in 2014"><span>2k</span></div>
<div class="years-chart__label">2014</div>
</li>
<li class="years-chart__item" style="--opacity: 0.2;">
<div class="years-chart__block" aria-label="2k grants awarded in 2015" title="2k grants awarded in 2015"><span>2k</span></div>
<div class="years-chart__label">2015</div>
</li>
<li class="years-chart__item" style="--opacity: 0.2;">
<div class="years-chart__block" aria-label="2k grants awarded in 2016" title="2k grants awarded in 2016"><span>2k</span></div>
<div class="years-chart__label">2016</div>
</li>
<li class="years-chart__item" style="--opacity: 0.25;">
<div class="years-chart__block" aria-label="2.5k grants awarded in 2017" title="2.5k grants awarded in 2017"><span>2.5k</span></div>
<div class="years-chart__label">2017</div>
</li>
<li class="years-chart__item" style="--opacity: 0.05;">
<div class="years-chart__block" aria-label="0.5k grants awarded in 2018" title="0.5k grants awarded in 2018"><span>0.5k</span></div>
<div class="years-chart__label">2018</div>
</li>
<li class="years-chart__item" style="--opacity: 0.05;">
<div class="years-chart__block" aria-label="0.5k grants awarded in 2019" title="0.5k grants awarded in 2019"><span>0.5k</span></div>
<div class="years-chart__label">2019</div>
</li>
<li class="years-chart__item" style="--opacity: 0.05;">
<div class="years-chart__block" aria-label="0.5k grants awarded in 2020" title="0.5k grants awarded in 2020"><span>0.5k</span></div>
<div class="years-chart__label">2020</div>
</li>
<li class="years-chart__item" style="--opacity: 1.5;">
<div class="years-chart__block" aria-label="15k+ grants awarded in 2018" title="15k+ grants awarded in 2018"><span>15k+</span></div>
<div class="years-chart__label">2021</div>
</li>
</ul>
</div>
<hr class="separator-light">
<div>
<a href="#" class="button">See More</a>
</div>
</div>
<div class="dashboard-publisher-result">
<div class="dashboard-publisher-result__head">
<div class="dashboard-publisher-result__left-side">
<a class="dashboard-publisher-result__title">
{{ title }}
</a>
</div>
<div class="dashboard-publisher-result__right-side">
<div class="dashboard-publisher-result__date">
{# Using datetime, make sure your timestamp is valid https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values #}
Last update <time datetime="{{ date_timestamp }}">{{ date }}</time>
</div>
</div>
</div>
{% for badge in badges %}
<span class="dashboard-publisher-result__badge">
{% render '@icon-badge', badge %}
</span>
{% endfor %}
{% render '@separator' %}
<h5>Total grants published</h5>
<div>
{% render '@years-chart' %}
</div>
{% render '@separator' %}
<div>
<a href="#" class="button">See More</a>
</div>
</div>
{
"title": "AB Charitable Trust",
"date": "22 Aug 2017",
"date_timestamp": "2017-08-22",
"badges": [
{
"icon_name": "location_on",
"label": "Include recipient location codes"
}
]
}
.dashboard-publisher-result {
border-left: 4px solid $teal;
box-shadow: 1px 4px 4px 4px rgba(0, 0, 0, 0.06);
padding: 20px 24px;
margin-bottom: 20px;
&__head {
display: flex;
}
&__left-side {
flex-grow: 1;
}
&__title {
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 16px;
display: block;
}
&__description {
font-weight: 400;
font-size: 16px;
}
&__date {
color: $black;
margin-bottom: 16px;
}
}
.dashboard-publisher-result-wrapper {
.dashboard-publisher-result {
// Nested card elements in the detail view have headings with their own margins
padding-top: 1px;
}
&__external-buttons {
a:last-child {
margin-left: 1rem;
}
}
}
No notes defined.