templates/blocks/framework_references.html.twig line 1

Open in your IDE?
  1. {#
  2.   {
  3.     "key": "framework_references",
  4.     "label": "Afbeeldingen (raster)",
  5.     "description": "Blokken met afbeeldingen met tekst op hover-functie",
  6.     "allowMove": true,
  7.     "category": "02. Content",
  8.     "blocks": [
  9.       {
  10.         "key": "block-0",
  11.         "size": 6,
  12.         "required": "media",
  13.         "multiple": true,
  14.         "minimum": 2,
  15.         "fields": [
  16.             {
  17.                 "key": "title",
  18.                 "type": "textarea",
  19.                 "label": "Tekst"
  20.             }
  21.         ]
  22.       }
  23.     ]
  24.   }
  25. #}
  27. <section id="{{wrapper.cssId is defined ? wrapper.cssId : ''}}" class="references {{wrapper.cssClass is defined ? wrapper.cssClass : ''}}" style="{% if wrapper.bgColor %}background-color: {{wrapper.bgColor}};{% endif %}">
  28.   <div class="container">
  29.     {% if wrapper.label or wrapper.intro is not empty %}
  30.       <div class="introblock">
  31.         {% if wrapper.label is not empty %}
  32.           <div class="introtitle">
  33.             {{wrapper.label|raw}}
  34.           </div>
  35.         {% endif %}
  36.         {% if wrapper.intro is not empty %}
  37.           <div class="introtext">
  38.             {{wrapper.intro|raw}}
  39.           </div>
  40.         {% endif %}
  41.       </div>
  42.     {% endif %}
  44.     <div class="row blocks">
  45.       {% for b in wrapper.blocks %}
  46.         <div class="col-sm-12 col-lg-{{b.width}} {{b.config.class}}" id="{{b.config.id}}">
  47.           {% if b.config.link is defined and b.config.link is not empty %}
  48.             <a href="{{b.config.link}}">
  49.             {% else %}
  50.               <a href="#">
  51.               {% endif %}
  52.               <div class="content">
  53.                 <div class="corner-shape">
  54.                   <svg preserveaspectratio="none" class="corner-shape-topleft" x="0px" y="0px" viewbox="0 0 21.4 19.5" style="enable-background:new 0 0 21.4 19.5;" xml:space="preserve">
  55.                     <path
  56.                       d="M20,0.3L18.9,0c-0.4-0.1-0.9,0-1.3,0.3S17,1,17,1.4l-0.1,1.2c0,0.1,0,0.2,0,0.3s0,0.2,0,0.3
  57.                       c0,0.2-0.1,0.5-0.1,0.7c-0.1,0.5-0.2,0.9-0.3,1.4c-0.3,1-0.6,1.9-1.1,2.7c-0.9,1.7-2.1,3.1-3.6,4.1c-1.4,1-3.2,1.7-5.2,2
  58.                       c-1.5,0.2-3.2,0.3-4.9,0.2c-0.4,0-0.8,0.1-1.1,0.4C0.2,15.1,0,15.5,0,15.9v1.9v0.1c0,0.1,0,0.3,0,0.4v1.2h5.8l0,0
  59.                       c0.5-0.1,1.1-0.1,1.6-0.2c3.8-0.7,6.3-2.2,7.2-2.9c2.1-1.5,3.9-3.5,5.2-6c0.6-1.1,1.1-2.3,1.4-3.6c0.1-0.3,0.2-0.6,0.2-1l0,0V0.7
  60.                       C21,0.6,20.5,0.5,20,0.3z"/>
  61.                   </svg>
  62.                   <svg preserveaspectratio="none" class="corner-shape-top" viewbox="0 0 290.3 22.5" style="enable-background:new 0 0 290.3 22.5;" xml:space="preserve">
  63.                     <path
  64.                       d="M290.3,1.8c-0.2-0.8-1-1.3-1.8-1.1c-24,5.7-48.2,10.2-72.1,13.1c-24.2,3-48.8,4.6-73,4.8
  65.                         c-24.2-0.3-48.8-2.1-73-5.3C47.1,10.2,23.4,5.8,0,0v5.1c23.2,5.5,46.7,9.7,69.9,12.6c24.4,3,49.1,4.7,73.5,4.8
  66.                         c24.4-0.3,49.1-2.1,73.4-5.3c24-3.1,48.3-7.8,72.3-13.7C290,3.4,290.5,2.6,290.3,1.8z"/>
  67.                   </svg>
  68.                   <svg preserveaspectratio="none" class="corner-shape-left" viewbox="0 0 5.83 168.4">
  69.                     <path d="M0,151.7v15.2a1.54,1.54,0,0,0,1.5,1.5h0A1.54,1.54,0,0,0,3,166.9V151.8c.1-23,.8-46.3,1.4-69C5.2,55.5,6,27.5,5.8,0H0Z"/>
  70.                   </svg>
  71.                 </div>
  73.                 <div class="text">
  74.                   {{b.config.title|raw}}
  75.                 </div>
  76.               </div>
  78.               <div class="img-wrapper">
  79.                 <div class="ribbon ribbon-top-left"><span></span></div>
  80.                 <div class="img" {% if b.media %} style="background: url(/{{b.media.getWebPath}}) no-repeat center; background-size: cover" {% endif %}></div>
  81.               </div>
  82.             </a>
  83.           </div>
  84.         {% endfor %}
  85.       </div>
  86.     </div>
  87.   </section>