Custom Templates

If you have installed in your site the module Selectra Cuatom Templates , you can start using the custom templates. This module allows you to create custom templates for your content types. You have to enter in your-site-name/admin/structure/selectra-custom-templates to create your templates.

You can add the provider upi If you add provider upi, you will see the provider review. You only can add the UPI if you have enabled selectra_reviews_admin or selectra_reviews_client modules. To know it, go to /admin/content/customer_reviews and you will see each provider UPI.

Hero--CTA-3

To have hero--cta-3 in your custom template, you can use this code:

HTML

{{ attach_library('agrippa/hero--cta-3') }}
{{ attach_library('agrippa/star-rating') }}
{{ attach_library('agrippa/tooltip') }}

<section class="hero hero--cta-3">
  <div class="container">
    <div class="row">

      <div class="hero-cta-3__info col-xs-12 col-md-6">
        <p class="hero-cta-3__pretitle"> Pretitle. You can change the tag </p>
        <h3 class="hero-cta-3__title"> Title. You can change the tag </h3>
        <p class="hero-cta-3__description"> Description. </p>

        <div class="hero-cta-3__buttons">
          <a href="#" class="btn btn--md btn--pill btn--secondary">
            Button 1
            <svg class="icon icon--right icon--16" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-arrow-curved-right"></use>
            </svg>
          </a>

          <a href="#" class="btn btn--md btn--pill btn--secondary btn--outline">
            Button 2
            <svg class="icon icon--right icon--16" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-arrow-curved-right"></use>
            </svg>
          </a>

        </div>
      </div>

      <div class="hero-cta-3__cards hero-cta-3__cards--numbered col-xs-12 col-md-6">

        <div class="hero-cta-3__card">

          <div class="hero-cta-3__card--left">
            <div class="hero-cta-3__card-logo">
              <img src="https://ohm-energie.com/wp-content/uploads/2022/05/logo-ohm-Q.png" alt="Logo Card 1">
            </div>

            <p class="hero-cta-3__card-title"> Title Card 1 </p>

            {% set providerRating1 = agrippa_get_ratings(upi) %}
            {% set customer_reviews_alias1 = agrippa_customer_reviews_alias(upi, 'upi') %}

            <div class="hero-cta-3__card-rating">
              <div class="star-rating star-rating--md" title="{{ providerRating1.ratings.rating_global|round }}/5" data-toggle="tooltip" tabindex="0">
                <div class="star-rating__rating" style="width: {{ (providerRating1.ratings.rating_global|round)*20 }}%" aria-hidden="true"></div>
              </div>
              {% if customer_reviews_alias1 is not empty %}
                <a href="{{ customer_reviews_alias1 }}" class="star-rating__rating-reviews" target="_blank">
                  {{ providerRating1.ratings.n_reviews }} votes
                </a>
              {% else %}
                <span class="star-rating__rating-reviews"> votes </span>
              {% endif %}
            </div>

          </div>

          <div class="hero-cta-3__card--right">
            <span class="hero-cta-3__card-label"> Card 1 label </span>

            <p class="hero-cta-3__card-price">
              99 €
              <span class="hero-cta-3__card-prive-value"> /an </span>
            </p>

            <a href="#" class="btn btn--md btn--pill btn--secondary">
              Button 1
              <svg class="icon icon--right icon--16" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-arrow-forward"></use>
              </svg>
            </a>

          </div>
        </div>

        <div class="hero-cta-3__card">

          <div class="hero-cta-3__card--left">
            <div class="hero-cta-3__card-logo">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Vattenfall_logo2.svg/2560px-Vattenfall_logo2.svg.png" alt="Logo Card 2">
            </div>

            <p class="hero-cta-3__card-title"> Title Card 2 </p>

            {% set providerRating2 = agrippa_get_ratings(upi) %}
            {% set customer_reviews_alias2 = agrippa_customer_reviews_alias(upi, 'upi') %}

            <div class="hero-cta-3__card-rating">
              <div class="star-rating star-rating--md" title="{{ providerRating2.ratings.rating_global|round }}/5" data-toggle="tooltip" tabindex="0">
                <div class="star-rating__rating" style="width: {{ (providerRating2.ratings.rating_global|round)*20 }}%" aria-hidden="true"></div>
              </div>
              {% if customer_reviews_alias2 is not empty %}
                <a href="{{ customer_reviews_alias2 }}" class="star-rating__rating-reviews" target="_blank">
                  {{ providerRating2.ratings.n_reviews }} votes
                </a>
              {% else %}
                <span class="star-rating__rating-reviews"> {{ providerRating2.ratings.n_reviews }} votes </span>
              {% endif %}
            </div>

          </div>

          <div class="hero-cta-3__card--right">
            <span class="hero-cta-3__card-label"> Card 2 Label </span>

            <p class="hero-cta-3__card-price">
              100 €
              <span class="hero-cta-3__card-prive-value"> /month </span>
            </p>

            <a href="#" class="btn btn--md btn--pill btn--secondary">
              Button 2
              <svg class="icon icon--right icon--16" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-arrow-forward"></use>
              </svg>
            </a>

          </div>
        </div>

        <div class="hero-cta-3__card">

          <div class="hero-cta-3__card--left">
            <div class="hero-cta-3__card-logo">
              <img src="https://logodownload.org/wp-content/uploads/2023/06/totalenergies-logo-3.png" alt="Logo Card 3">
            </div>

            <p class="hero-cta-3__card-title"> Card title 3 </p>

            {% set providerRating3 = agrippa_get_ratings(upi) %}
            {% set customer_reviews_alias3 = agrippa_customer_reviews_alias(upi, 'upi') %}

            <div class="hero-cta-3__card-rating">
              <div class="star-rating star-rating--md" title="{{ providerRating3.ratings.rating_global|round }}/5" data-toggle="tooltip" tabindex="0">
                <div class="star-rating__rating" style="width: {{ (providerRating3.ratings.rating_global|round)*20 }}%" aria-hidden="true"></div>
              </div>
              {% if customer_reviews_alias3 is not empty %}
                <a href="{{ customer_reviews_alias3 }}" class="star-rating__rating-reviews" target="_blank">
                  {{ providerRating3.ratings.n_reviews }} votes
                </a>
              {% else %}
                <span class="star-rating__rating-reviews"> {{ providerRating3.ratings.n_reviews }} votes </span>
              {% endif %}
            </div>

          </div>

          <div class="hero-cta-3__card--right">
            <span class="hero-cta-3__card-label"> Card 3 Label </span>

            <p class="hero-cta-3__card-price">
              50€
              <span class="hero-cta-3__card-prive-value"> /month </span>
            </p>

            <a href="#" class="btn btn--md btn--pill btn--secondary">
              Button 3
              <svg class="icon icon--right icon--16" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-arrow-forward"></use>
              </svg>
            </a>

          </div>
        </div>

      </div>
    </div>

    <div class="row">
      <div class="text-corner__wrapper right">
        <div class="text-corner u-display--flex" data-toggle="tooltip" tabindex="0" title="tooltip text">
          <span>Some text if you want</span>
          <a aria-label="Help" class="btn-help btn-help--sm">
            <svg aria-hidden="true" class="icon btn-help__icon">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-circle-info-outlined"></use>
            </svg>
            <svg aria-hidden="true" class="icon btn-help__icon">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-circle-info-filled"></use>
            </svg>
          </a>
        </div>
      </div>
    </div>

  </div>
</section>

To have banner--provider-cta in your custom template, you can use this code:

HTML

{{ attach_library('agrippa/banner') }}

<div class="container">
  <section class="banner--provider-cta row">
    <div class="col-xs-12 col-md-4 col-lg-4 u-display--none u-display--md-flex banner__img-wrapper">
      <img class="banner__img u-display--none u-display--md-block" src="/img/banner/illu-binoculars.svg" alt="Banner monetization illustration">
    </div>
    <div class="col-xs-12 col-md-5 col-offset-md-2 col-offset-lg-0 col-lg-4">
      <p class="banner__title">Je fais une simulation avec
        <strong>Total Direct Energie</strong>
      </p>
    </div>
    <div class="col-xs-12 col-md-5 col-lg-4">
      <div class="banner__cta"><img class="banner__logo" src="/img/selectra-yaml/providers-logo/we-compare-logo-direct-energie.png" alt="Direct Energie">
        <a class="btn btn--md btn--pill btn--primary btn--block u-anim--shake" href="tel:+33973727300">
          <svg class="icon icon--left" aria-hidden="true">
            <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-smartphone"></use>
          </svg>09 73 72 73 00
        </a>
        <a class="btn btn--md btn--outline btn--pill btn--secondary btn--block u-display--xs-none u-display--lg-block" href="#banner--provider-cta" title="Nous vous rappelons gratuitement">
          <svg class="icon icon--left" aria-hidden="true">
            <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-arrow-curved-right"></use>
          </svg>
          Rappel gratuit
        </a>
        <div class="banner__modal u-display--lg-none u-display--xs-block">
          <a href="#" data-toggle="modal" data-target="callback-modal" data-fetch-url="partials/callback-modal-masmovil.html" data-modal-size="sm">
            <strong>Rappel gratuit</strong>
          </a>
          <a class="btn-help btn-help--secondary btn-help--sm btn-help--right" data-toggle="tooltip" role="button" aria-label="ariaLabel" tabindex="0" title="Tooltip">
            <svg class="icon btn-help__icon" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-circle-info-outlined"></use>
            </svg>
            <svg class="icon btn-help__icon" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-circle-info-filled"></use>
            </svg>
          </a>
        </div>
        <div class="banner__tooltip">
          Annonce
          <a class="btn-help btn-help--neutral btn-help--sm btn-help--right" data-toggle="tooltip" role="button" aria-label="ariaLabel" tabindex="0" title="Tooltip">
            <svg class="icon btn-help__icon" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-circle-info-outlined"></use>
            </svg>
            <svg class="icon btn-help__icon" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-circle-info-filled"></use>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </section>
</div>

You can add this component with callcenter closed also.

For this, you can replicate the code adding the classcall-block--closed call-block--closed-flex or call-block--open with data-callcenter="callcenter-name" in <div class="banner--provider-cta row">

If you want to change only some elements, you can copy and edit if you want this code:

HTML

{{ attach_library('agrippa/banner') }}

<div class="container">
  <section class="banner--provider-cta row">
    <div class="col-xs-12 col-md-4 col-lg-4 u-display--none u-display--md-flex banner__img-wrapper">
      <img class="banner__img u-display--none u-display--md-block call-block--open" data-callcenter="france-energie" src="/img/banner/illu-binoculars.svg" alt="Open">
      <img class="banner__img u-display--none u-display--md-block call-block--closed" data-callcenter="france-energie" src="/img/banner/illu-binoculars.svg" alt="Closed">
    </div>
    <div class="col-xs-12 col-md-5 col-offset-md-2 col-offset-lg-0 col-lg-4">
      <p class="banner__title call-block--open" data-callcenter="france-energie">
        Open
      </p>
      <p class="banner__title call-block--closed call-block--closed-flex" data-callcenter="france-energie">
        Closed
      </p>
    </div>
    <div class="col-xs-12 col-md-5 col-lg-4">
      <div class="banner__cta">
        <img class="banner__logo call-block--open" data-callcenter="france-energie" src="/img/selectra-yaml/providers-logo/we-compare-logo-direct-energie.png" alt="Direct Energie" />
        <img class="banner__logo call-block--closed" data-callcenter="france-energie" src="/img/selectra-yaml/providers-logo/we-compare-logo-direct-energie.png" alt="Direct Energie" />
        <a class="btn btn--md btn--pill btn--primary btn--block u-anim--shake call-block--open" data-callcenter="france-energie" href="tel:+33973727300">
          <svg class="icon icon--left" aria-hidden="true">
            <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-smartphone"></use>
          </svg>09 73 72 73 00
        </a>
        <a class="btn btn--md btn--pill btn--primary btn--block u-anim--shake call-block--closed" data-callcenter="france-energie" href="tel:+33973727300">
          <svg class="icon icon--left" aria-hidden="true">
            <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-smartphone"></use>
          </svg>09 73 72 73 00
        </a>
        <a class="btn btn--md btn--outline btn--pill btn--secondary btn--block u-display--xs-none u-display--lg-block call-block--open" data-callcenter="france-energie" href="#banner--provider-cta" title="Nous vous rappelons gratuitement">
          <svg class="icon icon--left" aria-hidden="true">
            <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-arrow-curved-right"></use>
          </svg>
          Rappel gratuit
        </a>
        <a class="btn btn--md btn--outline btn--pill btn--secondary btn--block u-display--xs-none u-display--lg-block call-block--closed" data-callcenter="france-energie" href="#banner--provider-cta" title="Nous vous rappelons gratuitement">
          <svg class="icon icon--left" aria-hidden="true">
            <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-arrow-curved-right"></use>
          </svg>
          Rappel gratuit
        </a>
        <div class="banner__modal u-display--lg-none u-display--xs-block">
          <a href="#" data-toggle="modal" data-target="callback-modal" data-fetch-url="partials/callback-modal-masmovil.html" data-modal-size="sm">
            <strong>Rappel gratuit</strong>
          </a>
          <a class="btn-help btn-help--secondary btn-help--sm btn-help--right" data-toggle="tooltip" role="button" aria-label="ariaLabel" tabindex="0" title="Tooltip">
            <svg class="icon btn-help__icon" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-circle-info-outlined"></use>
            </svg>
            <svg class="icon btn-help__icon" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-circle-info-filled"></use>
            </svg>
          </a>
        </div>
        <div class="banner__tooltip">
          Annonce
          <a class="btn-help btn-help--neutral btn-help--sm btn-help--right" data-toggle="tooltip" role="button" aria-label="ariaLabel" tabindex="0" title="Tooltip">
            <svg class="icon btn-help__icon" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-circle-info-outlined"></use>
            </svg>
            <svg class="icon btn-help__icon" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-circle-info-filled"></use>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </section>
</div>

To have banner--score in your custom template, you can use this code:

Code for banner--score with cards-separated

HTML

{{ attach_library('agrippa/banner--score') }}

<div class="banner-score container">
  <div class="banner-score__info cards-separated">
    <h3 class="banner-score__title"> Quel est le Selectra Score de votre offre d’électricité ou de gaz ? </h3>
    <p class="banner-score__subtitle"> A B C D ou E ? Vérifiez la note obtenue par chaque offre du marché  </p>
    <img src="/themes/custom/agrippa/img/score/score-cards.svg" alt="img alternative text for mobile" />
    <a class="btn btn--md btn--white" href="#your-link" target="_blank"> Découvrir la note de votre offre </a>
  </div>

  <div class="banner-score__img cards-separated">
    <img src="/themes/custom/agrippa/img/score/score-cards.svg" alt="img alternative text for desktop">
  </div>
</div>

Code for banner--score with cards-unified

HTML

{{ attach_library('agrippa/banner--score') }}

<div class="banner-score container">
  <div class="banner-score__info cards-unified">
    <h3 class="banner-score__title"> Quel est le Selectra Score de votre offre d’électricité ou de gaz ? </h3>
    <p class="banner-score__subtitle"> A B C D ou E ? Vérifiez la note obtenue par chaque offre du marché  </p>
    <img src="/themes/custom/agrippa/img/score/score-logo-general.svg" alt="img alternative text for mobile" />
    <a class="btn btn--md btn--white" href="#your-link" target="_blank"> Découvrir la note de votre offre </a>
  </div>

  <div class="banner-score__img cards-unified">
    <img src="/themes/custom/agrippa/img/score/score-logo-general.svg" alt="img alternative text for desktop">
  </div>
</div>

If you want your banner be full width you have to add the class bg-secondary-wide:

HTML

{{ attach_library('agrippa/banner--score') }}

<div class="banner-score container  bg-secondary-wide ">
  <div class="banner-score__info cards-unified">
    <h3 class="banner-score__title"> Quel est le Selectra Score de votre offre d’électricité ou de gaz ? </h3>
    <p class="banner-score__subtitle"> A B C D ou E ? Vérifiez la note obtenue par chaque offre du marché  </p>
    <img src="/themes/custom/agrippa/img/score/score-logo-general.svg" alt="img alternative text for mobile" />
    <a class="btn btn--md btn--white" href="#your-link" target="_blank"> Découvrir la note de votre offre </a>
  </div>

  <div class="banner-score__img cards-unified">
    <img src="/themes/custom/agrippa/img/score/score-logo-general.svg" alt="img alternative text for desktop">
  </div>
</div>

If your banner is in a page with an aside you have to add the class with-aside:

HTML

{{ attach_library('agrippa/banner--score') }}

<div class="banner-score container  with-aside ">
  <div class="banner-score__info cards-unified">
    <h3 class="banner-score__title"> Quel est le Selectra Score de votre offre d’électricité ou de gaz ? </h3>
    <p class="banner-score__subtitle"> A B C D ou E ? Vérifiez la note obtenue par chaque offre du marché  </p>
    <img src="/themes/custom/agrippa/img/score/score-logo-general.svg" alt="img alternative text for mobile" />
    <a class="btn btn--md btn--white" href="#your-link" target="_blank"> Découvrir la note de votre offre </a>
  </div>

  <div class="banner-score__img cards-unified">
    <img src="/themes/custom/agrippa/img/score/score-logo-general.svg" alt="img alternative text for desktop">
  </div>
</div>

If your banner is in a page with an aside and you wanto to have a full width banner, you con combine both classes:

HTML

{{ attach_library('agrippa/banner--score') }}

<div class="banner-score container  with-aside bg-secondary-wide ">
  <div class="banner-score__info cards-unified">
    <h3 class="banner-score__title"> Quel est le Selectra Score de votre offre d’électricité ou de gaz ? </h3>
    <p class="banner-score__subtitle"> A B C D ou E ? Vérifiez la note obtenue par chaque offre du marché  </p>
    <img src="/themes/custom/agrippa/img/score/score-logo-general.svg" alt="img alternative text for mobile" />
    <a class="btn btn--md btn--white" href="#your-link" target="_blank"> Découvrir la note de votre offre </a>
  </div>

  <div class="banner-score__img cards-unified">
    <img src="/themes/custom/agrippa/img/score/score-logo-general.svg" alt="img alternative text for desktop">
  </div>
</div>

Card--product

To have card--product in your custom template, you can use this code:

HTML

{{ attach_library('agrippa/card--product') }}
{{ attach_library('agrippa/list-card') }}

<section class="yaml-section cards cards--product container">

  <div class="container">
    <h2 class="section__title">Our best offers</h2>
    <p class="section__text">Add as many cards as you need!</p>
    <div class="row row--center list-card list-card--stretch">

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 list-card__item">
        <div class="card card--product">
          <div class="card__header-arrow header__with-cols header-arrow--secondary">
            <div class="header-arrow__col">
              <span>Da</span>
              <span class="header-arrow__old">34,95</span>
              <span>euros / m</span>
            </div>
            <div class="header-arrow__col">
              <span>Promozione</span>
              <span class="header-arrow__new">25,95</span>
              <span>euros / m</span>
            </div>
          </div>
          <div class="card__logo">
            <img src="/img/selectra-yaml/providers-logo/logo-engie.png" alt="Logo alt">
          </div>
          <p class="card__title">Fastweb casa</p>
          <ul class="card__characteristics">
            <li class="card__trait">Internet ilimitado</li>
            <li class="card__trait">Chiamate illimitate</li>
            <li class="card__trait">Nessun vincolo</li>
            <li class="card__trait">Attivazione gratuita</li>
          </ul>
          <a class="btn btn--md btn--block btn--secondary btn--outline" href="#" title="Attiva online" target="_blank">Attiva online </a>
        </div>
      </div>

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 list-card__item">
        <div class="card card--product">
          <div class="card__header-arrow header__with-cols header-arrow--danger">
            <div class="header-arrow__col">
              <span>Da</span>
              <span class="header-arrow__old">32,95</span>
              <span>euros / m</span>
            </div>
            <div class="header-arrow__col">
              <span>Promozione</span>
              <span class="header-arrow__new">27,90</span>
              <span>euros / m</span>
            </div>
          </div>
          <div class="card__logo">
            <img src="/img/selectra-yaml/providers-logo/logo-engie.png" alt="Logo alt">
          </div>
          <p class="card__title">Internet unlimited</p>
          <ul class="card__characteristics">
            <li class="card__trait">Internet ilimitado</li>
            <li class="card__trait">Chiamate illimitate</li>
            <li class="card__trait">Nessun vincolo</li>
            <li class="card__trait">Attivazione gratuita</li>
          </ul>
          <a class="btn btn--md btn--block btn--secondary btn--outline" href="#" title="Attiva online" target="_blank">Attiva online </a>
        </div>
      </div>

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 list-card__item">
        <div class="card card--product card--success">
          <div class="card__header-arrow header__with-cols">
            <div class="header-arrow__col">
              <span>Da</span>
              <span class="header-arrow__old">34,95</span>
              <span>euros / m</span>
            </div>
            <div class="header-arrow__col">
              <span>Promozione</span>
              <span class="header-arrow__new">25,95</span>
              <span>euros / m</span>
            </div>
          </div>
          <div class="card__logo">
            <img src="/img/selectra-yaml/providers-logo/logo-engie.png" alt="Logo alt">
          </div>
          <p class="card__title">Fastweb casa</p>
          <ul class="card__characteristics">
            <li class="card__trait">Internet ilimitado</li>
            <li class="card__trait">Chiamate illimitate</li>
            <li class="card__trait">Nessun vincolo</li>
            <li class="card__trait">Attivazione gratuita</li>
          </ul>
          <a class="btn btn--md btn--block btn--success" href="#" title="Attiva online" target="_blank">Attiva online </a>
        </div>
      </div>

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 list-card__item">
        <div class="card card--product">
          <div class="card__header-arrow header__with-cols header-arrow--warning">
            <div class="header-arrow__col">
              <span>Da</span>
              <span class="header-arrow__old">38,90</span>
              <span>euros / m</span>
            </div>
            <div class="header-arrow__col">
              <span>Promozione</span>
              <span class="header-arrow__new">27,90</span>
              <span>euros / m</span>
            </div>
          </div>
          <div class="card__logo">
            <img src="/img/selectra-yaml/providers-logo/logo-engie.png" alt="Logo alt">
          </div>
          <p class="card__title">Internet unlimited</p>
          <ul class="card__characteristics">
            <li class="card__trait">Internet ilimitado</li>
            <li class="card__trait">Chiamate illimitate</li>
            <li class="card__trait">Nessun vincolo</li>
            <li class="card__trait">Attivazione gratuita</li>
          </ul>
          <a class="btn btn--md btn--block btn--secondary btn--outline" href="#" title="Attiva online" target="_blank">Attiva online </a>
        </div>
      </div>

    </div>
  </div>
</section>

You can custom the color of your cards--product. To do that you only have to change the color you want insidecard__header-arrow header__with-cols , adding the class with the color you want:

header-arrow--primary
header-arrow--secondary
header-arrow--danger
header-arrow--warning
header-arrow--success

Also, you can add the classcard--success inside <div class="card card--product"> . This class will give more emphasis to the card, adding a green border and a green header.

Card Product with Callcenters

You can add this component with callcenter closed also.

For this, you can replicate the code adding the classcall-block--closed or call-block--open with data-callcenter="callcenter-name" in <section class="yaml-section cards cards--product container">

HTML

{{ attach_library('agrippa/card--product') }}
{{ attach_library('agrippa/list-card') }}

<section class="yaml-section cards cards--product container call-block--open" data-callcenter="france-energie">

  <div class="container">
    <h2 class="section__title">Our best offers</h2>
    <p class="section__text">Add as many cards as you need!</p>
    <div class="row row--center list-card list-card--stretch">

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 list-card__item">
        <div class="card card--product">
          <div class="card__header-arrow header__with-cols header-arrow--secondary">
            <div class="header-arrow__col">
              <span>Da</span>
              <span class="header-arrow__old">34,95</span>
              <span>euros / m</span>
            </div>
            <div class="header-arrow__col">
              <span>Promozione</span>
              <span class="header-arrow__new">25,95</span>
              <span>euros / m</span>
            </div>
          </div>
          <div class="card__logo">
            <img src="/img/selectra-yaml/providers-logo/logo-engie.png" alt="Logo alt">
          </div>
          <p class="card__title">Fastweb casa</p>
          <ul class="card__characteristics">
            <li class="card__trait">Internet ilimitado</li>
            <li class="card__trait">Chiamate illimitate</li>
            <li class="card__trait">Nessun vincolo</li>
            <li class="card__trait">Attivazione gratuita</li>
          </ul>
          <a class="btn btn--md btn--block btn--secondary btn--outline" href="#" title="Attiva online" target="_blank">Attiva online </a>
        </div>
      </div>

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 list-card__item">
        <div class="card card--product">
          <div class="card__header-arrow header__with-cols header-arrow--danger">
            <div class="header-arrow__col">
              <span>Da</span>
              <span class="header-arrow__old">32,95</span>
              <span>euros / m</span>
            </div>
            <div class="header-arrow__col">
              <span>Promozione</span>
              <span class="header-arrow__new">27,90</span>
              <span>euros / m</span>
            </div>
          </div>
          <div class="card__logo">
            <img src="/img/selectra-yaml/providers-logo/logo-engie.png" alt="Logo alt">
          </div>
          <p class="card__title">Internet unlimited</p>
          <ul class="card__characteristics">
            <li class="card__trait">Internet ilimitado</li>
            <li class="card__trait">Chiamate illimitate</li>
            <li class="card__trait">Nessun vincolo</li>
            <li class="card__trait">Attivazione gratuita</li>
          </ul>
          <a class="btn btn--md btn--block btn--secondary btn--outline" href="#" title="Attiva online" target="_blank">Attiva online </a>
        </div>
      </div>

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 list-card__item">
        <div class="card card--product card--success">
          <div class="card__header-arrow header__with-cols">
            <div class="header-arrow__col">
              <span>Da</span>
              <span class="header-arrow__old">34,95</span>
              <span>euros / m</span>
            </div>
            <div class="header-arrow__col">
              <span>Promozione</span>
              <span class="header-arrow__new">25,95</span>
              <span>euros / m</span>
            </div>
          </div>
          <div class="card__logo">
            <img src="/img/selectra-yaml/providers-logo/logo-engie.png" alt="Logo alt">
          </div>
          <p class="card__title">Fastweb casa</p>
          <ul class="card__characteristics">
            <li class="card__trait">Internet ilimitado</li>
            <li class="card__trait">Chiamate illimitate</li>
            <li class="card__trait">Nessun vincolo</li>
            <li class="card__trait">Attivazione gratuita</li>
          </ul>
          <a class="btn btn--md btn--block btn--success" href="#" title="Attiva online" target="_blank">Attiva online </a>
        </div>
      </div>

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 list-card__item">
        <div class="card card--product">
          <div class="card__header-arrow header__with-cols header-arrow--warning">
            <div class="header-arrow__col">
              <span>Da</span>
              <span class="header-arrow__old">38,90</span>
              <span>euros / m</span>
            </div>
            <div class="header-arrow__col">
              <span>Promozione</span>
              <span class="header-arrow__new">27,90</span>
              <span>euros / m</span>
            </div>
          </div>
          <div class="card__logo">
            <img src="/img/selectra-yaml/providers-logo/logo-engie.png" alt="Logo alt">
          </div>
          <p class="card__title">Internet unlimited</p>
          <ul class="card__characteristics">
            <li class="card__trait">Internet ilimitado</li>
            <li class="card__trait">Chiamate illimitate</li>
            <li class="card__trait">Nessun vincolo</li>
            <li class="card__trait">Attivazione gratuita</li>
          </ul>
          <a class="btn btn--md btn--block btn--secondary btn--outline" href="#" title="Attiva online" target="_blank">Attiva online </a>
        </div>
      </div>

    </div>
  </div>
</section>

<section class="yaml-section cards cards--product container call-block--closed" data-callcenter="france-energie">

  <div class="container">
    <h2 class="section__title">Our best offers</h2>
    <p class="section__text">Add as many cards as you need!</p>
    <div class="row row--center list-card list-card--stretch">

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 list-card__item">
        <div class="card card--product">
          <div class="card__header-arrow header__with-cols header-arrow--secondary">
            <div class="header-arrow__col">
              <span>Da</span>
              <span class="header-arrow__old">34,95</span>
              <span>euros / m</span>
            </div>
            <div class="header-arrow__col">
              <span>Promozione</span>
              <span class="header-arrow__new">25,95</span>
              <span>euros / m</span>
            </div>
          </div>
          <div class="card__logo">
            <img src="/img/selectra-yaml/providers-logo/logo-engie.png" alt="Logo alt">
          </div>
          <p class="card__title">Fastweb casa</p>
          <ul class="card__characteristics">
            <li class="card__trait">Internet ilimitado</li>
            <li class="card__trait">Chiamate illimitate</li>
            <li class="card__trait">Nessun vincolo</li>
            <li class="card__trait">Attivazione gratuita</li>
          </ul>
          <a class="btn btn--md btn--block btn--secondary btn--outline" href="#" title="Attiva online" target="_blank">Attiva online </a>
        </div>
      </div>

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 list-card__item">
        <div class="card card--product">
          <div class="card__header-arrow header__with-cols header-arrow--danger">
            <div class="header-arrow__col">
              <span>Da</span>
              <span class="header-arrow__old">32,95</span>
              <span>euros / m</span>
            </div>
            <div class="header-arrow__col">
              <span>Promozione</span>
              <span class="header-arrow__new">27,90</span>
              <span>euros / m</span>
            </div>
          </div>
          <div class="card__logo">
            <img src="/img/selectra-yaml/providers-logo/logo-engie.png" alt="Logo alt">
          </div>
          <p class="card__title">Internet unlimited</p>
          <ul class="card__characteristics">
            <li class="card__trait">Internet ilimitado</li>
            <li class="card__trait">Chiamate illimitate</li>
            <li class="card__trait">Nessun vincolo</li>
            <li class="card__trait">Attivazione gratuita</li>
          </ul>
          <a class="btn btn--md btn--block btn--secondary btn--outline" href="#" title="Attiva online" target="_blank">Attiva online </a>
        </div>
      </div>

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 list-card__item">
        <div class="card card--product card--success">
          <div class="card__header-arrow header__with-cols">
            <div class="header-arrow__col">
              <span>Da</span>
              <span class="header-arrow__old">34,95</span>
              <span>euros / m</span>
            </div>
            <div class="header-arrow__col">
              <span>Promozione</span>
              <span class="header-arrow__new">25,95</span>
              <span>euros / m</span>
            </div>
          </div>
          <div class="card__logo">
            <img src="/img/selectra-yaml/providers-logo/logo-engie.png" alt="Logo alt">
          </div>
          <p class="card__title">Fastweb casa</p>
          <ul class="card__characteristics">
            <li class="card__trait">Internet ilimitado</li>
            <li class="card__trait">Chiamate illimitate</li>
            <li class="card__trait">Nessun vincolo</li>
            <li class="card__trait">Attivazione gratuita</li>
          </ul>
          <a class="btn btn--md btn--block btn--success" href="#" title="Attiva online" target="_blank">Attiva online </a>
        </div>
      </div>

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 list-card__item">
        <div class="card card--product">
          <div class="card__header-arrow header__with-cols header-arrow--warning">
            <div class="header-arrow__col">
              <span>Da</span>
              <span class="header-arrow__old">38,90</span>
              <span>euros / m</span>
            </div>
            <div class="header-arrow__col">
              <span>Promozione</span>
              <span class="header-arrow__new">27,90</span>
              <span>euros / m</span>
            </div>
          </div>
          <div class="card__logo">
            <img src="/img/selectra-yaml/providers-logo/logo-engie.png" alt="Logo alt">
          </div>
          <p class="card__title">Internet unlimited</p>
          <ul class="card__characteristics">
            <li class="card__trait">Internet ilimitado</li>
            <li class="card__trait">Chiamate illimitate</li>
            <li class="card__trait">Nessun vincolo</li>
            <li class="card__trait">Attivazione gratuita</li>
          </ul>
          <a class="btn btn--md btn--block btn--secondary btn--outline" href="#" title="Attiva online" target="_blank">Attiva online </a>
        </div>
      </div>

    </div>
  </div>
</section>

Nano Cards

To have nano-cards in your custom template, you can use this code:

HTML

{{ attach_library('agrippa/nano--card') }}

<section class="nano-cards">
  <div class="container">

    <div class="nano-card__wrapper row row--center">

      <div class="nano-card two-column framed">
        <div class="nano-card__header">
          <img data-src="https://prix-elec.com/sites/prix-elec.com/files/styles/provider_hero/public/2021-05/totalenergies-test.jpg?itok=PHrZ-QX3" alt="alt">
        </div>
        <div class="nano-card__footer">
          <div class="nano-card__first-wrapper">
            <div class="nano-card__first">
              <svg class="icon icon--16 icon--left" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-file-download"></use>
              </svg>
              <span class="nano-card__first-unit">40</span><span class="nano-card__first-unit-value">/$</span>
            </div>
            <div class="nano-card__first">
              <svg class="icon icon--16 icon--left" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-calendar-rounded"></use>
              </svg>
              <span class="nano-card__first-unit">4</span><span class="nano-card__first-unit-value">/month</span>
            </div>
          </div>
          <div class="nano-card-data nano-card-data--success">
            <span class="nano-card-data__big">40</span>
            <div class="nano-card-data__more-info">
              <span class="nano-card-data__value_1">€ 99</span>
              <span class="nano-card-data__value_2">/mois</span>
            </div>
          </div>
          <a class="btn btn--pill" href="#" target="_blank">Framed</a>
        </div>
      </div>

    </div>

    <div class="nano-card__wrapper row row--center">

      <div class="nano-card two-column unframed">
        <div class="nano-card__header">
          <img data-src="https://prix-elec.com/sites/prix-elec.com/files/styles/provider_hero/public/2021-05/totalenergies-test.jpg?itok=PHrZ-QX3" alt="alt">
        </div>
        <div class="nano-card__footer">
          <div class="nano-card__first-wrapper">
            <div class="nano-card__first">
              <svg class="icon icon--16 icon--left" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-file-download"></use>
              </svg>
              <span class="nano-card__first-unit">40</span><span class="nano-card__first-unit-value">/$</span>
            </div>
            <div class="nano-card__first">
              <svg class="icon icon--16 icon--left" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-calendar-rounded"></use>
              </svg>
              <span class="nano-card__first-unit">4</span><span class="nano-card__first-unit-value">/month</span>
            </div>
          </div>
          <div class="nano-card-data nano-card-data--success">
            <span class="nano-card-data__big">40</span>
            <div class="nano-card-data__more-info">
              <span class="nano-card-data__value_1">€ 99</span>
              <span class="nano-card-data__value_2">/mois</span>
            </div>
          </div>
          <a class="btn btn--pill" href="#" target="_blank">Unframed</a>
        </div>
      </div>

    </div>

    <div class="nano-card__wrapper row row--center">

      <div class="nano-card two-column framed pill">
        <div class="nano-card__header">
          <img data-src="https://prix-elec.com/sites/prix-elec.com/files/styles/provider_hero/public/2021-05/totalenergies-test.jpg?itok=PHrZ-QX3" alt="alt">
        </div>
        <div class="nano-card__footer">
          <div class="nano-card__first-wrapper">
            <div class="nano-card__first">
              <svg class="icon icon--16 icon--left" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-file-download"></use>
              </svg>
              <span class="nano-card__first-unit">40</span><span class="nano-card__first-unit-value">/$</span>
            </div>
            <div class="nano-card__first">
              <svg class="icon icon--16 icon--left" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-calendar-rounded"></use>
              </svg>
              <span class="nano-card__first-unit">4</span><span class="nano-card__first-unit-value">/month</span>
            </div>
          </div>
          <div class="nano-card-data nano-card-data--success">
            <span class="nano-card-data__big">40</span>
            <div class="nano-card-data__more-info">
              <span class="nano-card-data__value_1">€ 99</span>
              <span class="nano-card-data__value_2">/mois</span>
            </div>
          </div><a class="btn btn--pill" href="#" target="_blank">Framed Pill</a>
        </div>
      </div>

    </div>

  </div>
</section>

Nano Cards with Callcenters

You can add this component with callcenter closed also.

If you want to change only some elements, you can copy and edit if you want this code:

HTML

{{ attach_library('agrippa/nano--card') }}

<section class="nano-cards">
  <div class="container">
    <div class="nano-card__wrapper row row--center">

      <div class="nano-card two-column framed">
        <div class="nano-card__header">
          <img data-callcenter="france-energie" class="call-block--open" data-src="https://prix-elec.com/sites/prix-elec.com/files/styles/provider_hero/public/2021-05/totalenergies-test.jpg?itok=PHrZ-QX3" alt="img open">
          <img data-callcenter="france-energie" class="call-block--closed" data-src="https://prix-elec.com/sites/prix-elec.com/files/styles/provider_hero/public/2021-05/totalenergies-test.jpg?itok=PHrZ-QX3" alt="img closed">
        </div>
        <div class="nano-card__footer">
          <div class="nano-card__first-wrapper call-block--open" data-callcenter="france-energie">
            <div class="nano-card__first">
              <svg class="icon icon--16 icon--left" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-file-download"></use>
              </svg>
              <span class="nano-card__first-unit">40</span><span class="nano-card__first-unit-value">/$</span>
            </div>
            <div class="nano-card__first">
              <svg class="icon icon--16 icon--left" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-calendar-rounded"></use>
              </svg>
              <span class="nano-card__first-unit">4</span><span class="nano-card__first-unit-value">/month</span>
            </div>
          </div>
          <div class="nano-card__first-wrapper call-block--closed call-block--closed-flex" data-callcenter="france-energie">
            <div class="nano-card__first">
              <svg class="icon icon--16 icon--left" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-file-download"></use>
              </svg>
              <span class="nano-card__first-unit">40</span><span class="nano-card__first-unit-value">/$</span>
            </div>
            <div class="nano-card__first">
              <svg class="icon icon--16 icon--left" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-calendar-rounded"></use>
              </svg>
              <span class="nano-card__first-unit">4</span><span class="nano-card__first-unit-value">/month</span>
            </div>
          </div>
          <div class="nano-card-data nano-card-data--success call-block--open" data-callcenter="france-energie">
            <span class="nano-card-data__big">40</span>
            <div class="nano-card-data__more-info">
              <span class="nano-card-data__value_1">€ 99</span>
              <span class="nano-card-data__value_2">/mois</span>
            </div>
          </div>
          <div class="nano-card-data nano-card-data--success call-block--closed call-block--closed-flex" data-callcenter="france-energie">
            <span class="nano-card-data__big">40</span>
            <div class="nano-card-data__more-info">
              <span class="nano-card-data__value_1">€ 99</span>
              <span class="nano-card-data__value_2">/mois</span>
            </div>
          </div>
          <a class="btn btn--pill call-block--open" data-callcenter="france-energie" href="#" target="_blank">Open</a>
          <a class="btn btn--pill call-block--closed call-block--closed-flex" data-callcenter="france-energie" href="#" target="_blank">Closed</a>
        </div>
      </div>

    </div>
  </div>
</section>

Mini Cards

To have mini-cards in your custom template, you can use this code:

HTML

{{ attach_library('agrippa/mini--card') }}

<section class="mini-cards">
  <div class="container">
    <div class="mini-cards__wrapper">

      <div class="mini-card--wrapper">
        <div class="mini-card">
          <div class="mini-card__header">
            <div class="CH-top CH-top--half">
              <div class="CH-logo">
                <img data-src="https://prix-elec.com/sites/prix-elec.com/files/styles/provider_hero/public/2021-05/totalenergies-test.jpg?itok=PHrZ-QX3" alt="alt">
              </div>
            </div>
            <p class="CH-title">Card title - Without Flag</p>
            <div class="CH-rating">
              <svg class="icon icon--left icon--24" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-star-filled-2"></use>
              </svg>
              <strong> 2</strong><span class="CH-rating__separator">sur</span><strong> 5</strong>
              <a class="CH-rating__votes" href="#" target="_blank"> 738 avis</a>
            </div>
          </div>
          <div class="mini-card__footer">
            <div class="CH-price CH-price--success">
              <span class="CH-price-info CH-price-info--top"> A partir de</span>
              <div class="CH-price-data CH-price-data--success CH-price-data--alone">
                <span class="CH-price-data__big"> 40</span>
                <div class="CH-price-data__more-info">
                  <span class="CH-price-data__value_1"> € 99</span>
                </div>
              </div>
            </div>
            <a class="btn btn--block btn--sm btn--pill btn--success" href="tel:+33987675475" target="_blank">
              Beatae
              <svg class="icon icon--right" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-phone"></use>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <div class="mini-card--wrapper wrapper--has-flag">
        <div class="mini-card">
          <div class="CH-flag CH-flag--gold">
            <svg class="icon icon--left" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-circle-info-outlined"></use>
            </svg>
            Annonce
          </div>
          <div class="mini-card__header">
            <div class="CH-top CH-top--half">
              <div class="CH-logo">
                <img data-src="https://prix-elec.com/sites/prix-elec.com/files/styles/provider_hero/public/2021-05/totalenergies-test.jpg?itok=PHrZ-QX3" alt="alt">
              </div>
            </div>
            <p class="CH-title">Card title - With flag</p>
            <div class="CH-rating">
              <svg class="icon icon--left icon--24" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-star-filled-2"></use>
              </svg>
              <strong> 2</strong><span class="CH-rating__separator">sur</span><strong> 5</strong>
              <a class="CH-rating__votes" href="#" target="_blank"> 738 avis</a>
            </div>
          </div>
          <div class="mini-card__footer">
            <div class="CH-price CH-price--success">
              <span class="CH-price-info CH-price-info--top"> A partir de</span>
              <div class="CH-price-data CH-price-data--success CH-price-data--alone">
                <span class="CH-price-data__big"> 40</span>
                <div class="CH-price-data__more-info">
                  <span class="CH-price-data__value_1"> € 99</span>
                </div>
              </div>
            </div>
            <a class="btn btn--block btn--sm btn--pill btn--success" href="tel:+33987675475" target="_blank">
              Beatae
              <svg class="icon icon--right" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-smartphone"></use>
              </svg>
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

Mini Cards with Callcenters

You can add this component with callcenter closed also.

If you want to change only some elements, you can copy and edit if you want this code:

HTML

{{ attach_library('agrippa/mini--card') }}

<section class="mini-cards">
  <div class="container">
    <div class="mini-cards__wrapper">

      <div class="mini-card--wrapper wrapper--has-flag">
        <div class="mini-card">
          <div class="CH-flag CH-flag--gold call-block--open" data-callcenter="france-energie">
            <svg class="icon icon--left" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-circle-info-outlined"></use>
            </svg>
            Open
          </div>
          <div class="CH-flag CH-flag--gold call-block--closed" data-callcenter="france-energie">
            <svg class="icon icon--left" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-circle-info-outlined"></use>
            </svg>
            Closed
          </div>
          <div class="mini-card__header">
            <div class="CH-top CH-top--half">
              <div class="CH-logo">
                <img class="call-block--open" data-callcenter="france-energie" data-src="https://prix-elec.com/sites/prix-elec.com/files/styles/provider_hero/public/2021-05/totalenergies-test.jpg?itok=PHrZ-QX3" alt="img open">
                <img class="call-block--closed" data-callcenter="france-energie" data-src="https://prix-elec.com/sites/prix-elec.com/files/styles/provider_hero/public/2021-05/totalenergies-test.jpg?itok=PHrZ-QX3" alt="img closed">
              </div>
            </div>
            <p class="CH-title call-block--open" data-callcenter="france-energie">Card title Open - With flag</p>
            <p class="CH-title call-block--closed" data-callcenter="france-energie">Card title Closed - With flag</p>
            <div class="CH-rating">
              <svg class="icon icon--left icon--24" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-star-filled-2"></use>
              </svg>
              <strong> 2</strong><span class="CH-rating__separator">sur</span><strong> 5</strong>
              <a class="CH-rating__votes" href="#" target="_blank"> 738 avis</a>
            </div>
          </div>
          <div class="mini-card__footer">
            <div class="CH-price CH-price--success">
              <span class="CH-price-info CH-price-info--top"> A partir de</span>
              <div class="CH-price-data CH-price-data--success CH-price-data--alone">
                <span class="CH-price-data__big"> 40</span>
                <div class="CH-price-data__more-info">
                  <span class="CH-price-data__value_1"> € 99</span>
                </div>
              </div>
            </div>
            <a class="btn btn--block btn--sm btn--pill btn--success call-block--open" data-callcenter="france-energie" href="tel:+33987675475" target="_blank">
              open Btn
              <svg class="icon icon--right" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-smartphone"></use>
              </svg>
            </a>
            <a class="btn btn--block btn--sm btn--pill btn--success call-block--closed" data-callcenter="france-energie" href="tel:+33987675475" target="_blank">
              Closed Btn
              <svg class="icon icon--right" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-smartphone"></use>
              </svg>
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

New Ads

To have new-ads in your custom template, you can use this code:

HTML

{{ attach_library('agrippa/new--ads') }}

<div class="container">
  <div class="new-ads__card new-ads__card-logo new-ads__card-custom" style="--ad-bg:#fbfef9;">
    <div class="new-ads__card-logo-wrapper u-display--none u-display--md-flex">
      <img class="new-ads__card-logo" src="https://selectra.info/sites/selectra.info/files/images/energie/bloc/conso.png" alt="logo" loading="lazy" />
    </div>
    <div class="new-ads__card-content">
      <div class="new-ads__card-badge"> This is a badge </div>
      <div class="content__wrapper">
        <p class="new-ads__card-title"> Open version </p>
        <p class="new-ads__card-description">Les conseillers Selectra estiment avec vous la rentabilité de vos heures creuses et vous proposent des solutions :</p>
        <div class="new-ads__card-footer">
          <a class="btn btn--md btn--primary btn--pill" href="tel:0973727300" title="09 73 72 73 00">
            <div class="new-ads__card-button-avatar">
              <img src="https://www.gravatar.com/avatar/73f62799447f0ebbca3e16114ea302bbb5bbdddc1e9e90928bf121c9519cbdc7?s=24" alt="connected avatar" loading="lazy" />
            </div>09 73 72 73 00 <svg class="icon icon--right icon--flag" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#flag-fr"></use>
            </svg>
          </a>
          <a class="btn btn--md btn--secondary btn--pill" data-fetch-url="/callback/modal_energie_general" data-modal-size="sm" data-target="callback-modal" data-toggle="modal" href="#modal_energie_general" title="Me faire rappeler">
            Me faire rappeler
            <svg class="icon icon--right icon--forward" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-arrow-forward"></use>
            </svg>
          </a>
          <p class="new-ads__card-open-hours">
            <span class="text--xs">
              <strong>Annonce</strong> - Service Selectra non-partenaire d'EDF
            </span>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

New Ads with Callcenters

You can add this component with callcenter closed also.

If you want to change only some elements, you can copy and edit if you want this code:

HTML

{{ attach_library('agrippa/new--ads') }}

<div class="container">
  <div class="new-ads__card new-ads__card-logo new-ads__card-custom" style="--ad-bg:#fbfef9;">
    <div class="new-ads__card-logo-wrapper u-display--none u-display--md-flex">
      <img class="new-ads__card-logo call-block--open" data-callcenter="france-energie" src="https://selectra.info/sites/selectra.info/files/images/energie/bloc/conso.png" alt="logo" loading="lazy" />
      <img class="new-ads__card-logo call-block--closed" data-callcenter="france-energie" src="https://selectra.info/sites/selectra.info/files/images/energie/bloc/conso.png" alt="logo" loading="lazy" />
    </div>
    <div class="new-ads__card-content">
      <div class="new-ads__card-badge call-block--open" data-callcenter="france-energie"> This is a badge </div>
      <div class="new-ads__card-badge call-block--closed" data-callcenter="france-energie"> This is a badge </div>
      <div class="content__wrapper">
        <p class="new-ads__card-title call-block--open" data-callcenter="france-energie"> Open version </p>
        <p class="new-ads__card-title call-block--closed" data-callcenter="france-energie"> Open version </p>
        <p class="new-ads__card-description call-block--open" data-callcenter="france-energie">Les conseillers Selectra estiment avec vous la rentabilité de vos heures creuses et vous proposent des solutions :</p>
        <p class="new-ads__card-description call-block--closed" data-callcenter="france-energie">Les conseillers Selectra estiment avec vous la rentabilité de vos heures creuses et vous proposent des solutions :</p>
        <div class="new-ads__card-footer">
          <a class="btn btn--md btn--primary btn--pill call-block--open" data-callcenter="france-energie" href="tel:0973727300" title="09 73 72 73 00">
            <div class="new-ads__card-button-avatar">
              <img src="https://www.gravatar.com/avatar/73f62799447f0ebbca3e16114ea302bbb5bbdddc1e9e90928bf121c9519cbdc7?s=24" alt="connected avatar" loading="lazy" />
            </div>09 73 72 73 00 <svg class="icon icon--right icon--flag" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#flag-fr"></use>
            </svg>
          </a>
          <a class="btn btn--md btn--primary btn--pill call-block--closed call-block--closed-flex" data-callcenter="france-energie" href="tel:0973727300" title="09 73 72 73 00">
            <div class="new-ads__card-button-avatar">
              <img src="https://www.gravatar.com/avatar/73f62799447f0ebbca3e16114ea302bbb5bbdddc1e9e90928bf121c9519cbdc7?s=24" alt="connected avatar" loading="lazy" />
            </div>09 73 72 73 00 <svg class="icon icon--right icon--flag" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#flag-fr"></use>
            </svg>
          </a>
          <a class="btn btn--md btn--secondary btn--pill call-block--open" data-callcenter="france-energie" data-fetch-url="/callback/modal_energie_general" data-modal-size="sm" data-target="callback-modal" data-toggle="modal" href="#modal_energie_general" title="Me faire rappeler">
            Open
            <svg class="icon icon--right icon--forward" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-arrow-forward"></use>
            </svg>
          </a>
          <a class="btn btn--md btn--secondary btn--pill call-block--closed call-block--closed-flex" data-callcenter="france-energie" data-fetch-url="/callback/modal_energie_general" data-modal-size="sm" data-target="callback-modal" data-toggle="modal" href="#modal_energie_general" title="Me faire rappeler">
            Closed
            <svg class="icon icon--right icon--forward" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-arrow-forward"></use>
            </svg>
          </a>
          <p class="new-ads__card-open-hours">
            <span class="text--xs call-block--open" data-callcenter="france-energie">
              <strong>Annonce</strong> - Open
            </span>
            <span class="text--xs call-block--closed" data-callcenter="france-energie">
              <strong>Annonce</strong> - Closed
            </span>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Speed Test Internet

To have speed-test-internet in your custom template, you can use this code

You can add HTML that appears when Speed Test has finished. You have to add your HTML inside <div class="ST-results-body"> at the end of the code.

Also, you have all results availables if you add a specific <span class="ST-result-xxx">

List of the results avaiables:

<span class="ST-result-download"></span> to see the download speed result.
<span class="ST-result-upload"></span> to see the upload speed result.
<span class="ST-result-ping"></span> to see the ping speed result.
<span class="ST-result-jitter"></span> to see the jitter speed result.
<span class="ST-result-loss"></span> to see the loss speed result.
<span class="ST-result-gaming"></span> to see the gaming speed result.
<span class="ST-result-streaming"></span> to see the streaming speed result.
<span class="ST-result-chatting"></span> to see the chatting speed result.

HTML

{{ attach_library('agrippa/speed-test-internet') }}

<section class="yaml-section speed-test-internet with-aside">
  <div class="container">
    <div class="ST__wrapper-card">
      <div class="row ST__title-wrapper">
        <h2 class="ST__title"> Title </h2>
        <div class="ST__info">
          <span class="ip">
            <svg class="icon icon--neutral icon--16" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-person-outlined-2"></use>
            </svg>
            <span></span>
            <strong></strong>
          </span>
          <span class="city">
            <svg class="icon icon--neutral icon--16" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-globe-meridian"></use>
            </svg>
            <strong></strong>
          </span>
        </div>
      </div>

      <div class="row ST__cards-wrapper">
        {# Download card #}
        <div class="card ST__wrapper-download card--disabled" data-value="Loading...">
          <div class="col-xs-5">
            <div>
              <svg class="icon icon--neutral icon--16" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-file-download"></use>
              </svg>
              {{'Download'|t}}
            </div>
            <div id="download-progress"> -- </div>
            <div> Mbps </div>
          </div>

          <div class="col-xs-7">
            <div class="ST__graph--wrapper"></div>
            <svg class="ST-graph ST-graph-download" width="137" height="66" viewBox="0 0 137 69" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 68L17.2796 56.8334L24.228 44.2709L34.5515 61.998L41.5 53.623L48.8456 1L67.7059 52.5064L81.4044 35.3376L107.61 68L115.75 59.7648L120.713 46.0856L136 35.3376" stroke-width="1.2" stroke-linecap="round" />
            </svg>
            <svg class="ST-graph ST-graph-download" width="126" height="66" viewBox="0 0 126 62" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 51.5L8.2233 60.5L15.8479 35L20 46.5L27.4854 41.5L38.7217 25.5L49.5566 51.5L65.5 3L73.8625 40L84.5 51.5L102.126 10.5L106.5 57.5L112.961 35L125 22" stroke-width="1.2" stroke-linecap="round"/>
            </svg>
            <svg class="ST-graph ST-graph-download" width="128" height="66" viewBox="0 0 128 69" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.5 57.5L16.5 35.5L35 67L46 4.5L55.5 23.5L65 9.5L83 47L101.5 26L122 12.5L126.5 1" stroke-width="1.2" stroke-linecap="round"/>
            </svg>
            <svg class="ST-graph ST-graph-download" width="129" height="66" viewBox="0 0 129 73" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.5 51L6 70L15 36L31 60.5L39 30L67 2L79 70L88.5 45.5L110.5 36L119.5 11L128 21" stroke-width="1.2" stroke-linecap="round"/>
            </svg>
            <svg class="ST-graph ST-graph-download" width="125" height="66" viewBox="0 0 125 63" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.5 48.5L10 61.5L27 34L45 23L61.5 1.5L69 40.5L79 19.5L93.5 48.5L115 1.5L124 19.5" stroke-width="1.2" stroke-linecap="round"/>
            </svg>
          </div>
        </div>

        {# Upload Card #}
        <div class="card upload__wrapper card--disabled">
          <div class="col-xs-5">
            <div>
              <svg class="icon icon--neutral icon--16" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-file-upload"></use>
              </svg>
              {{'Upload'|t}}
            </div>
            <div id="upload-progress"> -- </div>
            <div> Mbps </div>
          </div>
          <div class="col-xs-7">
            <div class="ST__graph--wrapper"></div>
            <svg class="ST-graph ST-graph-upload" width="137" height="68" viewBox="0 0 137 68" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 67L17.2651 57.2875L23.4461 39.6287L32.2292 46.6924L59.8797 30.3579L69.3134 1L84.2772 41.3947L106.398 1L112.904 48.6789L121.687 28.592L136 44.485" stroke="#046813" stroke-width="1.2" stroke-linecap="round"/>
            </svg>
            <svg class="ST-graph ST-graph-upload" width="146" height="70" viewBox="0 0 146 70" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 56.5L17 31.5L31 68.5L43.5 49L76.5 27.5L90.5 62.5L120.5 1.5L130.5 18L145 8.5" stroke="#046813" stroke-width="1.2" stroke-linecap="round"/>
            </svg>
            <svg class="ST-graph ST-graph-upload" width="174" height="81" viewBox="0 0 174 81" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.5 35L19 79L35.5 51.5L58.5 59L97.5 2L115 43.5L145.5 73.5L173 27.5" stroke="#046813" stroke-width="1.2" stroke-linecap="round"/>
            </svg>
            <svg class="ST-graph ST-graph-upload" width="151" height="73" viewBox="0 0 151 73" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.5 54L21 71.5L46.5 24L52.5 43L64 33L75 63.5L111.5 2L118 33L139 57L149.5 39.5" stroke="#046813" stroke-width="1.2" stroke-linecap="round"/>
            </svg>
            <svg class="ST-graph ST-graph-upload" width="135" height="70" viewBox="0 0 135 70" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 56L12 68.5L23 15.5L33.5 21L62 1.5L85.5 62.5L103.5 33L114.5 44L134 21" stroke="#046813" stroke-width="1.2" stroke-linecap="round"/>
            </svg>
          </div>
        </div>
      </div>

      <div class="row ST__cards-wrapper second-row">
        <div class="card card--disabled">
          <div class="col-xs-12">
            <div>
              <svg class="icon icon--neutral icon--16" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-file-upload"></use>
              </svg>
              Ping
            </div>
            <div class="server-data" id="ping-progress"> -- </div>
            <div> ms </div>
          </div>
        </div>
        <div class="card card--disabled">
          <div class="col-xs-12">
            <div>
              <svg class="icon icon--neutral icon--16" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-file-upload"></use>
              </svg>
              Jitter
            </div>
            <div class="server-data" id="jitter-progress"> -- </div>
            <div> ms </div>
          </div>
        </div>
        <div class="card card--disabled">
          <div class="col-xs-12">
            <div>
              <svg class="icon icon--neutral icon--16" aria-hidden="true">
                <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-file-upload"></use>
              </svg>
              Loss
            </div>
            <div class="server-data" id="loss-progress"> -- </div>
            <div> % </div>
          </div>
        </div>

        {# Reload test button #}
        <div id="reloadTestButton" class="ST__button-start ST__button-reload">
          <div class="ST__button-start--wrapper">
            <svg class="icon icon--neutral icon--24" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-wifi"></use>
            </svg>
            <span class="ST__button-start--title"> {{ 'Reload'|t }} </span>
            <span class="ST__button-start--subtitle"> {{ 'Speed Test'|t }} </span>
          </div>
        </div>

      </div>

      {# Scores #}
      <div class="row ST__scores-wrapper">
        <div class="ST__scores">
          <div class="ST__scores--item" id="videoStreaming">
            <span class="ST__scores--label"> Video Streaming: </span>
            <span class="ST__scores--result"> -- </span>
            <span data-value="bad" class="scores--finished"> Bad </span>
            <span data-value="poor" class="scores--finished"> Poor </span>
            <span data-value="average" class="scores--finished"> Average </span>
            <span data-value="good" class="scores--finished"> Good </span>
            <span data-value="great" class="scores--finished"> Great </span>
          </div>
          <div class="ST__scores--item" id="onlineGaming">
            <span class="ST__scores--label"> Online Gaming: </span>
            <span class="ST__scores--result"> -- </span>
            <span data-value="bad" class="scores--finished"> Bad </span>
            <span data-value="poor" class="scores--finished"> Poor </span>
            <span data-value="average" class="scores--finished"> Average </span>
            <span data-value="good" class="scores--finished"> Good </span>
            <span data-value="great" class="scores--finished"> Great </span>
          </div>
          <div class="ST__scores--item" id="videoChatting">
            <span class="ST__scores--label"> Video Chatting: </span>
            <span class="ST__scores--result"> -- </span>
            <span data-value="bad" class="scores--finished"> Bad </span>
            <span data-value="poor" class="scores--finished"> Poor </span>
            <span data-value="average" class="scores--finished"> Average </span>
            <span data-value="good" class="scores--finished"> Good </span>
            <span data-value="great" class="scores--finished"> Great </span>
          </div>
        </div>
      </div>

      {# Info only in mobile #}
      <div class="row u-display--lg-none">
        <div class="ST__info">
          <span class="ip">
            <svg class="icon icon--neutral icon--16" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-person-outlined-2"></use>
            </svg>
            <span></span>
            <strong></strong>
          </span>
          <span class="city">
            <svg class="icon icon--neutral icon--16" aria-hidden="true">
              <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-globe-meridian"></use>
            </svg>
            <strong></strong>
          </span>
        </div>
      </div>


      {# Start Button #}
      <div id="downloadTestButton" class="ST__button-start">
        <span class="ST__button-start--border"></span>
        <div class="ST__button-start--wrapper">
          <svg class="icon icon--neutral icon--24" aria-hidden="true">
            <use xlink:href="/themes/custom/agrippa/img/sprite.svg#icon-wifi"></use>
          </svg>
          <span class="ST__button-start--title"> {{ 'Start'|t }} </span>
          <span class="ST__button-start--subtitle"> {{ 'Speed Test'|t }} </span>
        </div>
      </div>

    </div>

    {# Result Body #}
    <div class="ST-results-body">

      <p> Add here the HTML you want to see when the speed test has finished </p>

      <span class="ST-result-download"></span>
      <span class="ST-result-upload"></span>
      <span class="ST-result-ping"></span>
      <span class="ST-result-jitter"></span>
      <span class="ST-result-loss"></span>
      <span class="ST-result-gaming"></span>
      <span class="ST-result-streaming"></span>
      <span class="ST-result-chatting"></span>

    </div>

  </div>
</section>

Custom Templates

Hero--CTA-3

Banner--provider-cta

Banner Prov Cta with Callcenters

Banner--score

Card--product

Card Product with Callcenters

Nano Cards

Nano Cards with Callcenters

Mini Cards

Mini Cards with Callcenters

New Ads

New Ads with Callcenters

Speed Test Internet