Emmaboshi 2019 Styleguide

Card Carousel 

<div class="c-cardCarousel" itemscope itemtype="http://schema.org/ItemList">
    <header class="c-cardCarousel__header">
        <div class="c-cardCarousel__title">
            <h3 itemprop="name">Cultura<sup itemprop="numberOfItems">16</sup></h3>
        </div>

        <a class="c-cardCarousel__link" href="#">Guarda tutti</a>
    </header>

    <div class="c-cardCarousel__wrapper">
        <ul class="c-cardCarousel__list">
            <li class="c-cardCarousel__item" itemprop="itemListElement">
                <div class="c-card ">
                    <a class="c-card__imgWrapper bgColor--2" href="#">
    <img loading="lazy" class="c-card__img a-zoom" src="/img/project-01.png" alt="progetto 01">
  </a>
                    <a href="#">
                        <h4 class="c-card__title">
                            99objects visual identity
                        </h4>
                    </a>

                    <div class="c-card__abstract">
                        <p>Identità visiva per una enciclopedia fotografica che parla di 99 oggetti da collezione, attraverso 99 immagini.</p>
                    </div>

                </div>
            </li>
            <li class="c-cardCarousel__item" itemprop="itemListElement">
                <div class="c-card ">
                    <a class="c-card__imgWrapper bgColor--5" href="#">
    <img loading="lazy" class="c-card__img a-zoom" src="/img/project-02.png" alt="Modena Champagne Experience">
  </a>
                    <a href="#">
                        <h4 class="c-card__title">
                            Modena Champagne Experience
                        </h4>
                    </a>

                    <div class="c-card__abstract">
                        <p>Identità visiva per il più grande evento italiano dedicato allo champagne</p>
                    </div>

                </div>
            </li>
            <li class="c-cardCarousel__item" itemprop="itemListElement">
                <div class="c-card ">
                    <a class="c-card__imgWrapper bgColor--9" href="#">
    <img loading="lazy" class="c-card__img a-zoom" src="/img/project-03.png" alt="Gli asteroidi">
  </a>
                    <a href="#">
                        <h4 class="c-card__title">
                            Gli asteroidi
                        </h4>
                    </a>

                    <div class="c-card__abstract">
                        <p>Identità visiva, logo e locandina ufficiale per un film indipendente presentato a Locarno 2017.</p>
                    </div>

                </div>
            </li>
            <li class="c-cardCarousel__item" itemprop="itemListElement">
                <div class="c-card ">
                    <a class="c-card__imgWrapper bgColor--1" href="#">
    <img loading="lazy" class="c-card__img a-zoom" src="/img/project-01.png" alt="progetto 01">
  </a>
                    <a href="#">
                        <h4 class="c-card__title">
                            99objects visual identity
                        </h4>
                    </a>

                    <div class="c-card__abstract">
                        <p>Identità visiva per una enciclopedia fotografica che parla di 99 oggetti da collezione, attraverso 99 immagini.</p>
                    </div>

                </div>
            </li>
            <li class="c-cardCarousel__item" itemprop="itemListElement">
                <div class="c-card ">
                    <a class="c-card__imgWrapper bgColor--17" href="#">
    <img loading="lazy" class="c-card__img a-zoom" src="/img/project-03.png" alt="Gli asteroidi">
  </a>
                    <a href="#">
                        <h4 class="c-card__title">
                            Gli asteroidi
                        </h4>
                    </a>

                    <div class="c-card__abstract">
                        <p>Identità visiva, logo e locandina ufficiale per un film indipendente presentato a Locarno 2017.</p>
                    </div>

                </div>
            </li>
        </ul>
    </div>

</div>
 
<div class="c-cardCarousel" itemscope itemtype="http://schema.org/ItemList">
  <header class="c-cardCarousel__header">
    <div class="c-cardCarousel__title">
      <h3 itemprop="name">{{ title }}<sup itemprop="numberOfItems">{{ total }}</sup></h3>
    </div>

    <a class="c-cardCarousel__link" href="#">Guarda tutti</a>
  </header>

  <div class="c-cardCarousel__wrapper">
    <ul class="c-cardCarousel__list">
      {% for card in cards%}
        <li class="c-cardCarousel__item" itemprop="itemListElement">
          {% render '@card' with card:card %}
        </li>
      {% endfor %}
    </ul>
  </div>

</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",
  "title": "Cultura",
  "total": 16,
  "cards": [
    {
      "img": {
        "src": "/img/project-01.png",
        "alt": "progetto 01"
      },
      "customColor": 2,
      "title": "99objects visual identity",
      "abstract": "Identità visiva per una enciclopedia fotografica che parla di 99 oggetti da collezione, attraverso 99 immagini.",
      "link": {
        "url": "#",
        "label": "Vai al progetto"
      }
    },
    {
      "img": {
        "src": "/img/project-02.png",
        "alt": "Modena Champagne Experience"
      },
      "customColor": 5,
      "title": "Modena Champagne Experience",
      "abstract": "Identità visiva per il più grande evento italiano dedicato allo champagne",
      "link": {
        "url": "#",
        "label": "Vai al progetto"
      }
    },
    {
      "img": {
        "src": "/img/project-03.png",
        "alt": "Gli asteroidi"
      },
      "customColor": 9,
      "title": "Gli asteroidi",
      "abstract": "Identità visiva, logo e locandina ufficiale per un film indipendente presentato a Locarno 2017.",
      "link": {
        "url": "#",
        "label": "Vai al progetto"
      }
    },
    {
      "img": {
        "src": "/img/project-01.png",
        "alt": "progetto 01"
      },
      "customColor": 1,
      "title": "99objects visual identity",
      "abstract": "Identità visiva per una enciclopedia fotografica che parla di 99 oggetti da collezione, attraverso 99 immagini.",
      "link": {
        "url": "#",
        "label": "Vai al progetto"
      }
    },
    {
      "img": {
        "src": "/img/project-03.png",
        "alt": "Gli asteroidi"
      },
      "customColor": 17,
      "title": "Gli asteroidi",
      "abstract": "Identità visiva, logo e locandina ufficiale per un film indipendente presentato a Locarno 2017.",
      "link": {
        "url": "#",
        "label": "Vai al progetto"
      }
    }
  ]
}

There are no notes for this item.