Add card to template

index.html

@@ -27,7 +27,8 @@
       </div>
     </section>
     <hr>
-    <div id="template" hx-boost hx-ext="client-side-templates">
+    <section>
+      <div class="container is-max-widescreen" id="template" hx-boost hx-ext="client-side-templates">
         <div
           hx-get="http://localhost:1337/api/articles?populate=couverture"
           hx-trigger="load"
@@ -36,14 +37,33 @@
           <p>Chargement...</p>
         </div>
         <script id="articles" type="x-tmpl-mustache">
+          <div class="columns is-multiline p-3">
             {{#data}}
+              <div class="column is-one-third">
+                <div class="card">
+                  <div class="card-image">
+                    <figure class="image is-square">
+                      <img src="http://localhost:1337{{attributes.couverture.data.attributes.url}}" alt="{{attributes.couverture.data.attributes.alternativeText}}">
+                    </figure>
+                  </div>
+                  <div class="card-content">
+                    <div class="content">
                       <h2 class="title">{{attributes.titre}}</h2>
-            {{{attributes.contenu}}}
-            <small>Date de publication : {{attributes.date}}</small></pre>
-            <hr/>
+                      {{{attributes.chapeau}}}
+                    </div>
+                  </div>
+                  <footer class="card-footer">
+                    <div class="has-text-centered" style="width: 100%">
+                      <p class="my-3"><small><i>Date de publication : {{attributes.date}}</i></small></p>
+                    </div>
+                  </footer>
+                </div>
+              </div>
             {{/data}}
+          </div>
         </script>
       </div>
+    </section>
     <div id="modal-charte" class="modal">
       <div class="modal-background"></div>
       <div class="modal-card">