<article class="card-with-image">
<div class="card-with-image__image">
<div class="news-card-image">
<figure class="image ">
<picture class="image__picture">
<source srcset="https://placekitten.com/320/228" type="image/webp">
<source srcset="https://placekitten.com/320/228" type="image/jpeg">
<img class="image__image" loading="lazy" type="image/jpeg" src="https://placekitten.com/320/228" alt="" style="object-position: 0.5% 0.5%">
</picture>
</figure>
</div>
</div>
<div class="card-with-image__content">
<div class="news-card-content">
<div class="news-card-content__date">
November 19, 2021
</div>
<div class="news-card-content__title-container">
<h3 class="linked-title linked-title--h3">
<a href="#" class="linked-title__link">
<span class="linked-title__link-text">Mauris nibh felis adipiscing varius adipiscing in lacinia vel tellus urna</span>
</a>
</h3>
</div>
<div class="news-card-content__excerpt">
The Music Building at the UF College of the Arts is among the priority line items identified by the UF Board of Trustees for State budgetary allocations toward major construction projects at the University of Florida.
The Music Building at the UF College of the Arts is among the priority line items identified by the UF Board of Trustees for State budgetary allocations toward major construction projects at the University of Florida.
</div>
<div class="news-card-content__units">
<div class="unit-list">
<ul class="unit-list__list">
<li class="unit-list__unit">Deans Office</li>
<span class="unit-list__separator">•</span>
<li class="unit-list__unit">Deans Office</li>
<span class="unit-list__separator">•</span>
<li class="unit-list__unit">Deans Office</li>
<span class="unit-list__separator">•</span>
<li class="unit-list__unit">Deans Office</li>
<span class="unit-list__separator">•</span>
<li class="unit-list__unit">Deans Office</li>
</ul>
</div>
</div>
</div>
</div>
</article>
{% extends 'templates/card-with-image/card-with-image.twig' %}
{% block image %}
<div class="news-card-image">
{% include 'partials/image/image.twig' with {
image: post.featuredImage,
background: 'dark',
} %}
</div>
{% endblock %}
{% block text %}
<div class="news-card-content">
<div class="news-card-content__date">
{{ post.date }}
</div>
<div class="news-card-content__title-container">
{% include 'bits/linked-title/linked-title.twig' with {
headingLevel: 3,
text: post.title,
url: post.permalink,
}%}
</div>
{% if includeSummary %}
<div class="news-card-content__excerpt">
{{ post.summary }}
</div>
{% endif %}
{% if post.units and includeUnits %}
<div class="news-card-content__units">
{% include 'partials/unit-list/unit-list.twig' with {
units: post.unitParents
}%}
</div>
{% endif %}
</div>
{% endblock %}
{
"includeUnits": true,
"includeSummary": true,
"post": {
"title": "Mauris nibh felis adipiscing varius adipiscing in lacinia vel tellus urna",
"permalink": "#",
"date": "November 19, 2021",
"summary": "The Music Building at the UF College of the Arts is among the priority line items identified by the UF Board of Trustees for State budgetary allocations toward major construction projects at the University of Florida.\nThe Music Building at the UF College of the Arts is among the priority line items identified by the UF Board of Trustees for State budgetary allocations toward major construction projects at the University of Florida.\n",
"featuredImage": {
"src": "https://placekitten.com/320/228",
"altText": "Adorable Kitten",
"focalPoint": {
"x": 0.5,
"y": 0.5
}
},
"units": [
{
"term_id": 5,
"name": "Deans Office",
"slug": "deans-office",
"term_taxonomy_id": 5,
"taxonomy": "units_and_areas",
"parent": 0
},
{
"term_id": 6,
"name": "School of Music",
"slug": "school-of-music",
"term_taxonomy_id": 6,
"taxonomy": "units_and_areas",
"parent": 0
},
{
"term_id": 6,
"name": "School of Music",
"slug": "school-of-music",
"term_taxonomy_id": 6,
"taxonomy": "units_and_areas",
"parent": 0
},
{
"term_id": 6,
"name": "School of Music",
"slug": "school-of-music",
"term_taxonomy_id": 6,
"taxonomy": "units_and_areas",
"parent": 0
}
],
"unitParents": [
{
"term_id": 5,
"name": "Deans Office",
"slug": "deans-office",
"term_taxonomy_id": 5,
"taxonomy": "units_and_areas",
"parent": 0
},
{
"term_id": 5,
"name": "Deans Office",
"slug": "deans-office",
"term_taxonomy_id": 5,
"taxonomy": "units_and_areas",
"parent": 0
},
{
"term_id": 5,
"name": "Deans Office",
"slug": "deans-office",
"term_taxonomy_id": 5,
"taxonomy": "units_and_areas",
"parent": 0
},
{
"term_id": 5,
"name": "Deans Office",
"slug": "deans-office",
"term_taxonomy_id": 5,
"taxonomy": "units_and_areas",
"parent": 0
},
{
"term_id": 5,
"name": "Deans Office",
"slug": "deans-office",
"term_taxonomy_id": 5,
"taxonomy": "units_and_areas",
"parent": 0
}
]
}
}
excerptBreakpoint = 450px
.news-card-content
--titleColor blue500
--detailColor blue500
--excerptColor grey500
&__title-container
margin-bottom 8px
overflow hidden
&__date
@extends $label
color var(--detailColor)
margin-bottom 8px
&__excerpt
display none
+above(excerptBreakpoint)
@extends $bodySmall
display block
color var(--excerptColor)
margin-top 8px
&__units
margin-top 24px
No notes defined.