templates/component/care_cards.html.twig line 1

Open in your IDE?
  1. {#
  2.     component: care cards
  4.     heading: [{
  5.         title {string}: Titre de la gamme de soin
  6.         titleAnnex {string}: Titre annexe de la gamme de soin (au dessus du titre)
  7.         image {image}: Image de la gamme de soin
  8.             size: {
  9.                 width: "1320",
  10.                 height: "480"
  11.             }
  12.         text {string}: Texte de présentation de la gamme de soin
  13.     }]
  14.     items: [{
  15.         image {image}: Image de l'offre
  16.             size: {
  17.                 width: "340",
  18.                 height: "200"
  19.             }
  20.         title {string}: Nom de l'offre
  21.         duration {string}: Nom de l'offre
  22.         text {string}: Texte de l'offre
  23.         categoryTitle {string}: Catégorie de l'offre
  24.         price {string}: Prix final de l'offre
  25.         links: [{
  26.             icon {string}: Nom de l'icône du lien
  27.             text {string}: Texte du lien
  28.             to {string}: Lien
  29.         }]
  30.     }]
  31. #}
  33. {% set props = {
  34.     heading: null,
  35.     items: []
  36. }|merge(props|default({}))  %}
  38. <section data-component="care-cards" class="CareCards-component">
  40.     <div class="l-container">
  42.         <div
  43.             class="l-row u-center">
  45.             {# Main #}
  46.             <div class="l-column CareCards-main">
  48.                 <div
  49.                     class="CareCards-header  {% if props.heading.image is defined %} has-Img {% endif %} ">
  51.                     {# Heading #}
  52.                     {% include "component/heading.html.twig" with {
  53.                         props: props.heading
  54.                     } %}
  56.                     {% if props.heading.image is defined %}
  57.                         <div class="CareCards-header-image {% if props.heading.title is defined %} has-Subtitle {% endif %} ">
  59.                             {% include "component/image.html.twig" with {
  60.                                 props: props.heading.image
  61.                             } %}
  62.                             {# {% include "component/picture.html.twig" with {
  63.                                 props: props.heading.image|merge({
  64.                                     srcWebp: (props.heading.image.src) ? asset(props.heading.image.src | imagine_filter('convert_img_to_webp')) : ''
  65.                                 })
  66.                             } %} #}
  68.                         </div>
  69.                     {% endif %}
  71.                 </div>
  74.                 <div
  75.                     class="l-row CareCards-cards slides-container {% if props.heading.image is defined %} has-Bg-Img {% endif %}">
  77.                     {# Background pattern image #}
  78.                     <div class="CareCards-backgroundImagePattern {% if props.heading.image is defined %} has-Img  {% endif %} {% if props.items|length > 3 %} long-container {% endif %} ">
  80.                         {# {% include "component/image.html.twig" with {
  81.                             props: {
  82.                                 src: asset('build/images/pattern5.png')
  83.                             }
  84.                         } %} #}
  85.                         {% include "component/picture.html.twig" with {
  86.                             props: {
  87.                                 src: asset('build/images/pattern5.png')
  88.                             }|merge({
  89.                                 srcWebp: asset(asset('build/images/pattern5.png') | imagine_filter('convert_img_to_webp'))
  90.                             })
  91.                         } %}
  93.                     </div>
  95.                     <div class="CareCards-cardsContainer     {% if props.items|length < 2  %} small-cards{% endif %}" ref="container">
  97.                         {% for item in props.items %}
  99.                             {# Care card #}
  100.                             <div class="l-column CareCards-card slide load" ref="items" data-index="0">
  102.                                 {% include "component/care_card.html.twig" with {
  103.                                     props: item
  104.                                 } %}
  106.                             </div>
  108.                         {% endfor %}
  110.                     </div>
  112.                 </div>
  114.                 {% if props.heading.image is defined %}
  115.                     <div class="CareCards-Slider-nav">
  117.                         <div
  118.                             class="CareCards-Slider-navButtons">
  120.                             {# Previous button #}
  121.                             <button ref="previousButton" class="OfferSlider-navButton OfferSlider-navPreviousButton NavPreviousButton">
  122.                                 {% include "component/svg.html.twig" with {
  123.                                     props: {
  124.                                         name: 'arrow-left'
  125.                                     }
  126.                                 } %}
  127.                                 {% include "component/svg.html.twig" with {
  128.                                     props: {
  129.                                         name: 'arrow-left'
  130.                                     }
  131.                                 } %}
  132.                             </button>
  134.                             <div class="CareCards-navBar">
  135.                                 <span class="CareCards-navBarProgress" ref="progressBar"></span>
  136.                             </div>
  138.                             {# Next button #}
  139.                             <button ref="nextButton" class="OfferSlider-navButton OfferSlider-navNextButton NavNextButton">
  140.                                 {% include "component/svg.html.twig" with {
  141.                                     props: {
  142.                                         name: 'arrow-right'
  143.                                     }
  144.                                 } %}
  145.                                 {% include "component/svg.html.twig" with {
  146.                                     props: {
  147.                                         name: 'arrow-right'
  148.                                     }
  149.                                 } %}
  150.                             </button>
  152.                         </div>
  154.                     </div>
  155.                 {% endif %}
  157.             </div>
  159.         </div>
  161.     </div>
  163. </section>