News overview page
Overview for news landing page with filter
Markup: components/news-overview/news.twig
<section class="news-landing__wrapper">
<div class="news-landing__content-wrapper">
<div>
<div class="contextual-region view view-what-s-going-on view-id-what_s_going_on view-display-id-block_1 js-view-dom-id-6b20195c6178d9d04bccf4bba56ffa7ef7be375d3e64bb783ee2e74ce60ca95c">
<div class="news-landing__filter">
<form class="views-exposed-form bef-exposed-form" data-bef-auto-submit-full-form="" data-drupal-selector="views-exposed-form-what-s-going-on-block-1" action="/web/whats-going-on" method="get" id="views-exposed-form-what-s-going-on-block-1" accept-charset="UTF-8" data-drupal-form-fields="edit-field-article-category-target-id">
<div class="js-form-item form-item js-form-type-select form-type-select js-form-item-field-article-category-target-id form-item-field-article-category-target-id">
<label for="edit-field-article-category-target-id-button">Filter by category:</label>
<select data-drupal-selector="edit-field-article-category-target-id" id="edit-field-article-category-target-id" name="field_article_category_target_id" class="form-select" style="display: none;">
<option value="All" selected="selected">All</option>
<option value="16">Challenges</option>
<option value="17">Fundraising</option>
<option value="19">Red Nose Day Partners</option>
<option value="14">The difference you make</option>
</select>
<span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all" tabindex="0" id="edit-field-article-category-target-id-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="edit-field-article-category-target-id-menu" aria-haspopup="true" aria-activedescendant="ui-id-1" aria-labelledby="ui-id-1" aria-disabled="false" style="width: 160px;"><span class="ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">All</span></span>
</div>
<div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-bef-auto-submit-click="" class="js-hide button js-form-submit form-submit" data-drupal-selector="edit-submit-what-s-going-on" type="submit" id="edit-submit-what-s-going-on" value="Apply"></div>
</form>
</div>
<div class="news-landing__content">
<div class="news-landing__item">
<article class="article-teaser">
<a class="article-teaser__link" href="#">
<div class="article-teaser__image">
<picture>
<img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
</picture>
</div>
<div class="article-teaser__content-wrapper">
<div class="article-teaser__content">
<span class="article-teaser__date">
28 October 2016
</span>
<h2>News article</h2>
</div>
</div>
</a>
</article>
</div>
<div class="news-landing__item">
<article class="article-teaser">
<a class="article-teaser__link" href="#">
<div class="article-teaser__video">
<picture>
<img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
</picture>
</div>
<div class="article-teaser__content-wrapper">
<div class="article-teaser__content">
<span class="article-teaser__date">
28 October 2016
</span>
<h2>News article with video</h2>
</div>
</div>
</a>
</article>
</div>
<div class="news-landing__item">
<article class="article-teaser">
<a class="article-teaser__link" href="#">
<div class="article-teaser__image">
<picture>
<img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
</picture>
</div>
<div class="article-teaser__content-wrapper">
<div class="article-teaser__content">
<span class="article-teaser__date">
28 October 2016
</span>
<h2>News article</h2>
</div>
</div>
</a>
</article>
</div>
<div class="news-landing__item">
<article class="article-teaser">
<a class="article-teaser__link" href="#">
<div class="article-teaser__video">
<picture>
<img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
</picture>
</div>
<div class="article-teaser__content-wrapper">
<div class="article-teaser__content">
<span class="article-teaser__date">
28 October 2016
</span>
<h2>News article with video</h2>
</div>
</div>
</a>
</article>
</div>
<div class="news-landing__item">
<article class="article-teaser">
<a class="article-teaser__link" href="#">
<div class="article-teaser__image">
<picture>
<img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
</picture>
</div>
<div class="article-teaser__content-wrapper">
<div class="article-teaser__content">
<span class="article-teaser__date">
28 October 2016
</span>
<h2>News article</h2>
</div>
</div>
</a>
</article>
</div>
<div class="news-landing__item">
<article class="article-teaser">
<a class="article-teaser__link" href="#">
<div class="article-teaser__video">
<picture>
<img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
</picture>
</div>
<div class="article-teaser__content-wrapper">
<div class="article-teaser__content">
<span class="article-teaser__date">
28 October 2016
</span>
<h2>News article with video</h2>
</div>
</div>
</a>
</article>
</div>
<div class="news-landing__item">
<article class="article-teaser">
<a class="article-teaser__link" href="#">
<div class="article-teaser__image">
<picture>
<img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
</picture>
</div>
<div class="article-teaser__content-wrapper">
<div class="article-teaser__content">
<span class="article-teaser__date">
28 October 2016
</span>
<h2>News article</h2>
</div>
</div>
</a>
</article>
</div>
<div class="news-landing__item">
<article class="article-teaser">
<a class="article-teaser__link" href="#">
<div class="article-teaser__video">
<picture>
<img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
</picture>
</div>
<div class="article-teaser__content-wrapper">
<div class="article-teaser__content">
<span class="article-teaser__date">
28 October 2016
</span>
<h2>News article with video</h2>
</div>
</div>
</a>
</article>
</div>
<div class="news-landing__item">
<article class="article-teaser">
<a class="article-teaser__link" href="#">
<div class="article-teaser__image">
<picture>
<img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
</picture>
</div>
<div class="article-teaser__content-wrapper">
<div class="article-teaser__content">
<span class="article-teaser__date">
28 October 2016
</span>
<h2>News article</h2>
</div>
</div>
</a>
</article>
</div>
<div class="news-landing__item">
<article class="article-teaser">
<a class="article-teaser__link" href="#">
<div class="article-teaser__video">
<picture>
<img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
</picture>
</div>
<div class="article-teaser__content-wrapper">
<div class="article-teaser__content">
<span class="article-teaser__date">
28 October 2016
</span>
<h2>News article with video</h2>
</div>
</div>
</a>
</article>
</div>
<div class="news-landing__item">
<article class="article-teaser">
<a class="article-teaser__link" href="#">
<div class="article-teaser__image">
<picture>
<img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
</picture>
</div>
<div class="article-teaser__content-wrapper">
<div class="article-teaser__content">
<span class="article-teaser__date">
28 October 2016
</span>
<h2>News article</h2>
</div>
</div>
</a>
</article>
</div>
<div class="news-landing__item">
<article class="article-teaser">
<a class="article-teaser__link" href="#">
<div class="article-teaser__video">
<picture>
<img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
</picture>
</div>
<div class="article-teaser__content-wrapper">
<div class="article-teaser__content">
<span class="article-teaser__date">
28 October 2016
</span>
<h2>News article with video</h2>
</div>
</div>
</a>
</article>
</div>
</div>
{# pagination #}
{% include directory ~ '../pagination/pagination.twig' %}
</div>
</div>
</div>
</section>
Source:
_shop18-styleguide.scss
, line 338