<div class="featured-news">
<div class="featured-news-container">
<div class="featured-news__large-article">
<div class="featured-news__large-article__container">
<div class="featured-news__featured-block">
<p>Featured</p>
</div>
<div class="featured-news__large-article__image-container">
<img class="featured-news__large-article__image" src="../../img/Component-Feature-Image-Small.jpg" alt="" />
</div>
<div class="featured-news__large-article__tags">
<ul>
<li> Lorem ipsum </li>
<li> dolor sit amet </li>
<li> consectetur adipiscing elit </li>
</ul>
</div>
<h2 class="featured-news__large-article__title"><a href="#" class="iastate22-link-secondary">Lorem ipsum dolor sit amet<span class="arrow"></span></a></h2>
<p class="featured-news__large-article__excerpt">Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Vel pharetra vel turpis nunc eget lorem. Sed augue lacus viverra vitae.</p>
<p class="featured-news__date">September 12, 2023</p>
</div>
</div>
<div class="featured-news__small-article">
<div class="featured-news__small-article__container">
<div class="featured-news__small-article__image-container">
<img class="featured-news__small-article__image" src="../../img/Component-Feature-Image-Small.jpg" alt="Lorem ipsum dolor sit amet" />
</div>
<div class="featured-news__small-article__tags">
<ul>
<li> consectetur adipiscing elit </li>
</ul>
</div>
<h2 class="featured-news__small-article__title"><a href="#" class="iastate22-link-secondary">Lorem ipsum dolor sit amet<span class="arrow"></span></a></h2>
<p class="featured-news__date">September 12, 2023</p>
</div>
<div class="featured-news__small-article__container">
<div class="featured-news__small-article__image-container">
<img class="featured-news__small-article__image" src="../../img/Component-Feature-Image-Small.jpg" alt="Lorem ipsum dolor sit amet" />
</div>
<div class="featured-news__small-article__tags">
<ul>
<li> Lorem ipsum </li>
<li> dolor sit amet </li>
</ul>
</div>
<h2 class="featured-news__small-article__title"><a href="#" class="iastate22-link-secondary">Lorem ipsum dolor sit amet<span class="arrow"></span></a></h2>
<p class="featured-news__date">September 12, 2023</p>
</div>
</div>
</div>
</div>
<div class="featured-news">
<div class="featured-news-container">
<div class="featured-news__large-article">
<div class="featured-news__large-article__container">
<div class="featured-news__featured-block">
<p>Featured</p>
</div>
<div class="featured-news__large-article__image-container">
<img class="featured-news__large-article__image" src="{{ image.url }}" alt="{{ image.alt }}" />
</div>
<div class="featured-news__large-article__tags">
<ul>
{% for item in tags %}
<li> {{ item }} </li>
{% endfor %}
</ul>
</div>
<h2 class="featured-news__large-article__title"><a href="{{ url }}" class="iastate22-link-secondary">{{ title }}<span class="arrow"></span></a></h2>
<p class="featured-news__large-article__excerpt">{{ excerpt }}</p>
<p class="featured-news__date">{{ date }}</p>
</div>
</div>
<div class="featured-news__small-article">
{% for article in small_articles %}
<div class="featured-news__small-article__container">
{% if article.image.url %}
<div class="featured-news__small-article__image-container">
<img class="featured-news__small-article__image" src="{{ article.image.url }}" alt="{{ article.image.alt }}" />
</div>
{% endif %}
<div class="featured-news__small-article__tags">
<ul>
{% for item in article.tags %}
<li> {{ item }} </li>
{% endfor %}
</ul>
</div>
<h2 class="featured-news__small-article__title"><a href="{{ article.url }}" class="iastate22-link-secondary">{{ article.title }}<span class="arrow"></span></a></h2>
<p class="featured-news__date">{{ article.date }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
{
"image": {
"url": "../../img/Component-Feature-Image-Small.jpg",
"alt": ""
},
"url": "#",
"title": "Lorem ipsum dolor sit amet",
"excerpt": "Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Vel pharetra vel turpis nunc eget lorem. Sed augue lacus viverra vitae.",
"tags": [
"Lorem ipsum",
"dolor sit amet",
"consectetur adipiscing elit"
],
"date": "September 12, 2023",
"small_articles": [
{
"image": {
"url": "../../img/Component-Feature-Image-Small.jpg",
"alt": "Lorem ipsum dolor sit amet"
},
"url": "#",
"title": "Lorem ipsum dolor sit amet",
"excerpt": "Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Vel pharetra vel turpis nunc eget lorem. Sed augue lacus viverra vitae.",
"tags": [
"consectetur adipiscing elit"
],
"date": "September 12, 2023"
},
{
"image": {
"url": "../../img/Component-Feature-Image-Small.jpg",
"alt": "Lorem ipsum dolor sit amet"
},
"url": "#",
"title": "Lorem ipsum dolor sit amet",
"excerpt": "Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Vel pharetra vel turpis nunc eget lorem. Sed augue lacus viverra vitae.",
"tags": [
"Lorem ipsum",
"dolor sit amet"
],
"date": "September 12, 2023"
}
]
}
.featured-news {
margin: rem(50) 0 rem(30);
@include media-breakpoint-up(xl) {
margin-left: rem(-108);
margin-right: rem(-108);
}
.featured-news-container {
display: flex;
gap: rem(20);
flex-direction: column;
@include media-breakpoint-up(lg) {
flex-direction: row;
gap: rem(50);
}
.featured-news__large-article {
padding-right: 0;
border-right: none;
padding-bottom: rem(50);
margin-bottom: rem(50);
border-bottom: solid rem(3) $light-grey;
@include media-breakpoint-up(lg) {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
padding-right: rem(50);
border-right: solid rem(3) $light-grey;
flex: 1 0 66.667%;
}
.featured-news__large-article__container {
position: relative;
p {
line-height: rem(30);
}
.featured-news__featured-block {
position: absolute;
top: rem(-20);
left: rem(20);
background-color: $iastate-red;
padding: rem(10) rem(20);
z-index: 10;
p {
color: $white;
font-weight: 600;
font-size: rem(20);
}
}
.featured-news__large-article__image-container {
position: relative;
@extend %responsive-img;
.featured-news__large-article__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
&:before {
padding-top: 72.8%;
}
}
.featured-news__large-article__tags,
.featured-news__small-article__tags {
ul {
margin: rem(20) 0 0;
li {
color: $iastate-red;
font-size: rem(16);
font-weight: 600;
padding-right: rem(15);
display: none;
&:first-child {
display: inline;
}
@include media-breakpoint-up(lg) {
display: inline;
}
}
}
}
.featured-news__large-article__title {
margin: 0;
padding: 0;
line-height: rem(16);
.iastate22-link-secondary {
font-size: rem(22);
margin-top: 0;
}
}
.featured-news__large-article__excerpt {
margin: 0;
// &:after {
// content: "...";
// }
}
.featured-news__date {
font-style: italic;
margin: 0;
}
}
}
.featured-news__small-article {
@include media-breakpoint-up(lg) {
// width: rem(500);
flex: 0 0 33.333%;
padding-right: rem(50);
}
.featured-news__small-article__container {
margin-bottom: rem(35);
&:last-child {
margin-bottom: 0;
}
.featured-news__small-article__image-container {
position: relative;
@extend %responsive-img;
.featured-news__small-article__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
&:before {
padding-top: 72.8%;
}
}
.featured-news__small-article__tags {
ul {
margin: rem(20) 0 0;
li {
color: $iastate-red;
font-size: rem(16);
font-weight: 600;
padding-right: rem(15);
display: none;
&:first-child {
display: inline;
}
@include media-breakpoint-up(lg) {
display: inline;
}
}
}
}
.featured-news__small-article__title {
margin: 0;
padding: 0;
line-height: rem(16);
.iastate22-link-secondary {
font-size: rem(22);
margin: 0;
}
}
.featured-news__date {
font-style: italic;
margin: 0;
}
}
}
}
}
There are no notes for this item.