<div class="grant-search-result">
<div class="grant-search-result__left-side">
<a class="grant-search-result__title" href="#">
Grant to Help Musicians
</a>
<div class="grant-search-result__description">
Toward the design of new educational and accessible materials, relating to the history of the Stoke Park Hospitals, which will increase the enjoyment and learning for a variety of audiences, but in particular those people with learning disabilities.
</div>
</div>
<div class="grant-search-result__right-side">
<div class="grant-search-result__date">
<time datetime="2017-08-22">22 Aug 2017</time>
</div>
<div class="grant-search-result__data-item">
<span class="grant-search-result__data-item--label">Amount:</span>
<span>£78,480</span>
</div>
<div class="grant-search-result__data-item">
<span class="grant-search-result__data-item--label">Funder:</span>
<span><a href="#">Youth Music</a></span>
</div>
<div class="grant-search-result__data-item">
<span class="grant-search-result__data-item--label">Recipient:</span>
<span><a href="#">Jack Drum Arts</a></span>
</div>
<div class="grant-search-result__data-item">
<span class="grant-search-result__data-item--label">Region:</span>
<span><a href="#">East Midlands</a></span>
</div>
<div class="grant-search-result__data-item">
<span class="grant-search-result__data-item--label">Distric:</span>
<span><a href="#">Northampton District</a></span>
</div>
</div>
</div>
<div class="grant-search-result">
<div class="grant-search-result__left-side">
<a class="grant-search-result__title" href="{{ url }}">
{{ title }}
</a>
<div class="grant-search-result__description">
{{ description }}
</div>
</div>
<div class="grant-search-result__right-side">
<div class="grant-search-result__date">
{# Using datetime, make sure your timestamp is valid https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values #}
<time datetime="{{ date_timestamp }}">{{ date }}</time>
</div>
<div class="grant-search-result__data-item">
<span class="grant-search-result__data-item--label">Amount:</span>
<span>{{ amount }}</span>
</div>
<div class="grant-search-result__data-item">
<span class="grant-search-result__data-item--label">Funder:</span>
<span><a href="{{ funder_link }}">{{ funder }}</a></span>
</div>
<div class="grant-search-result__data-item">
<span class="grant-search-result__data-item--label">Recipient:</span>
<span><a href="{{ recipient_link }}">{{ recipient }}</a></span>
</div>
<div class="grant-search-result__data-item">
<span class="grant-search-result__data-item--label">Region:</span>
<span><a href="{{ region_link }}">{{ region }}</a></span>
</div>
<div class="grant-search-result__data-item">
<span class="grant-search-result__data-item--label">Distric:</span>
<span><a href="{{ district_link }}">{{ district }}</a></span>
</div>
</div>
</div>
{
"title": "Grant to Help Musicians",
"url": "#",
"description": "Toward the design of new educational and accessible materials, relating to the history of the Stoke Park Hospitals, which will increase the enjoyment and learning for a variety of audiences, but in particular those people with learning disabilities.",
"date": "22 Aug 2017",
"date_timestamp": "2017-08-22",
"amount": "£78,480",
"funder": "Youth Music",
"funder_link": "#",
"recipient": "Jack Drum Arts",
"recipient_link": "#",
"region": "East Midlands",
"region_link": "#",
"district": "Northampton District",
"district_link": "#"
}
.grant-search-result {
display: flex;
flex-direction: column;
border-left: 4px solid $orange;
box-shadow: 1px 4px 4px 4px rgba(0, 0, 0, 0.06);
padding: 20px 24px;
margin-bottom: 20px;
&__recipients {
border-left: 4px solid #fac710 !important;
}
&__funders {
border-left: 4px solid #4dacb6 !important;
}
a {
text-decoration: underline;
&:hover {
text-decoration: underline;
}
}
@include breakpoint($medium) {
flex-direction: row;
}
&__left-side {
position: relative;
padding-bottom: 20px;
margin-bottom: 24px;
width: 100%;
@include breakpoint($medium) {
padding-bottom: 0;
margin-bottom: 0;
width: 70%;
padding-right: 24px;
margin-right: 24px;
}
&::after {
content: '';
width: 60%;
height: 1px;
background: $black;
position: absolute;
left: 0;
bottom: 0;
@include breakpoint($medium) {
width: 1px;
height: 100%;
left: auto;
right: 0;
}
}
}
&__right-side {
padding-top: 12px;
padding-bottom: 6px;
width: 100%;
@include breakpoint($medium) {
width: 30%;
}
}
&__title {
font-weight: 400;
font-size: 24px;
margin-bottom: 16px;
display: block;
}
&__description {
font-weight: 400;
font-size: 16px;
}
&__date {
margin-bottom: 16px;
font-weight: 700;
}
&__data-item {
margin-bottom: 6px;
a {
color: $black;
&:hover {
color: $orange;
}
}
&--label {
font-weight: 700;
}
}
&__box_container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
&__box {
padding-top: 5px;
padding-bottom: 20px;
width: 50%;
font-size: 20px;
text-align: center;
@include breakpoint($large) {
width: 20%;
}
}
}
No notes defined.