<ul class="card-list card-list--linked">
<li class="card-list__item">
<article class="media-card media-card--red">
<div class="media-card__content">
<header class="media-card__header">
<h3 class="media-card__heading">Rachel Rank</h3>
<span class="media-card__subtitle">Chief Operating Officer</span>
</header>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis. Ipsum, maiores cumque quo atque. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni. </p>
</div>
<div class="media-card__image-wrapper">
<div class="media-card__image" style="background-image: url(https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg)"></div>
</div>
</article>
</li>
<li class="card-list__item">
<article class="media-card media-card--teal">
<div class="media-card__content">
<div class="media-card__category-tags">
<a class="media-card__category-tag" href="#">All Content</a><a class="media-card__category-tag" href="#">News</a>
</div>
<header class="media-card__header">
<h3 class="media-card__heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quod vel voluptas recusandae dignissimos fugit deserunt</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis. Ipsum, maiores cumque quo atque. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni </p>
<div class="media-card__byline">Written by <a href="#">Rachel Rank</a> on October 30, 2019.</div>
</div>
<div class="media-card__image-wrapper">
<img class="media-card__image" src="https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg">
</div>
</article>
</li>
<li class="card-list__item">
<article class="registry-card" title="Open Programme grants awarded from 2013 until April 2019">
<div class="registry-card__pub-logo">
<a href="http://abcharitabletrust.org.uk/" target="_blank" rel="noreferrer">
</a>
</div>
<div class="registry-card__content">
<h3 class="registry-card__pub-name"></h3>
<ul class="registry-card__list">
<li class="registry-card__item ">
<table class="registry-grant">
<tr class="registry-grant__line registry-grant--title-line">
<!-- @DAVID
Initially, I imagined this would print just the date range of the grants
since this is a more relevant information then the title of the grant/file,
which often is basically referring to this date range. This wans't implemented
because I believe we would need to massage the data a little in order
to get these dates in a structured format.
<td class="registry-grant__date-range">Records from Apr ’12 to Dec ‘18</td>
-->
<td class="registry-grant__title" colspan="3"></td>
</tr>
<tr class="registry-grant__line registry-grant--amounts-line">
<td class="registry-grant__pub-date">Published in </td>
<td class="registry-grant__records">Records
<!-- @DAVID - I wasn't able to find where this information is coming from -->
<span class="registry-grant__grant-n">XXX</span>
</td>
<td class="registry-grant__amount">
<!-- @DAVID
I wasn't able to find where this information is coming from.
This is true for both the "grant amount" and the "currency".
-->
£ <span class="registry-grant__amount-n">XX,XXX,XXX</span>
</td>
</tr>
<tr class="registry-grant__line registry-grant--data-line">
<td class="registry-grant__download">
<a class="registry-grant__file registry-grant--xls" href="" download title="Excel Spreadsheet - 260Kb<!-- FileSize Variable -->">XLS - 260Kb</a>
</td>
<!-- if validated -->
<!-- <td class="registry-grant__validation registry-grant--validated">
Data Validated
<i class="material-icons">check_circle_outline</i>
</td> -->
<!-- if not validaded -->
<td class="registry-grant__validation registry-grant--invalid">
Data Invalid
<i class="material-icons">highlight_off</i>
</td>
<td class="registry-grant__license">
</td>
</tr>
</table>
</li>
</ul>
</div>
</article>
</li>
<li class="card-list__item">
<article class="registry-card" title="Open Programme grants awarded from 2013 until April 2019">
<div class="registry-card__pub-logo">
<a href="http://abcharitabletrust.org.uk/" target="_blank" rel="noreferrer">
</a>
</div>
<div class="registry-card__content">
<h3 class="registry-card__pub-name"></h3>
<ul class="registry-card__list">
<li class="registry-card__item ">
<table class="registry-grant">
<tr class="registry-grant__line registry-grant--title-line">
<!-- @DAVID
Initially, I imagined this would print just the date range of the grants
since this is a more relevant information then the title of the grant/file,
which often is basically referring to this date range. This wans't implemented
because I believe we would need to massage the data a little in order
to get these dates in a structured format.
<td class="registry-grant__date-range">Records from Apr ’12 to Dec ‘18</td>
-->
<td class="registry-grant__title" colspan="3"></td>
</tr>
<tr class="registry-grant__line registry-grant--amounts-line">
<td class="registry-grant__pub-date">Published in </td>
<td class="registry-grant__records">Records
<!-- @DAVID - I wasn't able to find where this information is coming from -->
<span class="registry-grant__grant-n">XXX</span>
</td>
<td class="registry-grant__amount">
<!-- @DAVID
I wasn't able to find where this information is coming from.
This is true for both the "grant amount" and the "currency".
-->
£ <span class="registry-grant__amount-n">XX,XXX,XXX</span>
</td>
</tr>
<tr class="registry-grant__line registry-grant--data-line">
<td class="registry-grant__download">
<a class="registry-grant__file registry-grant--xls" href="" download title="Excel Spreadsheet - 260Kb<!-- FileSize Variable -->">XLS - 260Kb</a>
</td>
<!-- if validated -->
<!-- <td class="registry-grant__validation registry-grant--validated">
Data Validated
<i class="material-icons">check_circle_outline</i>
</td> -->
<!-- if not validaded -->
<td class="registry-grant__validation registry-grant--invalid">
Data Invalid
<i class="material-icons">highlight_off</i>
</td>
<td class="registry-grant__license">
</td>
</tr>
</table>
</li>
</ul>
</div>
</article>
</li>
<li class="card-list__item">
<article class="registry-card" title="Open Programme grants awarded from 2013 until April 2019">
<div class="registry-card__pub-logo">
<a href="http://abcharitabletrust.org.uk/" target="_blank" rel="noreferrer">
</a>
</div>
<div class="registry-card__content">
<h3 class="registry-card__pub-name"></h3>
<ul class="registry-card__list">
<li class="registry-card__item ">
<table class="registry-grant">
<tr class="registry-grant__line registry-grant--title-line">
<!-- @DAVID
Initially, I imagined this would print just the date range of the grants
since this is a more relevant information then the title of the grant/file,
which often is basically referring to this date range. This wans't implemented
because I believe we would need to massage the data a little in order
to get these dates in a structured format.
<td class="registry-grant__date-range">Records from Apr ’12 to Dec ‘18</td>
-->
<td class="registry-grant__title" colspan="3"></td>
</tr>
<tr class="registry-grant__line registry-grant--amounts-line">
<td class="registry-grant__pub-date">Published in </td>
<td class="registry-grant__records">Records
<!-- @DAVID - I wasn't able to find where this information is coming from -->
<span class="registry-grant__grant-n">XXX</span>
</td>
<td class="registry-grant__amount">
<!-- @DAVID
I wasn't able to find where this information is coming from.
This is true for both the "grant amount" and the "currency".
-->
£ <span class="registry-grant__amount-n">XX,XXX,XXX</span>
</td>
</tr>
<tr class="registry-grant__line registry-grant--data-line">
<td class="registry-grant__download">
<a class="registry-grant__file registry-grant--xls" href="" download title="Excel Spreadsheet - 260Kb<!-- FileSize Variable -->">XLS - 260Kb</a>
</td>
<!-- if validated -->
<!-- <td class="registry-grant__validation registry-grant--validated">
Data Validated
<i class="material-icons">check_circle_outline</i>
</td> -->
<!-- if not validaded -->
<td class="registry-grant__validation registry-grant--invalid">
Data Invalid
<i class="material-icons">highlight_off</i>
</td>
<td class="registry-grant__license">
</td>
</tr>
</table>
</li>
</ul>
</div>
</article>
</li>
<li class="card-list__item">
<article class="registry-card" title="Open Programme grants awarded from 2013 until April 2019">
<div class="registry-card__pub-logo">
<a href="http://abcharitabletrust.org.uk/" target="_blank" rel="noreferrer">
</a>
</div>
<div class="registry-card__content">
<h3 class="registry-card__pub-name"></h3>
<ul class="registry-card__list">
<li class="registry-card__item ">
<table class="registry-grant">
<tr class="registry-grant__line registry-grant--title-line">
<!-- @DAVID
Initially, I imagined this would print just the date range of the grants
since this is a more relevant information then the title of the grant/file,
which often is basically referring to this date range. This wans't implemented
because I believe we would need to massage the data a little in order
to get these dates in a structured format.
<td class="registry-grant__date-range">Records from Apr ’12 to Dec ‘18</td>
-->
<td class="registry-grant__title" colspan="3"></td>
</tr>
<tr class="registry-grant__line registry-grant--amounts-line">
<td class="registry-grant__pub-date">Published in </td>
<td class="registry-grant__records">Records
<!-- @DAVID - I wasn't able to find where this information is coming from -->
<span class="registry-grant__grant-n">XXX</span>
</td>
<td class="registry-grant__amount">
<!-- @DAVID
I wasn't able to find where this information is coming from.
This is true for both the "grant amount" and the "currency".
-->
£ <span class="registry-grant__amount-n">XX,XXX,XXX</span>
</td>
</tr>
<tr class="registry-grant__line registry-grant--data-line">
<td class="registry-grant__download">
<a class="registry-grant__file registry-grant--xls" href="" download title="Excel Spreadsheet - 260Kb<!-- FileSize Variable -->">XLS - 260Kb</a>
</td>
<!-- if validated -->
<!-- <td class="registry-grant__validation registry-grant--validated">
Data Validated
<i class="material-icons">check_circle_outline</i>
</td> -->
<!-- if not validaded -->
<td class="registry-grant__validation registry-grant--invalid">
Data Invalid
<i class="material-icons">highlight_off</i>
</td>
<td class="registry-grant__license">
</td>
</tr>
</table>
</li>
</ul>
</div>
</article>
</li>
</ul>
<ul class="card-list card-list--linked">
<li class="card-list__item">
{% render '@media-card' %}
</li>
<li class="card-list__item">
{% render '@media-card--blog' %}
</li>
<li class="card-list__item">
{% render '@registry-card' %}
</li>
<li class="card-list__item">
{% render '@registry-card' %}
</li>
<li class="card-list__item">
{% render '@registry-card' %}
</li>
<li class="card-list__item">
{% render '@registry-card' %}
</li>
</ul>
/* No context defined. */
.card-list {
list-style-type: none;
padding: 0 8px 0 0;
&__item + &__item { margin-top: 24px; }
}
.card-list--linked {
--card-list-links-hsl: var(--base-hsl);
margin-left: 40px;
.card-list__item { position: relative; }
.card-list__item:before {
content: '';
width: 4px;
height: calc(100% + 32px);
position: absolute;
top: 48px;
left: -40px;
background-color: hsla(var(--card-list-links-hsl), .2);
}
.card-list__item:last-of-type::before { height: 0; }
.card-list__item:after {
content: '';
width: 24px;
height: 24px;
border-radius: 50%;
position: absolute;
top: 48px;
left: -50px;
background-color: hsla(var(--card-list-links-hsl), 1);
}
}
No notes defined.