<section class="news-section">
<h2>WMS & Drupal News</h2>
<article class="news-item card">
<div class="news-item-thumb">
<img src="/img/silhoutte.jpg" alt="" />
</div>
<div class="news-item-desc">
<div class="news-item-date">
January 27, 2020
</div>
<h3><a href="#">This is the Title</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper feugiat nibh sed pulvinar proin gravida. Nisi est sit amet facilisis magna. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tincidunt id aliquet risus feugiat. Justo laoreet sit amet cursus.</p>
<div class="news-item-author">
by: Author Name
</div>
</div>
</article>
<article class="news-item card">
<div class="news-item-thumb">
<img src="/img/silhoutte.jpg" alt="" />
</div>
<div class="news-item-desc">
<div class="news-item-date">
January 28, 2020
</div>
<h3><a href="#">This is the Title</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper feugiat nibh sed pulvinar proin gravida. Nisi est sit amet facilisis magna. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tincidunt id aliquet risus feugiat. Justo laoreet sit amet cursus.</p>
<div class="news-item-author">
by: Author Name
</div>
</div>
</article>
<article class="news-item card">
<div class="news-item-thumb">
<img src="/img/silhoutte.jpg" alt="" />
</div>
<div class="news-item-desc">
<div class="news-item-date">
January 31, 2020
</div>
<h3><a href="#">This is the Title</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper feugiat nibh sed pulvinar proin gravida. Nisi est sit amet facilisis magna. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tincidunt id aliquet risus feugiat. Justo laoreet sit amet cursus.</p>
</div>
</article>
<div class="news-more">
<a href="#" class="btn btn-primary gold" role="button">
<span class="button_text">View More Button Text</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
</section>
<section class="news-section">
{% block news_title %}
{% if section_title %}
<h2>{{ section_title }}</h2>
{% endif %}
{% endblock news_title %}
{% block news_listing %}
{% for news_item in news_items %}
{% include "@news_item" with news_item only %}
{% endfor %}
{% endblock news_listing %}
<div class="news-more">
{% block news_more %}
{% include "@a_tag" with news_more_link
only %}
{% endblock news_more %}
</div>
</section>
{
"section_title": "WMS & Drupal News",
"news_items": {
"1": {
"news_date": "January 27, 2020",
"news_author": "Author Name",
"news_img": "/img/silhoutte.jpg",
"news_link": "#",
"news_title": "This is the Title",
"news_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper feugiat nibh sed pulvinar proin gravida. Nisi est sit amet facilisis magna. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tincidunt id aliquet risus feugiat. Justo laoreet sit amet cursus."
},
"2": {
"news_date": "January 28, 2020",
"news_author": "Author Name",
"news_img": "/img/silhoutte.jpg",
"news_link": "#",
"news_title": "This is the Title",
"news_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper feugiat nibh sed pulvinar proin gravida. Nisi est sit amet facilisis magna. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tincidunt id aliquet risus feugiat. Justo laoreet sit amet cursus."
},
"3": {
"news_date": "January 31, 2020",
"news_img": "/img/silhoutte.jpg",
"news_link": "#",
"news_title": "This is the Title",
"news_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper feugiat nibh sed pulvinar proin gravida. Nisi est sit amet facilisis magna. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tincidunt id aliquet risus feugiat. Justo laoreet sit amet cursus."
}
},
"news_more_link": {
"text": "View More Button Text",
"url": "#",
"color": "gold"
}
}
.news-section {
margin: $space-two 0;
.news-list {
background-color: unset;
padding: 0;
border-top: 0;
.form--inline {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
margin: 0 0 $spacer 0;
.form-item {
margin-bottom: 0;
input[type=submit] {
max-height: 50px;
margin: $spacer 0 0 0;
}
}
}
}
.news-item {
margin: 0 0 $space_two 0;
&:last-of-type {
margin: 0;
}
}
form {
.js-form-item {
label {
margin-bottom: 0;
}
}
}
input {
&.form-submit {
margin-top: 1.5rem;
}
}
.news-more {
margin: $spacer 0;
display: flex;
justify-content: end;
}
}
Display the news preview section.