Emmaboshi 2019 Styleguide

Post Grid 

<ul class="o-cardsGrid ">
    <li class="o-cardsGrid__item l-subgrid__card l-subgrid__card--sequential l-module">
        <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">Alexey Brodovitch, pioniere del layout</h2>
            </a>
            <a class="c-postPreview__imgWrapper" href="#">
    <img loading="lazy" class="a-zoom" src="http://www.emmaboshi.net/pics/blog/2019/spread8.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>
    </li>
    <li class="o-cardsGrid__item l-subgrid__card l-subgrid__card--sequential l-module">
        <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">Still life</h2>
            </a>
            <a class="c-postPreview__imgWrapper" href="#">
    <img loading="lazy" class="a-zoom" src="http://www.emmaboshi.net/pics/blog/2019/IMG_6104.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>
    </li>
    <li class="o-cardsGrid__item l-subgrid__card l-subgrid__card--sequential l-module">
        <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">Salina di Comacchio</h2>
            </a>
            <a class="c-postPreview__imgWrapper" href="#">
    <img loading="lazy" class="a-zoom" src="http://www.emmaboshi.net/pics/blog/IMG_6064.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>
    </li>
</ul>
 
<ul class="o-cardsGrid {{ modifier }}">
  {% for post in posts %}
    <li class="o-cardsGrid__item l-subgrid__card l-subgrid__card--sequential l-module">
      {% render '@post-preview' with {
        modifier: '',
        imgSrc: post.imgSrc,
        title: post.title,
        abstract: post.abstract,
        link: post.link
      } %}
    </li>
  {% endfor %}
</ul>
 
{
  "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",
  "posts": [
    {
      "date": "28 agosto 2018",
      "title": "Alexey Brodovitch, pioniere del layout",
      "imgSrc": "http://www.emmaboshi.net/pics/blog/2019/spread8.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"
      ]
    },
    {
      "date": "26 agosto 2018",
      "title": "Still life",
      "imgSrc": "http://www.emmaboshi.net/pics/blog/2019/IMG_6104.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"
      ]
    },
    {
      "date": "8 luglio 2018",
      "title": "Salina di Comacchio",
      "imgSrc": "http://www.emmaboshi.net/pics/blog/IMG_6064.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"
      ]
    }
  ]
}
  • Content: 
    # Post Grid
Visualizza una lista di post.

Varianti:
-
  • URL: /components/raw/post-grid/post-grid.md
  • Filesystem Path: src/components/02-elements/post-grid/post-grid.md
  • Size: 55 Bytes

There are no notes for this item.