templates/articles-blocks/triple-frame-block.html.twig line 1

Open in your IDE?
  1. <div class="{% if content.header_img is defined and content.header_img is not empty %}main-title{% else %}small-main-title{% endif %} mt-40px mb-40pxaic frame-overflow mb-2em">
  2.     <div class="jcc dflex frame-container-print">
  3.         {% if data.frame_triple_img is defined and data.frame_triple_img is not empty %}
  4.             <img loading="lazy" src="{{ data.frame_triple_img.formats['1000x.webp'] }}" srcset="{{ data.frame_triple_img.formats['300x.webp'] }} 300w, {{ data.frame_triple_img.formats['600x.webp'] }} 600w, {{ data.frame_triple_img.formats['1000x.webp'] }} 1000w" sizes="1000px" alt="{{ data.frame_triple_img | copyright_or_description_or_title }}" width="{{ data.frame_triple_img.fileVersion.properties.width }}" height="{{ data.frame_triple_img.fileVersion.properties.height }}" style="z-index: -1;">
  5.         {% endif %}
  6.         <div class="frame-wrap-container dflex jcse aic mt-2p5em mb-3p5em">
  7.             <div class="first-frame p-244024  ml-2per fdc aic">
  8.                 <h2 class="frame-title-territoire-custom corange wd100 lh28 fs20 fw500 dflex tac">{{ data.first_frame_title }}</h2>
  9.                 <div class="text-flex fw400 fs16 lh24">
  10.                     {% if data.first_frame_article_title is defined and data.first_frame_article_title is not empty %}
  11.                         <div class="mb-1em tac lh28 fs20 fw500">{{ data.first_frame_article_title }}</div>
  12.                     {% endif %}
  13.                     {% if data.additional_content is defined and data.additional_content is not empty %}
  14.                         {% for row in data.additional_content %}
  15.                             {% if row.frame_choice == "left" %}
  16.                                 <div class="dflex">
  17.                                     {% if row.frame_icon is defined and row.frame_icon is not empty %}
  18.                                         <svg class="{{ row.frame_icon[0] }} my_svg svg_infos" aria-hidden="true" focusable="false" style="height: 30px; width: 28px; left: 6px; top: 6px; border-radius: 0px;">
  19.                                             <use xlink:href='#{{ row.frame_icon[0] }}'>
  20.                                         </svg>
  21.                                     {% endif %}
  22.                                     {% if row.icon_text is defined and row.icon_text is not empty %}
  23.                                         {{ row.icon_text | raw }}
  24.                                     {% endif %}
  25.                                 </div>
  26.                             {% endif %}
  27.                         {% endfor %}
  28.                     {% endif %}
  29.                     {% if data.first_frame_text_body is defined and data.first_frame_text_body is not empty %}
  30.                         <div class="framed">{{ data.first_frame_text_body | raw }}</div>
  31.                     {% endif %}
  32.                 </div>
  33.             </div>
  34.             <div class="middle-frame p-244024  fdc aic">
  35.                 <h2 class="frame-title-territoire-custom corange wd100 lh28 fs20 fw500 dflex tac">{{ data.second_frame_title }}</h2>
  36.                 <div class="text-flex fw400 fs16 lh24">
  37.                     {% if data.second_frame_article_title is defined and data.second_frame_article_title is not empty %}
  38.                         <div class="mb-1em tac lh28 fs20 fw500">{{ data.second_frame_article_title }}</div>
  39.                     {% endif %}
  41.                     {% if data.additional_content is defined and data.additional_content is not empty %}
  42.                         {% for row in data.additional_content %}
  43.                             {% if row.frame_choice == "middle" %}
  44.                                 <div class="dflex">
  45.                                     {% if row.frame_icon is defined and row.frame_icon is not empty %}
  46.                                         <svg class="{{ row.frame_icon[0] }} my_svg svg_infos" aria-hidden="true" focusable="false" style="height: 30px; width: 28px; left: 6px; top: 6px; border-radius: 0px;">
  47.                                             <use xlink:href='#{{ row.frame_icon[0] }}'>
  48.                                         </svg>
  49.                                     {% endif %}
  50.                                     {% if row.icon_text is defined and row.icon_text is not empty %}
  51.                                         {{ row.icon_text | raw }}
  52.                                     {% endif %}
  53.                                 </div>
  54.                             {% endif %}
  55.                         {% endfor %}
  56.                     {% endif %}
  57.                     {% if data.second_frame_text_body is defined and data.second_frame_text_body is not empty %}
  58.                         <div class="framed">{{ data.second_frame_text_body | raw }}</div>
  59.                     {% endif %}
  61.                 </div>
  62.             </div>
  63.             <div class="last-frame p-244024  mr-2per fdc aic">
  64.                 <h2 class="frame-title-territoire-custom corange wd100 lh28 fs20 fw500 dflex tac">{{ data.third_frame_title }}</h2>
  65.                 <div class="text-flex fw400 fs16 lh24">
  66.                     {% if data.third_frame_article_title is defined and data.third_frame_article_title is not empty %}
  67.                         <div class="mb-1em tac lh28 fs20 fw500">{{ data.third_frame_article_title }}</div>
  68.                     {% endif %}
  70.                     {% if data.additional_content is defined and data.additional_content is not empty %}
  71.                         {% for row in data.additional_content %}
  72.                             {% if row.frame_choice == "right" %}
  73.                                 <div class="dflex">
  74.                                     {% if row.frame_icon is defined and row.frame_icon is not empty %}
  75.                                         <svg class="{{ row.frame_icon[0] }} my_svg svg_infos" aria-hidden="true" focusable="false" style="height: 30px; width: 28px; left: 6px; top: 6px; border-radius: 0px;">
  76.                                             <use xlink:href='#{{ row.frame_icon[0] }}'>
  77.                                         </svg>
  78.                                     {% endif %}
  79.                                     {% if row.icon_text is defined and row.icon_text is not empty %}
  80.                                         {{ row.icon_text | raw }}
  81.                                     {% endif %}
  82.                                 </div>
  83.                             {% endif %}
  84.                         {% endfor %}
  85.                     {% endif %}
  86.                     {% if data.third_frame_text_body is defined and data.third_frame_text_body is not empty %}
  87.                         <div class="framed">{{ data.third_frame_text_body | raw }}</div>
  88.                     {% endif %}
  89.                 </div>
  90.             </div>
  91.         </div>
  92.     </div>
  93.     <div class="background-color-orange"></div>
  94. </div>