- id: figma
Product without action
-
-
{% include "@Components/items/product-order-item/product-order-item.twig" with {props: { id: "ETHN01", order_id: "id2452345", order_url: "#", date: "14.07.2023", title: "Papírová taška hnědá ExtraTWIST 22x10x28", img: { src: "https://placehold.co/72x72", srcset: [ "https://placehold.co/72x72 1x", "https://placehold.co/144x144 2x" ] }, tags: [ { title: "Potisk", icon: { src: "@Images/svg/printer.svg", }, }, ], color: { title: "Hnědá", name: "color-checkbox", colors: [ "#CFAF8A" ], }, count: "100 ks", total_price: "999 999", }, } %} -
<div class="i-product-order justify-content-between"> <div class="i-product-order__item"> <div class="i-product-overview d-flex align-items-center gap-1" data-product-id="ETHN01"> <div class="i-product-overview__image u-rounded-1 overflow-hidden flex-shrink-0"> <div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1 d-block"> <picture> <img src="https://placehold.co/72x72" alt="Papírová taška hnědá ExtraTWIST 22x10x28" width="72" height="72" loading="lazy" draggable="false" srcset="https://placehold.co/72x72 1x, https://placehold.co/144x144 2x"> </picture> </div> </div> <div class="i-product-overview__content d-flex flex-column gap-05 flex-grow-1"> <div class="i-product-overview__id u-fw-500 u-fz-xs u-color-text-400">ETHN01</div> <div class="i-product-overview__title u-fz-sm u-clamp u-fw-600" title="Papírová taška hnědá ExtraTWIST 22x10x28">Papírová taška hnědá ExtraTWIST 22x10x28</div> <div class="i-product-overview__variants d-flex gap-1 flex-wrap align-items-center"> <label class="f-color u-posr u-rounded-full --sm --checkbox --readonly" style="--background-color:conic-gradient( #CFAF8A 0deg 355deg )"> <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span> </label> <span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --color-secondary-500 --icon-before i-product-overview__tag"> <span class="i-tag__title">Potisk</span> <div class="i-tag__icon"> <span class="icon d-flex align-items-center justify-content-center --colored --text"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#15324F" fill-rule="evenodd" d="M13.56 5.44A1.5 1.5 0 0 1 14 6.5V12h-2v2H4v-2H2V6.5A1.5 1.5 0 0 1 3.5 5H4V2h8v3h.5a1.5 1.5 0 0 1 1.06.44ZM11 3H5v2h6V3ZM5 13h6v-3H5v3Zm7-2h1V6.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5V11h1V9h8v2Zm0-3V7h-2v1h2Z" clip-rule="evenodd"/></svg> </span> </div> </span> </div> </div> </div> </div> <div class="i-product-order__count text-nowrap d-flex align-items-center"> <span class="px-2 py-1 u-bg-tertiary-400 u-fw-600 u-fz-sm u-rounded-4 text-nowrap"> 100 ks </span> </div> <div class="i-product-order__order text-nowrap d-flex align-items-center"> <a class="link d-inline-flex u-fw-600 align-items-center --conversion --underline-initial" href="#" title="id2452345"> <span class="link__title">id2452345</span> </a> </div> <div class="i-product-order__date text-nowrap d-flex align-items-center"> <span class="u-fz-sm text-nowrap u-fw-500">14.07.2023</span> </div> <div class="i-product-order__price text-end text-nowrap d-flex align-items-center justify-content-end"> <span class="u-fw-700"> 999 999 s DPH</span> </div> </div>
Product with action
-
{% include "@Components/items/product-order-item/product-order-item.twig" with {props: { id: "ETHN01", action: true, order_id: "id2452345", date: "14.07.2023", title: "Papírová taška hnědá ExtraTWIST 22x10x28", img: { src: "https://placehold.co/72x72", srcset: [ "https://placehold.co/72x72 1x", "https://placehold.co/144x144 2x" ] }, tags: [ { title: "Potisk", icon: { src: "@Images/svg/printer.svg", }, }, ], color: { title: "Hnědá", name: "color-checkbox", colors: [ "#CFAF8A" ], }, count: "100 ks", total_price: "999 999", }, } %} -
<div class="i-product-order justify-content-between --has-action"> <div class="i-product-order__item"> <div class="i-product-overview d-flex align-items-center gap-1" data-product-id="ETHN01"> <div class="i-product-overview__image u-rounded-1 overflow-hidden flex-shrink-0"> <div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1 d-block"> <picture> <img src="https://placehold.co/72x72" alt="Papírová taška hnědá ExtraTWIST 22x10x28" width="72" height="72" loading="lazy" draggable="false" srcset="https://placehold.co/72x72 1x, https://placehold.co/144x144 2x"> </picture> </div> </div> <div class="i-product-overview__content d-flex flex-column gap-05 flex-grow-1"> <div class="i-product-overview__id u-fw-500 u-fz-xs u-color-text-400">ETHN01</div> <div class="i-product-overview__title u-fz-sm u-clamp u-fw-600" title="Papírová taška hnědá ExtraTWIST 22x10x28">Papírová taška hnědá ExtraTWIST 22x10x28</div> <div class="i-product-overview__variants d-flex gap-1 flex-wrap align-items-center"> <label class="f-color u-posr u-rounded-full --sm --checkbox --readonly" style="--background-color:conic-gradient( #CFAF8A 0deg 355deg )"> <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span> </label> <span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --color-secondary-500 --icon-before i-product-overview__tag"> <span class="i-tag__title">Potisk</span> <div class="i-tag__icon"> <span class="icon d-flex align-items-center justify-content-center --colored --text"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#15324F" fill-rule="evenodd" d="M13.56 5.44A1.5 1.5 0 0 1 14 6.5V12h-2v2H4v-2H2V6.5A1.5 1.5 0 0 1 3.5 5H4V2h8v3h.5a1.5 1.5 0 0 1 1.06.44ZM11 3H5v2h6V3ZM5 13h6v-3H5v3Zm7-2h1V6.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5V11h1V9h8v2Zm0-3V7h-2v1h2Z" clip-rule="evenodd"/></svg> </span> </div> </span> </div> </div> </div> </div> <div class="i-product-order__count text-nowrap d-flex align-items-center"> <span class="px-2 py-1 u-bg-tertiary-400 u-fw-600 u-fz-sm u-rounded-4 text-nowrap"> 100 ks </span> </div> <div class="i-product-order__order text-nowrap d-flex align-items-center"> <span class="u-color-conversion u-fw-700 text-nowrap"> id2452345 </span> </div> <div class="i-product-order__date text-nowrap d-flex align-items-center"> <span class="u-fz-sm text-nowrap u-fw-500">14.07.2023</span> </div> <div class="i-product-order__price text-end text-nowrap d-flex align-items-center justify-content-end"> <span class="u-fw-700"> 999 999 s DPH</span> </div> <div class="d-flex align-items-center justify-content-end"> <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --transparent --animation-zoom --icon-only" href='#' title="Zobrazit detail potisku"> <span class="btn__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --conversion --lg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg> </span> </span> </a> </div> </div>