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

Open in your IDE?
  1. {% block element_contact_options %}
  2.     <section class="mx-10 boxed-layout">
  3.         {% block contact_options %}
  4.             <div class="flex lg:flex-row flex-col">
  6.                 <div class="flex flex-col w-full lg:w-5/12">
  7.                     <div class="text-2xl text-black font-bold">{{ element.config.title.value }}</div>
  8.                     <div class="text-base text-black">{{ element.config.description.value }}</div>
  9.                 </div>
  11.                 <div class="contact-options grid grid-cols-1 lg:grid-cols-2 md:grid-gap-8 w-full justify-start grid-gap-4 overflow-x-auto xl:grid-gap-6 xl:col-start-6 xl:col-end-13 xl:mt-0 xl:overflow-hidden">
  12.                     {% if element.config.options.value %}
  13.                         {% for option in element.config.options.value %}
  14.                             {% set icon %}
  15.                                 {% if option.type == 'mail' %}
  16.                                     {% sw_icon 'mail' style{'pack': 'theme-icons', 'class': 'text-red-300 w-5 xl:w-10 3xl:w-16'} %}
  17.                                 {% elseif option.type == 'facebook' %}
  18.                                     {% sw_icon 'facebook' style{'pack': 'theme-icons', 'class': 'w-5 xl:w-10 3xl:w-16'} %}
  19.                                 {% elseif option.type == 'instagram' %}
  20.                                     {% sw_icon 'instagram' style{'pack': 'theme-icons', 'class': 'w-5 xl:w-10 3xl:w-16'} %}
  21.                                 {% elseif option.type == 'phone' %}
  22.                                     {% sw_icon 'phone' style{'pack': 'theme-icons', 'class': 'w-5 xl:w-10 3xl:w-16'} %}
  23.                                 {% elseif option.type == 'store' %}
  24.                                     {% sw_icon 'locator' style{'pack': 'default', 'class': 'w-5 xl:w-10 3xl:w-16'} %}
  25.                                 {% endif %}
  26.                             {% endset %}
  27.                             <div class="flex flex-col justify-between flex-shrink-0 flex-grow xl:ml-10 xl:mt-0">
  28.                                 <div class="contact-option-icon mb-4 flex justify-start flex-shrink-0 text-black"
  29.                                      data-icon="{{ option.type }}">
  30.                                     {{ icon }}
  31.                                 </div>
  33.                                 <div class="text-base">
  34.                                     <p class="uppercase font-bold"> {{ option.title }} </p>
  35.                                     <p> {{ option.subtitle|raw }} </p>
  36.                                 </div>
  38.                                 {% if option.url and option.actionText %}
  39.                                     <a href="{{ option.url }}"
  40.                                        role="button"
  41.                                             {% if option.newTab %}
  42.                                                 target="_blank"
  43.                                             {% endif %}
  44.                                        class="contact-option content py-2 flex flex-col justify-start bg-grey-200">
  45.                                         <span class="contact-option-title leading-none font-medium">{{ option.actionText }}</span>
  46.                                     </a>
  47.                                 {% endif %}
  48.                             </div>
  49.                         {% endfor %}
  50.                     {% endif %}
  51.                 </div>
  52.             </div>
  53.         {% endblock %}
  54.     </section>
  55. {% endblock %}