Overview item

Default

  • 3D video foto 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">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.75 18.84"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>3D</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><polyline class="cls-1" points="0.75 13.95 1.29 11.9 3.34 12.44"/><path class="cls-1" d="M14.23,16.91A8.66,8.66,0,0,1,2.38,13.77,8.55,8.55,0,0,1,1.61,12"/><path class="cls-1" d="M18.25,11.63a8.63,8.63,0,0,1-4,5.28"/><polyline class="cls-1" points="19 4.88 18.46 6.93 16.41 6.39"/><path class="cls-1" d="M1.5,7.2a8.65,8.65,0,0,1,16.64-.37"/><path class="cls-1" d="M5.68,7.88a1.29,1.29,0,0,1,1.24-1A1.32,1.32,0,0,1,8.24,8.24,1.18,1.18,0,0,1,7.06,9.42,1.18,1.18,0,0,1,8.24,10.6a1.32,1.32,0,0,1-1.32,1.32,1.29,1.29,0,0,1-1.24-1"/><path class="cls-1" d="M12.53,11.92H10.74v-5h1.79a1.54,1.54,0,0,1,1.54,1.54v1.92A1.54,1.54,0,0,1,12.53,11.92Z"/></g></g></svg>

  </span>
<span class="icon --white --lg i-overview__videocamera">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 13"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>video</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><rect class="cls-1" x="0.75" y="0.75" width="12.38" height="11.5" rx="2.06" ry="2.06"/><path class="cls-1" d="M13.12,7.6l3.8,3.05a1.13,1.13,0,0,0,1.83-.87V3.22a1.13,1.13,0,0,0-1.83-.87L13.12,5.4"/></g></g></svg>

  </span>
<span class="icon --white --lg i-overview__camera">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 17.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>foto</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M13.65,8a4.21,4.21,0,0,1-5.54,5.54A3.86,3.86,0,0,1,6,11.43,4.21,4.21,0,0,1,11.51,5.9,3.82,3.82,0,0,1,13.65,8Z"/><path class="cls-1" d="M18.75,5.43v9.64a1.68,1.68,0,0,1-1.68,1.68H2.43A1.68,1.68,0,0,1,.75,15.07V5.43A1.68,1.68,0,0,1,2.43,3.75H4.75L6.3,1.09A.7.7,0,0,1,6.89.75h5.67a.66.66,0,0,1,.58.33l1.61,2.67h2.32A1.68,1.68,0,0,1,18.75,5.43Z"/></g></g></svg>

  </span>

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

Small

  • foto 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">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 17.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>foto</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M13.65,8a4.21,4.21,0,0,1-5.54,5.54A3.86,3.86,0,0,1,6,11.43,4.21,4.21,0,0,1,11.51,5.9,3.82,3.82,0,0,1,13.65,8Z"/><path class="cls-1" d="M18.75,5.43v9.64a1.68,1.68,0,0,1-1.68,1.68H2.43A1.68,1.68,0,0,1,.75,15.07V5.43A1.68,1.68,0,0,1,2.43,3.75H4.75L6.3,1.09A.7.7,0,0,1,6.89.75h5.67a.66.66,0,0,1,.58.33l1.61,2.67h2.32A1.68,1.68,0,0,1,18.75,5.43Z"/></g></g></svg>

  </span>

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

Without videocamera

  • 3D foto 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">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.75 18.84"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>3D</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><polyline class="cls-1" points="0.75 13.95 1.29 11.9 3.34 12.44"/><path class="cls-1" d="M14.23,16.91A8.66,8.66,0,0,1,2.38,13.77,8.55,8.55,0,0,1,1.61,12"/><path class="cls-1" d="M18.25,11.63a8.63,8.63,0,0,1-4,5.28"/><polyline class="cls-1" points="19 4.88 18.46 6.93 16.41 6.39"/><path class="cls-1" d="M1.5,7.2a8.65,8.65,0,0,1,16.64-.37"/><path class="cls-1" d="M5.68,7.88a1.29,1.29,0,0,1,1.24-1A1.32,1.32,0,0,1,8.24,8.24,1.18,1.18,0,0,1,7.06,9.42,1.18,1.18,0,0,1,8.24,10.6a1.32,1.32,0,0,1-1.32,1.32,1.29,1.29,0,0,1-1.24-1"/><path class="cls-1" d="M12.53,11.92H10.74v-5h1.79a1.54,1.54,0,0,1,1.54,1.54v1.92A1.54,1.54,0,0,1,12.53,11.92Z"/></g></g></svg>

  </span>
<span class="icon --white --lg i-overview__camera">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 17.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>foto</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M13.65,8a4.21,4.21,0,0,1-5.54,5.54A3.86,3.86,0,0,1,6,11.43,4.21,4.21,0,0,1,11.51,5.9,3.82,3.82,0,0,1,13.65,8Z"/><path class="cls-1" d="M18.75,5.43v9.64a1.68,1.68,0,0,1-1.68,1.68H2.43A1.68,1.68,0,0,1,.75,15.07V5.43A1.68,1.68,0,0,1,2.43,3.75H4.75L6.3,1.09A.7.7,0,0,1,6.89.75h5.67a.66.66,0,0,1,.58.33l1.61,2.67h2.32A1.68,1.68,0,0,1,18.75,5.43Z"/></g></g></svg>

  </span>

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

Without three dimensional

  • video foto 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">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 13"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>video</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><rect class="cls-1" x="0.75" y="0.75" width="12.38" height="11.5" rx="2.06" ry="2.06"/><path class="cls-1" d="M13.12,7.6l3.8,3.05a1.13,1.13,0,0,0,1.83-.87V3.22a1.13,1.13,0,0,0-1.83-.87L13.12,5.4"/></g></g></svg>

  </span>
<span class="icon --white --lg i-overview__camera">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 17.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>foto</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M13.65,8a4.21,4.21,0,0,1-5.54,5.54A3.86,3.86,0,0,1,6,11.43,4.21,4.21,0,0,1,11.51,5.9,3.82,3.82,0,0,1,13.65,8Z"/><path class="cls-1" d="M18.75,5.43v9.64a1.68,1.68,0,0,1-1.68,1.68H2.43A1.68,1.68,0,0,1,.75,15.07V5.43A1.68,1.68,0,0,1,2.43,3.75H4.75L6.3,1.09A.7.7,0,0,1,6.89.75h5.67a.66.66,0,0,1,.58.33l1.61,2.67h2.32A1.68,1.68,0,0,1,18.75,5.43Z"/></g></g></svg>

  </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"
    }
  }
}