Overview item

Default

  • 7 
  •         {% include "@Components/items/overview-item/overview-item.twig" with {
  props: {
    threeDimensional: true,
    video: true,
    photo: {
      count: "7"
    }
  }
} %}

      
  •           <div class="i-overview"><span class="icon --white --lg i-overview__three-dimensional">
      <img src="images/svg/three-dimensional.svg"  loading="lazy">
  
  </span>
<span class="icon --white --lg i-overview__videocamera">
      <img src="images/svg/videocamera.svg"  loading="lazy">
  
  </span>
<span class="icon --white --lg i-overview__camera">
      <img src="images/svg/camera.svg"  loading="lazy">
  
  </span>

    <span class="i-overview__photo-count">
      7</span></div>

Small

  • 7 
  •         {% include "@Components/items/overview-item/overview-item.twig" with {
  props: {
    variant: "small",
    photo: {
      count: "7"
    }
  }
}%}

      
  •           <div class="i-overview --small"><span class="icon --white --lg i-overview__camera">
      <img src="images/svg/camera.svg"  loading="lazy">
  
  </span>

    <span class="i-overview__photo-count">
      7</span></div>

Without videocamera

  • 7 
  •         {% include "@Components/items/overview-item/overview-item.twig" with {
  props: {
    threeDimensional: true,
    video: false,
    photo: {
      count: "7"
    }
  }
} %}

      
  •           <div class="i-overview"><span class="icon --white --lg i-overview__three-dimensional">
      <img src="images/svg/three-dimensional.svg"  loading="lazy">
  
  </span>
<span class="icon --white --lg i-overview__camera">
      <img src="images/svg/camera.svg"  loading="lazy">
  
  </span>

    <span class="i-overview__photo-count">
      7</span></div>

Without three dimensional

  • 7 
  •         {% include "@Components/items/overview-item/overview-item.twig" with {
  props: {
    threeDimensional: false,
    video: true,
    photo: {
      count: "7"
    }
  }
} %}

      
  •           <div class="i-overview"><span class="icon --white --lg i-overview__videocamera">
      <img src="images/svg/videocamera.svg"  loading="lazy">
  
  </span>
<span class="icon --white --lg i-overview__camera">
      <img src="images/svg/camera.svg"  loading="lazy">
  
  </span>

    <span class="i-overview__photo-count">
      7</span></div>

Schema 

    {
  "props": {
    "threeDimensional": {
      "type": "boolean",
      "description": "Set if should include three dimensional"
    },
    "video": {
      "type": "boolean",
      "description": "Set if should include video"
    },
    "count": {
      "type": "number",
      "description": "Count of photos"
    }
  }
}