<div class="article-grid article-grid--4-columns">
<div class="article-grid__inner grid">
<div class="article-grid__item">
<article class="article">
<div class="article__image">
<a href="https://welcometruth.com/">
<picture>
<source media="(min-width:768px)" srcset="https://placehold.co/400x400">
<img class="w-full object-cover" src="https://placehold.co/480x300" alt="Test alt" />
</picture>
</a>
</div>
<div class="context context--small context--align-left context--default">
<h2 class="context__heading">Pioneering the Future of Power</h2>
<p>UH, The Energy University, is integral to evolving industry and academia’s approach to sustainability.</p>
<div class="button-group">
<a class="btn btn--red" href="https://welcometruth.com/" target="" aria-label=""><span>Read Story <svg class="" viewBox="0 0 11.2 11.2">
<path d="M5.6 11.2 0 6l1.2-1.3L4.7 8V0h1.8v8L10 4.7 11.2 6l-5.6 5.2z" />
</svg>
</span></a>
</div>
</div>
</article>
</div>
<div class="article-grid__item">
<article class="article">
<div class="article__image">
<a href="https://welcometruth.com/">
<picture>
<source media="(min-width:768px)" srcset="https://placehold.co/400x400">
<img class="w-full object-cover" src="https://placehold.co/480x300" alt="Test alt" />
</picture>
</a>
</div>
<div class="context context--small context--align-left context--default">
<h2 class="context__heading">Research that Transforms Lives</h2>
<p>UH researchers are discovering drugs and technologies that could change the landscape of medical possibilities.</p>
<div class="button-group">
<a class="btn btn--red" href="https://welcometruth.com/" target="" aria-label=""><span>Read Story <svg class="" viewBox="0 0 11.2 11.2">
<path d="M5.6 11.2 0 6l1.2-1.3L4.7 8V0h1.8v8L10 4.7 11.2 6l-5.6 5.2z" />
</svg>
</span></a>
</div>
</div>
</article>
</div>
<div class="article-grid__item">
<article class="article">
<div class="article__image">
<a href="https://welcometruth.com/">
<picture>
<source media="(min-width:768px)" srcset="https://placehold.co/400x400">
<img class="w-full object-cover" src="https://placehold.co/480x300" alt="Test alt" />
</picture>
</a>
</div>
<div class="context context--small context--align-left context--default">
<h2 class="context__heading">Community-Centered Innovation</h2>
<p>UH Health providers are creating new models for comprehensive, collaborative, community-centered care.</p>
<div class="button-group">
<a class="btn btn--red" href="https://welcometruth.com/" target="" aria-label=""><span>Read Story <svg class="" viewBox="0 0 11.2 11.2">
<path d="M5.6 11.2 0 6l1.2-1.3L4.7 8V0h1.8v8L10 4.7 11.2 6l-5.6 5.2z" />
</svg>
</span></a>
</div>
</div>
</article>
</div>
<div class="article-grid__item">
<article class="article">
<div class="article__image">
<a href="https://welcometruth.com/">
<picture>
<source media="(min-width:768px)" srcset="https://placehold.co/400x400">
<img class="w-full object-cover" src="https://placehold.co/480x300" alt="Test alt" />
</picture>
</a>
</div>
<div class="context context--small context--align-left context--default">
<h2 class="context__heading">Commitment Beyond the Classroom</h2>
<p>UH’s full-spectrum support programs provide a new paradigm for student success.</p>
<div class="button-group">
<a class="btn btn--red" href="https://welcometruth.com/" target="" aria-label=""><span>Read Story <svg class="" viewBox="0 0 11.2 11.2">
<path d="M5.6 11.2 0 6l1.2-1.3L4.7 8V0h1.8v8L10 4.7 11.2 6l-5.6 5.2z" />
</svg>
</span></a>
</div>
</div>
</article>
</div>
</div>
</div>
{% if in_component_library %}
{% set article = '@article' %}
{% else %}
{% set article = 'article.twig' %}
{% endif %}
<div class="article-grid article-grid--{{ columns|default('4') }}-columns">
<div class="article-grid__inner grid">
{% for item in items %}
<div class="article-grid__item">
{% include article with item %}
</div>
{% endfor %}
</div>
</div>
{
"in_component_library": true,
"items": [
{
"image": {
"srcset": "https://placehold.co/400x400",
"src": "https://placehold.co/480x300",
"alt": "Test alt"
},
"heading": "Pioneering the Future of Power",
"paragraphs": "<p>UH, The Energy University, is integral to evolving industry and academia’s approach to sustainability.</p>",
"buttons": [
{
"button": {
"title": "Read Story",
"url": "https://welcometruth.com/"
}
}
]
},
{
"image": {
"srcset": "https://placehold.co/400x400",
"src": "https://placehold.co/480x300",
"alt": "Test alt"
},
"heading": "Research that Transforms Lives",
"paragraphs": "<p>UH researchers are discovering drugs and technologies that could change the landscape of medical possibilities.</p>",
"buttons": [
{
"button": {
"title": "Read Story",
"url": "https://welcometruth.com/"
}
}
]
},
{
"image": {
"srcset": "https://placehold.co/400x400",
"src": "https://placehold.co/480x300",
"alt": "Test alt"
},
"heading": "Community-Centered Innovation",
"paragraphs": "<p>UH Health providers are creating new models for comprehensive, collaborative, community-centered care.</p>",
"buttons": [
{
"button": {
"title": "Read Story",
"url": "https://welcometruth.com/"
}
}
]
},
{
"image": {
"srcset": "https://placehold.co/400x400",
"src": "https://placehold.co/480x300",
"alt": "Test alt"
},
"heading": "Commitment Beyond the Classroom",
"paragraphs": "<p>UH’s full-spectrum support programs provide a new paradigm for student success.</p>",
"buttons": [
{
"button": {
"title": "Read Story",
"url": "https://welcometruth.com/"
}
}
]
}
]
}
.article-grid {
padding: 80px 0 40px;
&__item {
position: relative;
grid-column: span 12 / span 12;
margin-bottom: 40px;
@include breakpoint(medium) {
grid-column: span 6 / span 6;
}
@include breakpoint(large) {
grid-column: span 3 / span 3;
.article-grid--2-columns & {
grid-column: span 6 / span 6;
}
.article-grid--3-columns & {
grid-column: span 4 / span 4;
}
}
}
.context__heading {
color: $red;
}
}
No notes defined.