Estructura y estilos para listado de artículos candidatos

_data/articles.yml

@@ -25,9 +25,11 @@
   title: "Donde se cruzan los caminos"
   thumbnailUrl: "audio.svg"
   details: "Formato audio, sin difusión pública"
+  ribbon:
+    - {abbr: "formato audio", title: "formato audio", url: ""}
   autores:
     - {nombre: "", twitter ""}
-  medio: "Formato audio, sin difusión pública"
+  medio: "Formato audio"
   fecha: ""
 -
   id: 3
@@ -56,6 +58,8 @@
   details: "Nadie pensaría en la bicicleta como el transporte del futuro. Lejos de eso, parece ser un medio de transporte básico, rudimentario, y barato. Sin embargo, en los últimos años se ha fomentado su uso en todas las ciudades europeas, bien sea por motivos ecológicos o por evitar la congestión diaria de tráfico."
   autores:
     - {nombre: "José San Miguel Clavería", twitter: ""}
+  ribbon:
+    - {abbr: "Sin difusión pública. Estudiante", title: "", url: ""}
   medio: "Sin difusión publica"
   fecha: "10/05/2017"
 -

_includes/articles-list.html

@@ -7,7 +7,17 @@
                <div class="zoe-effect" data-toggle="modal" data-target="#articleDetail-{{ article.id }}">
                     <figure class="waves-effect waves-block waves-light" style="background-image: url({{ site.baseurl | append: '/img/articles/' | append: article.thumbnailUrl }})">
                         <div class="overlay solid-overlay"></div>
-                        <figcaption style="height: 60px;">
+                        {% if article.ribbon != null %}
+                        <ul class="ribbon-wrapper">
+                            {% for ribbon in article.ribbon %}
+                            <li class="{{ ribbon["abbr"] | downcase }}">
+                                <p class="ribbon abbr">{{ ribbon["abbr"] }}</p>
+                                <p class="ribbon full-title">{{ ribbon["title"] }}</p>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                        {% endif %}
+                        <figcaption style="height: 70px;">
                             <div class="col-md-8 col-xs-8 text-left">
                                 <h2 class="name" style="margin-top: 0; font-size: 1em;">
                                   {{ article.title }}