Category card item default

  •         {% include "@Components/items/category-card-item/category-card-item.twig" with {
    props: {
      title: "Byty",
      url: "#",
      count: "4 637",
      img: {
        src: "images/examples/QL7KdXdcfWA-480x640.jpeg",
        ratio: "3-4",
      },
      subcategories: [
        {
          url: "#",
          title: "Pronájem"
        },
        {
          url: "#",
          title: "Prodej"
        },
        {
          url: "#",
          title: "Dražby"
        },
      ]
  }
}
%}

      
  •           <article class="i-category-card">

  <div class="i-category-card__image">
    <a href="#" class="i-category-card__image-link u-img-hover">
              <div class="img  --ratio-3-4">
      <picture>
    
    <img src="" data-src="images/examples/QL7KdXdcfWA-480x640.jpeg" alt="" draggable="false">
  </picture>
</div>
          </a>
  </div>

  <div class="i-category-card__body">

    <header class="i-category-card__header">

      <h2 class="i-category-card__heading">
        <a href="#" class="i-category-card__heading-link">Byty</a>
      </h2>

              <span class="i-category-card__count">
          Celkem
          <span class="text-nowrap">
            4 637
          </span>
        </span>
      
    </header>
          <div class="g-subcategory g-base">
      <a href="#" class="i-subcategory">Pronájem</a>
      <a href="#" class="i-subcategory">Prodej</a>
      <a href="#" class="i-subcategory">Dražby</a>
  </div>
    
  </div>

</article>

Category card item compact variant

  •         {% include "@Components/items/category-card-item/category-card-item.twig" with {
    props: {
      title: "Pozemky",
      url: "#",
      count: "1 637",
      img: {
        src: "images/examples/WPapb9IqRKw-640x480.jpeg",
        ratio: "4-3",
      }
  }
}
%}

      
  •           <article class="i-category-card">

  <div class="i-category-card__image">
    <a href="#" class="i-category-card__image-link u-img-hover">
              <div class="img  --ratio-4-3">
      <picture>
    
    <img src="" data-src="images/examples/WPapb9IqRKw-640x480.jpeg" alt="" draggable="false">
  </picture>
</div>
          </a>
  </div>

  <div class="i-category-card__body">

    <header class="i-category-card__header">

      <h2 class="i-category-card__heading">
        <a href="#" class="i-category-card__heading-link">Pozemky</a>
      </h2>

              <span class="i-category-card__count">
          Celkem
          <span class="text-nowrap">
            1 637
          </span>
        </span>
      
    </header>
    
  </div>

</article>

Schema 

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Title of the component"
    },
    "perex": {
      "type": "string",
      "description": "Perex of the component"
    },
    "tags": {
      "type": "array",
      "description": "List of tags"
    },
    "date": {
      "type": "string",
      "description": "Date of the component"
    },
    "variant": {
      "type": "string",
      "description": "column"
    },
    "extraClass": {
      "type": "string",
      "description": "Addiotional class to the component"
    },
    "imgSrc": {
      "type": "string",
      "description": "url of image"
    },
    "href": {
      "type": "string",
      "description": "# (default)"
    }
  }
}