custom/static-plugins/NdVoorwindenTheme/src/Resources/views/storefront/element/cms-element-contact-options.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/element/cms-element-contact-options.html.twig' %}
  3.         {% block contact_options %}
  4.             <div class="flex flex-col">
  5.                 <div class="flex flex-col w-full text-start md:text-center">
  6.                     <div class="text-2xl md:text-4xl text-grey-900 font-display font-bold tracking-tight">{{ element.config.title.value }}</div>
  7.                     <div class="text-base text-grey-600 font-body my-6">{{ element.config.description.value }}</div>
  8.                 </div>
  9.                 <div class="contact-options flex flex-col justify-center mt-6 md:flex-row space-x-0 md:space-x-6 space-y-4 md:space-y-0">
  10.                     {% if element.config.options.value %}
  11.                         {% for option in element.config.options.value %}
  12.                             {% set icon %}
  13.                                 {% if option.type == 'mail' %}
  14.                                     {% sw_icon 'mail' style{'pack': 'theme-icons', 'class': 'text-red-300 w-5 xl:w-10 3xl:w-16'} %}
  15.                                 {% elseif option.type == 'facebook' %}
  16.                                     {% sw_icon 'facebook' style{'pack': 'theme-icons', 'class': 'w-5 xl:w-10 3xl:w-16'} %}
  17.                                 {% elseif option.type == 'instagram' %}
  18.                                     {% sw_icon 'instagram' style{'pack': 'theme-icons', 'class': 'w-5 xl:w-10 3xl:w-16'} %}
  19.                                 {% elseif option.type == 'phone' %}
  20.                                     {% sw_icon 'phone' style{'pack': 'theme-icons', 'class': 'w-5 xl:w-10 3xl:w-16'} %}
  21.                                 {% elseif option.type == 'store' %}
  22.                                     {% sw_icon 'locator' style{'pack': 'default', 'class': 'w-5 xl:w-10 3xl:w-16'} %}
  23.                                 {% endif %}
  24.                             {% endset %}
  25.                             <div class="flex flex-col gap-y-6 justify-between w-full bg-grey-50 rounded-sm p-6">
  26.                                 <div class="hidden contact-option-icon mb-4 flex justify-start flex-shrink-0 text-black"
  27.                                      data-icon="{{ option.type }}">
  28.                                     {{ icon }}
  29.                                 </div>
  31.                                 <div class="space-y-6">
  32.                                     <h1 class="font-bold font-display text-2xl tracking-tight"> {{ option.title }} </h1>
  33.                                     <p class="font-body text-sm "> {{ option.subtitle|raw }} </p>
  34.                                 </div>
  36.                                 {% if option.url and option.actionText %}
  37.                                     <a href="{{ option.url }}"
  38.                                        role="button"
  39.                                             {% if option.newTab %}
  40.                                                 target="_blank"
  41.                                             {% endif %}
  42.                                        class="flex justify-start contact-option-title uppercase font-bold font-accent text-sm text-center w-full lg:w-fit md:w-auto py-2 px-4 grid-gap-x-2 h-[40px] flex justify-center items-center border border-grey-900 tracking-wider hover:text-grey-400 hover:border-grey-400">
  43.                                         {{ option.actionText }}
  44.                                         {% if option.btnIcon %}
  45.                                             <span class="w-4 h-auto">{% sw_icon 'chevron-right' style{'pack': 'theme-icons', 'class': ' w-4 mr-4 flex items-center '} %}</span>
  47.                                         {% endif %}
  49.                                     </a>
  50.                                 {% endif %}
  51.                             </div>
  52.                         {% endfor %}
  53.                     {% endif %}
  54.                 </div>
  55.             </div>
  56.         {% endblock %}