Emmaboshi 2019 Styleguide

Card: Senza Abstract 

<div class="c-card ">
    <a class="c-card__imgWrapper bgColor--3" 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>
 
<div class="c-card {{ modifier }}">
  <a class="c-card__imgWrapper bgColor--{{ customColor }}" href="#" >
    <img loading="lazy" class="c-card__img a-zoom" src="{{ img.src }}" alt="{{ img.alt }}">
  </a>
  <a href="#">
    <h4 class="c-card__title">
      {{ title }}
    </h4>
  </a>

  {% if abstract %}
    <div class="c-card__abstract">
      <p>{{ abstract }}</p>
    </div>
  {% endif %}

  {# {% if link %}
    <a class="c-card__link o-arrowLink" href="{{ link.href }}"><small>{{ link.label }}</small></a>
  {% endif %} #}
</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",
  "img": {
    "src": "/img/project-01.png",
    "alt": "progetto 01"
  },
  "customColor": 3,
  "title": "99objects visual identity",
  "abstract": null,
  "link": {
    "url": "#",
    "label": "Vai al progetto"
  }
}
  • Content: 
    # Card

Note:
- Non ha varianti
- Titolo e immagine obbligatori, campi opzionali: abstract, link
  • URL: /components/raw/card/card.md
  • Filesystem Path: src/components/01-atoms/card/card.md
  • Size: 97 Bytes

Variante senza abstract