Emmaboshi 2019 Styleguide

Post Preview: Icon 

<div class="c-postPreview" itemscope itemtype="http://schema.org/Article">
    <small class="c-postPreview__date">28 agosto 2018</small>
    <a href="#" itemprop="name">
        <h2 class="c-postPreview__title">Del perché non uso più il DIN da 10 anni</h2>
    </a>
    <a class="c-postPreview__imgWrapper" href="#">
    <img loading="lazy" class="a-zoom" src="/img/projectPreview-01.jpg" alt="" itemprop="image">
  </a>
    <p class="c-postPreview__abstract">I mercatini dell'usato sono una miniera di reperti grafici d'epoca. Ecco alcuni degli ultimi ritrovamenti.</p>

</div>
 
<div class="c-postPreview" itemscope itemtype="http://schema.org/Article">
  <small class="c-postPreview__date">{{ date }}</small>
  <a href="#" itemprop="name">
    <h2 class="c-postPreview__title">{{ title }}</h2>
  </a>
  <a class="c-postPreview__imgWrapper" href="#">
    <img loading="lazy" class="a-zoom" src="{{ imgSrc }}" alt="" itemprop="image">
  </a>
  <p class="c-postPreview__abstract">{{ abstract }}</p>
  {# <a href="#" itemprop="url" class="o-arrowLink"><small>Leggi tutto</small></a> #}

  {# <div class="c-postPreview__categories">
    <h3>Argomenti</h3>
    <ul itemprop="keywords">
      {% for category in categories %}
        <li><a href="#">{{ category }}</a></li>
      {% endfor %}
    </ul>
  </div> #}

  {# <button class="c-button">Leggi il post</button> #}
</div>
 
{
  "items": [
    {
      "imgSrc": "http://emmaboshi.net/pics/extra/Bollettino-Boshi.png",
      "img": {
        "src": "http://emmaboshi.net/pics/extra/Bollettino-Boshi.png",
        "alt": "progetto 01"
      },
      "link": {
        "url": "http://emmaboshi.net/extra/bollettino-boshi",
        "label": "Vai al progetto"
      },
      "title": "Bollettino Boshi",
      "abstract": "Il Bollettino è la mia newsletter informale, spedita a cadenza imprevedibile. "
    },
    {
      "imgSrc": "http://emmaboshi.net/pics/extra/bottiato.jpg",
      "img": {
        "src": "http://emmaboshi.net/pics/extra/bottiato.jpg",
        "alt": "progetto 01"
      },
      "link": {
        "url": "http://emmaboshi.net/extra/bollettino-boshi",
        "label": "Vai al progetto"
      },
      "title": "Franco Bottiato",
      "abstract": "Un bot per Facebook Messenger, con la personalità di Franco Bottiato."
    },
    {
      "imgSrc": "http://emmaboshi.net/pics/extra/Radio-Boshi2.jpg",
      "img": {
        "src": "http://emmaboshi.net/pics/extra/Radio-Boshi2.jpg",
        "alt": "progetto 01"
      },
      "link": {
        "url": "http://emmaboshi.net/extra/bollettino-boshi",
        "label": "Vai al progetto"
      },
      "title": "Radio Boshi",
      "abstract": "Un canale Telegram di messaggi vocali inaspettati."
    }
  ],
  "_keys": [
    "type",
    "items"
  ],
  "type": "post-preview",
  "date": "28 agosto 2018",
  "title": "Del perché non uso più il DIN da 10 anni",
  "imgSrc": "/img/projectPreview-01.jpg",
  "abstract": "I mercatini dell'usato sono una miniera di reperti grafici d'epoca. Ecco alcuni degli ultimi ritrovamenti.",
  "categories": [
    "css",
    "fonts",
    "opentype",
    "features",
    "demo",
    "type",
    "typography",
    "characters",
    "demo",
    "design",
    "typesettings",
    "frontend",
    "development",
    "style"
  ],
  "modifier": "icon"
}

Variante con icon