Fact Filters

templates/facts/index.twig

@@ -5,18 +5,33 @@
     {% set category = craft.app.request.param('category') %}
     {% set factsQuery = craft.entries().section('facts').kategorien(category|t) %}
 
+    <div class="wm-accordion js-wm-accordion mt32">
+        <h3 class="wm-accordion__header js-wm-accordion-header accordion">
+            {{ "Themen"|t }}
+            <svg class="wm-icon wm-accordion__icon wm-accordion__icon--status" width="28" height="28" focusable="false">
+                <use xlink:href="/assets/icons/sprite.symbol.svg#chevron-down" />
+            </svg>
+        </h3>
+        <div class="wm-accordion__panel js-wm-accordion-panel panel">
+            <div class="wm-accordion__panel-inner">
                 <form class="fact-filters wm-nav-tag__list">
+                    <button id="alle" type="submit" class="wm-nav-tag__link" value="">{{"Alle"|t}}</button>
                     {% for thema in craft.entries.section('themen') %}
-        <button id="{{thema.slug}}" type="submit" class="wm-nav-tag__link" name="category" value="{{thema.slug}}">{{thema.title}}</button>
+                    <button id="{{thema.slug}}" type="submit" class="wm-nav-tag__link" name="category"
+                        value="{{thema.slug}}">{{thema.title}}</button>
                     {% endfor %}
                 </form>
+            </div>
+        </div>
+    </div>
+
     {% paginate factsQuery.limit(12) as entries %}
-    <div class="news">
+    <div class="news mt32">
         {% for entry in entries %}
         {% set image = entry.images.one() %}
         <div class="wm-card wm-card--m wm-card--linked" data-wm-card>
             {% for ket in entry.kategorien %}
-            <a href="#">{{ket.label|t}}</a>
+            <span class="wm-badge wm-card__badge">{{ket.label|t}}</span>
             {% endfor %}
             <h3 class="wm-card__heading ">
                 <a href="{{entry.url}}" class="wm-card__link wm-link--unstyled ">
@@ -30,6 +45,9 @@
             <div class="wm-card__content wm-rich-text ">
                 <p>{{ entry.teaser}}</p>
             </div>
+            <div>
+                <a href="{{entry.url}}" class="wm-em-link"><span class="wm-em-link__content">{{ "Mehr lesen"|t }}</span></a>
+            </div>
         </div>
         {% endfor %}
     </div>