<div id="themes" class="o-grid u-clearfix"> <div class="o-grid__item o-grid__item__heading o-grid__item--nohover o-grid__item--small"> <h2 class="u-color-white u-text-upper o-grid__item__title u-text-center">{{'sv_themes'|trans}}</h2> </div> {% for item in items %} <a href="{{ path('notaris_frontend_subsite', {'slug': item['slug']}) }}" title="{{ item['page_title'] }}" data-type="themes" class="o-grid__item o-object-fit o-grid__item--small js-fednotlink"> {% set image_path = "/uploads/" ~ locale ~ item['filename'] %} {{ image_path | responsive_image_source([448, 353, 436], {'filterset': 'responsive_article_image', 'sizes': '(min-width: 960px) 448px, (min-width: 768px and max-width: 960px) 353px, (min-width: 480px and max-width: 768px) 436px, (max-width: 480px) 100vw', 'alt': item['page_title'], 'title': item['page_title']}) }} <div class="o-grid__item__overlay"> <div class="o-grid__item__overlay__title"> {# titel van de subsite = item['page_title'] #} <h3 class="u-color-white u-h4 u-text-light">{% if item['oneliner'] %}{{ item['oneliner'] | raw }}{% else %}{{ item['page_title'] }}{% endif %}</h3> </div> <div class="o-grid__item__overlay__title o-grid__item__overlay__title--onhover u-bg-{{item['stylesheet']}}--opacity50"> <div class="o-flex o-grid__item__overlay__title__item"> <h4 class="u-color-white u-h4 u-text-light o-flex__remaining u-text-block u-margin-bottom-none">{{'sv_themes_about'|trans}} {{ item['page_title']|lower }}</h4> <button class="c-btn c-btn__next c-btn__next--white c-btn--empty"> </button> </div> </div> </div> </a> {% endfor %} {#<div class="o-grid__item o-grid__item--empty o-grid__item--nohover o-grid__item--small"> </div>#}</div><div class="c-divider"> </div>