stack/src/components/sections/variant-intro-section/variant-intro-section.twig line 1

Open in your IDE?
  1. {% set com_props = props %}
  3. {% set section_props = {
  4.   name: "s-variant-intro",
  5.   is_container: false,
  6.   spacing: "none",
  7.   extra_class: props.extra_class,
  8. } %}
  10. {% set pdf_button = {
  11.   title: "Vytisknout / uložit"|trans,
  12.   tag: "a",
  13.   type: "button",
  14.   variant: "outline",
  15.   size: "sm",
  16.   blank: true,
  17.   full_width_mobile: true,
  18.   icon: {
  19.     src: "@Images/svg/document.svg",
  20.     size: "lg",
  21.   },
  22.   extra_class: "--js-pdf-button",
  23.   url: com_props.description.pdf_button_url,
  24. } %}
  26. {% set placeholder_img = {
  27.   src: base_path ~ "images/content/placeholder.png",
  28.   width: 478,
  29.   height: 478,
  30.   objectfit: "contain",
  31.   is_placeholder: true,
  32.   ratio: "1-1",
  33.   extra_class: "s-variant-intro__img-placeholder"
  34. } %}
  36. {% embed "@Components/base-section/base-section.twig" with {props: section_props} %}
  37.   {% block content %}
  38.     <div class="s-variant-intro__grid d-grid gap-4">
  39.       {% if com_props.gallery %}
  40.         <div class="s-variant-intro__gallery-slider d-flex flex-column gap-1 gap-lg-2">
  41.           {% include "@Components/groups/gallery-slider-group/gallery-slider-group.twig" with {props: {items: com_props.gallery}} %}
  42.         </div>
  44.       {% else %}
  45.         {% include "@Components/img/img.twig" with {props: placeholder_img} %}
  46.       {% endif %}
  48.       {% if com_props.description %}
  49.         <div class="s-variant-intro__content d-flex flex-column gap-3 w-100">
  51.           <div class="s-variant-intro__content-header d-flex gap-2 justify-content-between align-items-center">
  52.             {% if com_props.description.code %}
  53.               <div class="s-variant-intro__code d-flex flex-wrap align-items-center gap-1">
  54.                 <div class="u-color-primary u-fz-md">{{ "KÓD PRODUKTU:"|trans }}</div>
  56.                 {% include "@Components/items/tag-item/tag-item.twig" with {props: {
  57.                   title: com_props.description.code,
  58.                   size: "sm-base",
  59.                   variant: "code",
  60.                   extra_class: "s-variant-intro__code-tag"
  61.                 }} %}
  62.               </div>
  63.             {% endif %}
  65.             {% include "@Components/button/button.twig" with {props: pdf_button} %}
  66.           </div>
  68.           {% if com_props.description %}
  69.             <div class="s-variant-intro__description d-flex flex-column gap-6">
  70.               <div class="s-variant-intro__meta d-flex flex-column gap-1">
  71.                 {% if com_props.description.name %}
  72.                   <div class="s-variant-intro__name d-flex flex-wrap gap-1 u-color-primary u-fz-sm u-fw-600">
  73.                     <div class="u-color-primary-500 u-fw-400 s-variant-intro__meta-label">{{ "Název:"|trans }}</div>
  74.                     {{ com_props.description.name }}
  75.                   </div>
  76.                 {% endif %}
  78.                 {% if com_props.description.family %}
  79.                   <div class="s-variant-intro__family d-flex flex-wrap gap-1 u-color-primary u-fz-sm u-fw-600">
  80.                     <div class="u-color-primary-500 u-fw-400 s-variant-intro__meta-label">{{ "Rodina:"|trans }}</div>
  81.                     {{ com_props.description.family }}
  82.                   </div>
  83.                 {% endif %}
  85.                 {% if com_props.description.category %}
  86.                   <div class="s-variant-intro__category d-flex flex-wrap gap-1 u-color-primary u-fz-sm u-fw-600">
  87.                     <div class="u-color-primary-500 u-fw-400 s-variant-intro__meta-label">{{ "Kategorie:"|trans }}</div>
  88.                     {{ com_props.description.category }}
  89.                   </div>
  90.                 {% endif %}
  91.               </div>
  93.               {% if com_props.description.specs %}
  94.                 <div class="s-variant-intro__specs d-flex flex-wrap gap-2 u-posr">
  95.                   {% for item in com_props.description.specs %}
  96.                     {% include "@Components/items/tooltip-item/tooltip-item.twig" with {props: item.tooltip|merge({
  97.                       extra_class: "s-variant-intro__tooltip"
  98.                     })} %}
  99.                   {% endfor %}
  100.                 </div>
  101.               {% endif %}
  102.             </div>
  103.           {% endif %}
  105.           {% if com_props.description.content %}
  106.             <div class="entry-content u-color-primary-500">
  107.               {{ com_props.description.content|raw }}
  108.             </div>
  109.           {% endif %}
  110.         </div>
  111.       {% endif %}
  112.     </div>
  113.   {% endblock %}
  114. {% endembed %}