<div class="home-news">
<div class="home-news__title-and-cta">
<div class="home-news__title">
<h2 class="home-news__title-text" id="Latest news">
Latest news
</h2>
<p class="home-news__description">
</div>
<div class="home-news__cta-container">
<a href="#" class="standard-button standard-button--light
standard-button---width standard-button--tertiary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">See All News</span><span class="standard-button__underline"></span></span></div>
</a>
</div>
</div>
<div class="home-news__content">
<div class="home-news__feature">
<div class="home-news__feature-image">
<img width="746" height="420" src="holder.js/746x420?auto=yes&text=Featured+Story" alt="">
</div>
<div class="home-news__feature-date">
July 26, 2023
</div>
<h3 class="home-news__feature-title home-news__feature-title--dark">
<a href="#">
State of Florida allocates $35 million for improvements to School of Music building at the University of Florida
</a>
</h3>
</div>
<div class="home-news__list">
<div class="home-news__list-item">
<div class="home-news__list-item-date">
September 27, 2023
</div>
<h3 class="home-news__list-item-title">
<a href="#">
UF COTA researchers explore artists’ role as ‘second responders’ in communities impacted by natural disasters
</a>
</h3>
</div>
<div class="home-news__list-item">
<div class="home-news__list-item-date">
September 27, 2023
</div>
<h3 class="home-news__list-item-title">
<a href="#">
UF Center for Arts, Migration, and Entrepreneurship appoints Dr. Porchia Moore as associate director
</a>
</h3>
</div>
<div class="home-news__list-item">
<div class="home-news__list-item-date">
September 27, 2023
</div>
<h3 class="home-news__list-item-title">
<a href="#">
Ferol Carytsas selected to lead the Center for Arts in Medicine at UF College of the Arts as the center’s new director
</a>
</h3>
</div>
</div>
</div>
</div>
{# twig.news.fields #}
{# {{ dump(fields) }} #}
<div class="home-news">
<div class="home-news__title-and-cta">
<div class="home-news__title">
<h2
class="home-news__title-text"
id="{{ fields.title|sanitize }}">
{{ fields.title }}
</h2>
<p class="home-news__description">
{{ fields.description }}
</div>
<div class="home-news__cta-container">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: fields.linkText,
type: 'tertiary',
url: fields.linkUrl,
},
background: 'light'
} %}
</div>
</div>
<div class="home-news__content">
<div class="home-news__feature">
<div class="home-news__feature-image">
<img width="746" height="420" src="{{ fields.featuredStory.featuredImage.src | resize(746, 420) | towebp }}" alt="{{ fields.featuredStory.featuredImage.alt }}">
</div>
<div class="home-news__feature-date">
{{ fields.featuredStory.date }}
</div>
<h3 class="home-news__feature-title home-news__feature-title--dark">
<a href="{{ fields.featuredStory.permalink }}">
{{ fields.featuredStory.title }}
</a>
</h3>
</div>
<div class="home-news__list">
{% for item in fields.items %}
<div class="home-news__list-item">
<div class="home-news__list-item-date">
{{ item.date }}
</div>
<h3 class="home-news__list-item-title">
<a href="{{ item.permalink }}">
{{ item.title }}
</a>
</h3>
</div>
{% endfor %}
</div>
</div>
</div>
{
"fields": {
"title": "Latest news",
"jumbo": true,
"showCTALink": true,
"linkText": "See All News",
"linkUrl": "#",
"featuredStory": {
"title": "State of Florida allocates $35 million for improvements to School of Music building at the University of Florida",
"permalink": "#",
"date": "July 26, 2023",
"featuredImage": {
"src": "holder.js/746x420?auto=yes&text=Featured+Story",
"altText": "alt text",
"focalPoint": {
"x": 50,
"y": 50
}
}
},
"items": [
{
"title": "UF COTA researchers explore artists’ role as ‘second responders’ in communities impacted by natural disasters",
"permalink": "#",
"date": "September 27, 2023"
},
{
"title": "UF Center for Arts, Migration, and Entrepreneurship appoints Dr. Porchia Moore as associate director",
"permalink": "#",
"date": "September 27, 2023"
},
{
"title": "Ferol Carytsas selected to lead the Center for Arts in Medicine at UF College of the Arts as the center’s new director",
"permalink": "#",
"date": "September 27, 2023"
}
]
}
}
.home-news
@extends $componentWithMargin
background-color transparent
border-radius 8px
container-type inline-size
fluid(padding-bottom, 32px, 80px)
fluid(padding-top, 32px, 80px)
fluid(padding-left, 24px, 48px)
fluid(padding-right, 24px, 48px)
&__title-and-cta
display flex
flex-direction column
gap 18px 32px
justify-content space-between
fluid(margin-bottom, 48px, 64px)
@container (width > 800px)
&
align-items flex-end
flex-direction row
&__title-text
@extends $headline2altMax
color blue500
margin-bottom 16px
&__content
display flex
flex-direction column
gap 24px 32px
@container (width > 800px)
&
align-items flex-start
display grid
grid-template-columns 2fr 1fr
&__feature
background-color blue500
border-radius 12px
margin-bottom 24px
fluid(padding, 16px, 32px)
&-image img
border-radius 8px
margin-bottom 24px
width 100%
&-date
@extends $label
color blue100
margin-bottom 8px
text-align center
&-title
text-align center
& a
@extends $headline3
color white
&__list
display flex
flex-direction column
fluid(gap, 24px, 32px)
&-item
border-top 1px solid coolGray3
padding-top 24px
&-date
@extends $label
color blue400
margin-bottom 8px
&-title a
@extends $linkHeadline4
No notes defined.