<article class="insights-card" title="">
<div class="insights-card__pub-logo">
<a href="http://abcharitabletrust.org.uk/" target="_blank">
<img src="https://www.threesixtygiving.org/wp-content/uploads/Arcadia-Logo.jpg" alt="A B Charitable Trust">
</a>
</div>
<div class="insights-card__content">
<h3 class="insights-card__pub-name">A B Charitable Trust</h3>
<ul class="insights-card__list">
<li class="insights-card__item ">
<a href="grant.url">
<table class="grant">
<tr class="grant__line grant--title-line">
<td class="grant__title" colspan="3">Open Programme grants awarded from 2013 until April 2019,</td>
</tr>
<tr class="grant__line grant--amounts-line">
<td class="grant__pub-date">Published in 2018/06/21</td>
<td class="grant__records">Records
<span class="grant__grant-n">593</span>
</td>
<td class="grant__amount">
£ <span class="grant__amount-n">8.5M</span>
</td>
</tr>
</table>
</a>
</li>
<li class="insights-card__item ">
<a href="grant.url">
<table class="grant">
<tr class="grant__line grant--title-line">
<td class="grant__title" colspan="3">Open Programme grants awarded from 2013 until April 2019,</td>
</tr>
<tr class="grant__line grant--amounts-line">
<td class="grant__pub-date">Published in 2018/06/21</td>
<td class="grant__records">Records
<span class="grant__grant-n">593</span>
</td>
<td class="grant__amount">
£ <span class="grant__amount-n">8.5M</span>
</td>
</tr>
</table>
</a>
</li>
</ul>
</div>
</article>
<article class="insights-card" title="{{ insights_card.name }}">
<div class="insights-card__pub-logo">
<a href="{{ insights_card.publisher.website }}" target="_blank">
{% if insights_card.publisher.logo %}
<img src="{{ insights_card.publisher.logo }}" alt="{{ insights_card.publisher.name }}">
{% endif %}
</a>
</div>
<div class="insights-card__content">
<h3 class="insights-card__pub-name">{{ insights_card.publisher.name }}</h3>
<ul class="insights-card__list">
{% for grant in insights_card.datasets %}
<li class="insights-card__item ">
<a href="grant.url">
<table class="grant">
<tr class="grant__line grant--title-line">
<td class="grant__title" colspan="3">{{ grant.title }}</td>
</tr>
<tr class="grant__line grant--amounts-line">
<td class="grant__pub-date">Published in {{ grant.issued | replace("-", "/")}}</td>
<td class="grant__records">Records
<span class="grant__grant-n">{{ grant.records }}</span>
</td>
<td class="grant__amount">
£ <span class="grant__amount-n">{{grant.amount}}</span>
</td>
</tr>
</table>
</a>
</li>
{% endfor %}
</ul>
</div>
</article>
{
"insights_card": {
"publisher": {
"name": "A B Charitable Trust",
"website": "http://abcharitabletrust.org.uk/",
"logo": "https://www.threesixtygiving.org/wp-content/uploads/Arcadia-Logo.jpg"
},
"datasets": [
{
"title": "Open Programme grants awarded from 2013 until April 2019,",
"issued": "2018-06-21",
"url": "http://abcharitabletrust.org.uk/awards.htm",
"records": 593,
"amount": "8.5M"
},
{
"title": "Open Programme grants awarded from 2013 until April 2019,",
"issued": "2018-06-21",
"url": "http://abcharitabletrust.org.uk/awards.htm",
"records": 593,
"amount": "8.5M"
}
]
}
}
.insights-card {
display: flex;
&__content { flex: 1; }
}
.insights-card {
background: hsla(var(--white-hsl), 1);
box-shadow: 0px 4px 8px hsla(var(--base-hsl), .1);
position: relative;
padding: 16px 24px 16px 24px;
@include breakpoint($large) {
padding: 32px 40px 16px 40px;
}
&:before {
content: '';
width: 4px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: hsla(var(--teal-hsl), 1);
}
&__pub-logo { width: 132px; }
&__pub-name {
font-size: 1.5rem;
color: hsla(var(--base-hsl), 1);
font-weight: 300;
padding: 0 16px;
}
&__content { margin-left: 32px; }
&__list {
list-style: none;
padding-left: 0;
}
&__item {
}
&__item > a {
color: hsla(var(--base-hsl), 1);
display: block;
padding: 8px 16px;
}
&__item > a:hover { background-color: hsla(var(--base-hsl), .05); }
}
.grant {
width: 100%;
cursor: pointer;
&, td { border: 0; }
td {
padding: 0;
vertical-align: bottom;
cursor: pointer;
}
&__line {
font-style: normal;
font-weight: 300;
}
&--title-line td {
padding-top: 4px;
font-weight: 400;
padding-bottom: 4px;
}
&--amounts-line td {
line-height: 1.3;
border-bottom: 0;
}
&--data-line {
border-bottom: 1px solid hsla(var(--base-hsl), .1);
td { padding: 0 0 8px; }
&:last-child { border-bottom: 0; }
}
&__records { width: 35%; }
&__spacer { padding-left: 24px; }
&__pub-date { width: 40%; }
&__title { width: 100%; }
&__amount {
width: 100%;
text-align: right;
}
&__amount { margin-bottom: 8; }
&__grant-n,
&__amount-n { font-size: 1.6rem; }
&__grant-n { font-weight: 300; }
&__amount-n { font-weight: 400; }
}
No notes defined.