templates/areas/text-and-links-brick/view.html.twig line 1

Open in your IDE?
  1. {% set style = style ?? pimcore_select('style').getData() %}
  3. {% embed 'app/area-brick-layout.html.twig' %}
  4.     {% block content %}
  6.         {% if style == 'normal' %}
  7.             <!-- Contact Full Width -->
  8.             <section class="{{ defaultBackgroundColor ?? null }} relative">
  9.                 <div class="{{ containerClasses ?? 'container relative py-10 md:py-20 z-20' }}">
  10.                     <div class="{{ elementClasses ?? '' }} relative flex flex-col lg:flex-row gap-6 p-6 md:p-10 text-white bg-blue-300 rounded-md">
  11.                         <div>
  12.                             {{ pimcore_image('image', {
  13.                                 thumbnail: 'text-and-link-icon',
  14.                                 width: 52,
  15.                                 height: 52,
  16.                                 imgAttributes: {class: 'rounded-full'},
  17.                                 pictureAttributes: {class: 'w-full'},
  18.                             }) }}
  19.                         </div>
  20.                         <div class="grow">
  21.                             <span class="block mb-2 text-xl font-bold md:leading-5 md:text-lg ">
  22.                                 {{ pimcore_input('title', { placeholder: 'Titel' }) }}
  23.                             </span>
  24.                             <span class="text-base">
  25.                                 {{ pimcore_input('subtitle', { placeholder: 'Subtitel' }) }}
  26.                             </span>
  27.                         </div>
  28.                         <div class="flex flex-col items-center lg:flex-row justify-top d">
  29.                             {{ pimcore_link('main-link', { class: 'button button__primary' }) }}
  30.                             {{ pimcore_link('secondary-link', {
  31.                                 class: 'button button__secondary button__secondary--white group ',
  32.                                 textSuffix: '<span class="flex items-center justify-center w-6 h-6 ml-3 transition-all bg-white rounded-full shadow-md text-blue group-hover:bg-blue group-hover:text-white"><svg class="h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="currentColor" d="m6.406 15.656 6.963-6.731c.249-.24.389-.575.389-.925 0-.35-.14-.685-.389-.925L6.406.343A1.206 1.206 0 0 0 4.657.41l-.09.113a1.297 1.297 0 0 0 .154 1.67L10.731 8l-6.008 5.806a1.295 1.295 0 0 0-.065 1.783c.463.52 1.248.55 1.748.066Z"/></svg></span>'
  33.                             }) }}
  34.                         </div>
  35.                     </div>
  36.                 </div>
  37.             </section>
  38.         {% elseif style == 'small' %}
  39.             {{ pimcore_inc(document.getProperty('contactCardSnippet')) }}
  40.         {% elseif style == 'full-width-thin' %}
  41.             {% set showAsUrgent = pimcore_checkbox('showAsUrgent').data %}
  42.             <!-- Quick Contact -->
  43.             <section class="text-base leading-tight text-white bg-green">
  44.                 <div class="container flex items-center mx-auto {{ editmode ? 'flex-row' : 'gap-2 justify-between' }}">
  45.                     <span class="inline-flex items-center shrink-0">
  46.                         {{ pimcore_image('image', {
  47.                             thumbnail: 'text-and-link-icon',
  48.                             width: 32,
  49.                             height: 32,
  50.                             imgAttributes: {class: 'rounded-full w-8 h-8'},
  51.                             pictureAttributes: {class: 'hidden sm:inline-block mr-3 my-2 flex-auto shrink-0'},
  52.                         }) }}
  53.                         <div class="flex flex-row items-center gap-1 my-4">
  54.                             <strong>{{ pimcore_input('title', { placeholder: 'Titel' }) }}</strong>
  55.                             <span class="{{ editmode ? '' : 'hidden lg:inline' }}">{{ pimcore_input('subtitle', { placeholder: 'Subtitel' }) }}</span>
  56.                         </div>
  57.                     </span>
  59.                     {% if showAsUrgent is defined and pimcore_checkbox('showAsUrgent').data %}
  60.                         {% set textSuffix = '<span class="flex items-center justify-center w-6 h-6 ml-3 transition-all bg-white rounded-full shadow-md text-blue group-hover:bg-blue group-hover:text-white"><svg  class="h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="m13.47 9.12-2.8-.7a.703.703 0 0 0-.752.292L8.126 11.4A11.959 11.959 0 0 1 2.6 5.874l2.688-1.792a.7.7 0 0 0 .291-.752l-.7-2.8A.7.7 0 0 0 4.2 0H.7a.7.7 0 0 0-.7.7C.01 8.042 5.958 13.99 13.3 14a.7.7 0 0 0 .7-.7V9.8a.7.7 0 0 0-.53-.68Z"/></svg></span>' %}
  61.                     {% else %}
  62.                         {% set textSuffix = '<span class="flex items-center justify-center w-6 h-6 ml-3 transition-all bg-white rounded-full shadow-md text-blue group-hover:bg-blue group-hover:text-white"><svg class="w-2.5 h-2.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="currentColor" d="m6.406 15.656 6.963-6.731c.249-.24.389-.575.389-.925 0-.35-.14-.685-.389-.925L6.406.343A1.206 1.206 0 0 0 4.657.41l-.09.113a1.297 1.297 0 0 0 .154 1.67L10.731 8l-6.008 5.806a1.295 1.295 0 0 0-.065 1.783c.463.52 1.248.55 1.748.066Z"/></svg></span>' %}
  63.                     {% endif %}
  65.                     {{ pimcore_link('secondary-link', {
  66.                         class: 'button button__secondary button__secondary--white !w-auto !px-0 !justify-end group ',
  67.                         textSuffix: textSuffix,
  68.                     }) }}
  69.                 </div>
  70.             </section>
  72.             {% if editmode %}
  73.                 <label>
  74.                     {{ pimcore_checkbox('showAsUrgent', { reload: true }) }}
  75.                     <span>Show telephone icon after link.</span>
  76.                 </label>
  77.             {% endif %}
  79.         {% elseif style == 'full-width-thick' %}
  80.             <!-- Sticky CTA -->
  81.             <section class="container flex flex-col items-center justify-between py-4 lg:flex-row">
  82.                 <h2 class="mb-4 text-3xl leading-8 grow lg:mb-0">
  83.                     <span class="text-blue">{{ pimcore_input('title', { placeholder: 'Titel' }) }}</span> {{ pimcore_input('subtitle', { placeholder: 'Subtitel' }) }}
  84.                 </h2>
  85.                 <div class="flex flex-col lg:flex-row">
  86.                     {{ pimcore_link('main-link', { class: 'button button__primary' }) }}
  88.                     {{ pimcore_link('secondary-link', {
  89.                         class: 'button button__secondary group',
  90.                         textSuffix: '<span class="flex items-center justify-center w-6 h-6 ml-3 transition-all bg-white rounded-full shadow-md text-blue group-hover:bg-blue group-hover:text-white"><svg class="h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="currentColor" d="m6.406 15.656 6.963-6.731c.249-.24.389-.575.389-.925 0-.35-.14-.685-.389-.925L6.406.343A1.206 1.206 0 0 0 4.657.41l-.09.113a1.297 1.297 0 0 0 .154 1.67L10.731 8l-6.008 5.806a1.295 1.295 0 0 0-.065 1.783c.463.52 1.248.55 1.748.066Z"/></svg></span>'
  91.                     }) }}
  92.                 </div>
  93.             </section>
  94.         {% endif %}
  95.     {% endblock %}
  97. {% endembed %}