<div class="external-news-story">
<h2>Optional Subheading External News/Story Feature</h2>
<div class="external-news-story__flex-wrap">
<div class="external-news-story__media">
<img src="../../img/Component-Feature-News-Story-Image.jpg" alt="" loading="lazy" width="608" height="404">
</div>
<div class="external-news-story__content text-content">
<h3>Headline Nemo enim irure dolor in reprehenderit in voluptate velit esse cillum dolore.</h3>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="link-set">
<ul>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-external">External Link Style<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="external-news-story">
{% if subhead %}
<h2>{{subhead}}</h2>
{% endif %}
<div class="external-news-story__flex-wrap">
<div class="external-news-story__media">
<img src="{{ image|path }}" alt="" loading="lazy" width="608" height="404" >
</div>
<div class="external-news-story__content text-content">
<h3>{{headline}}</h3>
<p>{{body_copy}}</p>
{% include "@link-set" with link_set %}
</div>
</div>
</div>
{
"subhead": "Optional Subheading External News/Story Feature",
"image": "../../img/Component-Feature-News-Story-Image.jpg",
"headline": "Headline Nemo enim irure dolor in reprehenderit in voluptate velit esse cillum dolore.",
"body_copy": "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
"link_set": {
"links": [
{
"url": "https://iastate.edu",
"text": "External Link Style",
"variant": "iastate22-link-external"
}
]
}
}
.paragraph-widget--external-news-story {
margin-top: rem(60);
@extend %extended-component-width;
}
.external-news-story {
background-color: $off-white;
padding: rem(50) rem(36);
@include media-breakpoint-up(md) {
padding-left: rem(53);
padding-right: rem(53);
}
@include media-breakpoint-up(lg) {
padding: rem(60) rem(106);
}
h2 {
@extend %h3;
}
h3 {
@extend %h4;
}
.link-set {
margin-top: rem(20);
}
}
.external-news-story__flex-wrap {
@include media-breakpoint-up(md) {
display: flex;
align-items: flex-start;
}
}
.external-news-story__media {
margin: 0 0 rem(10) 0;
@extend %responsive-img;
@include media-breakpoint-up(md) {
flex: 0 1 auto;
width: 37%;
min-width: rem(285);
margin: 0;
}
&:before {
padding-top: 66.45%;
}
}
.external-news-story__content {
@include media-breakpoint-up(md) {
flex: 0 1 auto;
width: 63%;
padding-left: rem(20);
padding-top: rem(10);
}
}
This is a custom component (no class prefix in place as it does not conflict with bootstrap)
link-set sub-component with the “variant” field set to iastate22-link-externalsubhead section is optionalindex.scss file as @import "../components/external-news-story/external-news-story";<div class="paragraph-widget paragraph-widget--external-news-story">.