<div class="homepage-news">
<div class="homepage-news__container">
<div class="homepage-news__wrapper">
<div class="homepage-news__description">
<h2 class="homepage-news__header">
Choose your path
</h2>
<div class="homepage-news__button">
<a href="#" class="standard-button standard-button--durp standard-button--dark
standard-button---width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">See all news</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="8" height="16" viewBox="0 0 8 16"><path class="icon-fill" fill="#E84A27" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/></svg></span></span>
</div>
</a>
</div>
</div>
<div class="homepage-news__news">
<article class="card-with-image card-with-image--dark ">
<div class="card-with-image__content">
<div class="
news-card-content
news-card-content--dark
news-card-content--durp
">
<div class="news-card-content__title">
<h2 class="linked-title linked-title--durp linked-title--dark">
<a href="http://localhost:3000/components/detail/news" class="
linked-title__link linked-title__link--dark
">
The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists<span class="linked-title__link-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</a>
</h2>
</div>
<div class="news-card-content__date news-card-content__date--dark">
November 19, 2019
</div>
</div>
</div>
<div class="card-with-image__image ">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="friendly kitten" width="320" height="228">
</figure>
</div>
</article>
<article class="card-with-image card-with-image--dark ">
<div class="card-with-image__content">
<div class="
news-card-content
news-card-content--dark
news-card-content--durp
">
<div class="news-card-content__title">
<h2 class="linked-title linked-title--durp linked-title--dark">
<a href="http://localhost:3000/components/detail/news" class="
linked-title__link linked-title__link--dark
">
The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists<span class="linked-title__link-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</a>
</h2>
</div>
<div class="news-card-content__date news-card-content__date--dark">
November 19, 2019
</div>
</div>
</div>
<div class="card-with-image__image ">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="friendly kitten" width="320" height="228">
</figure>
</div>
</article>
<article class="card-with-image card-with-image--dark ">
<div class="card-with-image__content">
<div class="
news-card-content
news-card-content--dark
news-card-content--durp
">
<div class="news-card-content__title">
<h2 class="linked-title linked-title--durp linked-title--dark">
<a href="http://localhost:3000/components/detail/news" class="
linked-title__link linked-title__link--dark
">
The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists<span class="linked-title__link-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</a>
</h2>
</div>
<div class="news-card-content__date news-card-content__date--dark">
November 19, 2019
</div>
</div>
</div>
<div class="card-with-image__image ">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="friendly kitten" width="320" height="228">
</figure>
</div>
</article>
<article class="card-with-image card-with-image--dark ">
<div class="card-with-image__content">
<div class="
news-card-content
news-card-content--dark
news-card-content--durp
">
<div class="news-card-content__title">
<h2 class="linked-title linked-title--durp linked-title--dark">
<a href="http://localhost:3000/components/detail/news" class="
linked-title__link linked-title__link--dark
">
The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists<span class="linked-title__link-icon"> <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</a>
</h2>
</div>
<div class="news-card-content__date news-card-content__date--dark">
November 19, 2019
</div>
</div>
</div>
<div class="card-with-image__image ">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="friendly kitten" width="320" height="228">
</figure>
</div>
</article>
</div>
</div>
</div>
</div>
<div class="homepage-news">
<div class="homepage-news__container">
<div class="homepage-news__wrapper">
<div class="homepage-news__description">
<h2 class="homepage-news__header">
{{ news.header }}
</h2>
<div class="homepage-news__button">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
icon: 'internal-link',
text: news.cta.text,
url: news.cta.url,
width: regular,
}
} %}
</div>
</div>
<div class="homepage-news__news">
{% for story in news.posts %}
{% include 'partials/news-card/news-card.twig' with {'story': story, 'background': 'dark'} %}
{% endfor %}
</div>
</div>
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"news": {
"header": "Choose your path",
"cta": {
"text": "See all news",
"url": "#"
},
"posts": [
{
"title": "The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists",
"permalink": "http://localhost:3000/components/detail/news",
"publishDate": "November 19, 2019",
"featuredImage": {
"src": "https://picsum.photos/320/228?random=1",
"altText": "friendly kitten"
}
},
{
"title": "The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists",
"permalink": "http://localhost:3000/components/detail/news",
"publishDate": "November 19, 2019",
"featuredImage": {
"src": "https://picsum.photos/320/228?random=1",
"altText": "friendly kitten"
}
},
{
"title": "The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists",
"permalink": "http://localhost:3000/components/detail/news",
"publishDate": "November 19, 2019",
"featuredImage": {
"src": "https://picsum.photos/320/228?random=1",
"altText": "friendly kitten"
}
},
{
"title": "The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists",
"permalink": "http://localhost:3000/components/detail/news",
"publishDate": "November 19, 2019",
"featuredImage": {
"src": "https://picsum.photos/320/228?random=1",
"altText": "friendly kitten"
}
}
]
}
}
breakpointSmall = 784px
breakpointLarge = 1300px
.homepage-news
background-color charcoalLight
padding-bottom 80px
fluid(padding-bottom padding-top, 320px, maxContentWidth, 80px, 160px)
padding-top 80px
&__container
@extends $contentContainer
&__wrapper
+above(breakpointLarge)
@supports (display: grid)
display grid
grid-template-columns 4fr 8fr
&__description
+above(breakpointLarge)
padding-right 48px
&__header
@extends $primaryTitle
color white
margin-bottom 24px
&__introduction
@extends $primaryParagraph
color grey
&__button
margin-top 48px
&__news
@supports (display: grid)
display grid
grid-auto-rows minmax(100px, auto)
grid-template-columns 1fr
+below(breakpointLarge)
margin-top 48px
There are no notes for this item.