Tiles

Tiles Expand Multiple

Titre
1

Entête

Texte pour desktop seulement

Texte pour mobile seulement

Titre
2

Entête

Texte pour desktop seulement

Texte pour mobile seulement

Titre
3

Entête

Texte pour desktop seulement

Texte pour mobile seulement

Titre
4

Entête

Texte pour desktop seulement

Texte pour mobile seulement

Markup Details
                            <div class="h-100 tiles-expand-container tiles-expand-multiple">
  <div class="h-100 row no-gutters">
    <div class="col-12">
      <div class="d-flex h-100 flex-wrap position-relative">
        <div class="tile__expand w-50">
          <div class="tile__expand-front front bg-bleu-pastel top-left">
            <div class="tile__expand-front-featured">
              <h3 class="heading-medium mb-0 pb-2 text-vert-cascades">Titre<br />
                1</h3>
              <button class="tile__expand-open text-vert-cascades"><i class="icon-plus heading-medium">&nbsp;</i></button>
            </div>
            <div class="tile__expand-front-more-info">
              <button class="tile__expand-close text-vert-cascades"><i class="icon-close">&nbsp;</i></button>
              <div class="tile__expand-front-more-info-content  w-100 pt-10 p-lg-10">
                <p class="heading-regular text-vert-cascades py-2">Entête</p>
                <p class="text-xlarge text-vert-cascades py-2 d-none d-lg-block">Texte pour desktop seulement</p>
                <p class="text-xlarge text-vert-cascades pb-2 d-lg-none">Texte pour mobile seulement</p>
                <p><button class="btn btn-outline-primary" type="button">En savoir plus <span class="d-none d-lg-block">texte pour desktop</span></button></p>
              </div>
            </div>
          </div>
        </div>
        <div class="tile__expand w-50">
          <div class="tile__expand-front bg-bleu-profond top-right">
            <div class="tile__expand-front-featured">
              <h3 class="heading-medium mb-0 pb-2 text-white">Titre<br />
                2</h3>
              <button class="tile__expand-open heading-medium text-white"><i class="icon-plus heading-medium">&nbsp;</i></button>
            </div>
            <div class="tile__expand-front-more-info">
              <button class="tile__expand-close text-white"><i class="icon-close">&nbsp;</i></button>
              <div class="tile__expand-front-more-info-content  w-100 pt-10 p-lg-10">
                <p class="heading-regular text-vert-cascades py-2">Entête</p>
                <p class="text-xlarge text-vert-cascades py-2 d-none d-lg-block">Texte pour desktop seulement</p>
                <p class="text-xlarge text-vert-cascades pb-2 d-lg-none">Texte pour mobile seulement</p>
                <p><button class="btn btn-outline-primary" type="button">En savoir plus <span class="d-none d-lg-block">texte pour desktop</span></button></p>
              </div>
            </div>
          </div>
        </div>
        <div class="tile__expand w-50">
          <div class="tile__expand-front bg-bleu-recyclage bottom-left">
            <div class="tile__expand-front-featured">
              <h3 class="heading-medium mb-0 pb-2 text-white">Titre<br />
                3</h3>
              <button class="tile__expand-open heading-medium text-white"><i class="icon-plus heading-medium">&nbsp;</i></button>
            </div>
            <div class="tile__expand-front-more-info">
              <button class="tile__expand-close text-white"><i class="icon-close">&nbsp;</i></button>
              <div class="tile__expand-front-more-info-content  w-100 pt-10 p-lg-10">
                <p class="heading-regular text-vert-cascades py-2">Entête</p>
                <p class="text-xlarge text-vert-cascades py-2 d-none d-lg-block">Texte pour desktop seulement</p>
                <p class="text-xlarge text-vert-cascades pb-2 d-lg-none">Texte pour mobile seulement</p>
                <p><button class="btn btn-outline-primary" type="button">En savoir plus <span class="d-none d-lg-block">texte pour desktop</span></button></p>
              </div>
            </div>
          </div>
        </div>
        <div class="tile__expand w-50">
          <div class="tile__expand-front bg-white bottom-right text-vert-cascades">
            <div class="tile__expand-front-featured">
              <h3 class="heading-medium mb-0 pb-2 text-vert-cascades">Titre<br />
                4</h3>
              <button class="tile__expand-open heading-medium text-vert-cascades"><i class="icon-plus heading-medium">&nbsp;</i></button>
            </div>
            <div class="tile__expand-front-more-info">
              <button class="tile__expand-close text-vert-cascades"><i class="icon-close">&nbsp;</i></button>
              <div class="tile__expand-front-more-info-content  w-100 pt-10 p-lg-10">
                <p class="heading-regular text-vert-cascades py-2">Entête</p>
                <p class="text-xlarge text-vert-cascades py-2 d-none d-lg-block">Texte pour desktop seulement</p>
                <p class="text-xlarge text-vert-cascades pb-2 d-lg-none">Texte pour mobile seulement</p>
                <p><button class="btn btn-outline-primary" type="button">En savoir plus <span class="d-none d-lg-block">texte pour desktop</span></button></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Tiles Expand Single

Produits
Qualites

  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
Content
Markup Details
                            <div class="tiles-expand-container tiles-expand-single">
  <div class="row no-gutters">
    <div class="col-12 col-lg-6">
      <div class="tile__expand">
        <div class="tile__expand-featured-info bg-bleu-pastel">
          <h3 class="heading-medium mb-0 pb-2">Produits<br />Qualites</h3>
          <div>
            <button class="tile__expand-open heading-medium text-vert-cascades"><i class="icon-plus">&nbsp;</i></button>
          </div>
        </div>
        <div class="tile__expand-more-info bg-bleu-pastel top-left">
          <div class="tile__expand-more-info-content">
            <button class="tile__expand-close text-vert-cascades"><i class="icon-close">&nbsp;</i></button>
            <ul class="heading-medium">
              <li>Lorem Ipsum</li>
              <li>Lorem Ipsum</li>
              <li>Lorem Ipsum</li>
              <li>Lorem Ipsum</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-6">
      <div class="w-100 bg-gris-chaud d-flex justify-content-center align-items-center" style="min-height: 700px;">
        Content
      </div>
    </div>
  </div>
</div>

Tiles Producs and Services - With icon

Barquette

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.

Boîtes isolantes

Lorem ipsum dolor sit amet consectetur adispicing elit. Integer eu risus ac eros pretium alliquam sit amet ague dolor amet.

Conteneurs à coquilles

Lorem ipsum dolor sit amet consectetur adispicing elit. Integer eu risus ac eros pretium alliquam sit amet ague dolor.

Contenant pour aliments en vrac

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Emballages de produits de consommation

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Markup Details
                            <div class="products-services products-services--icon-text">
    <div class="ps__wrapper">
        <div class="ps__items tiles">
            {% for key, item in productsServicesIconText %}
                {% include 'products-services-icon-text--section.twig' with {
                image: item.image,
                title: item.title,
                description: item.description,
                cta: item.cta
                } only %}
            {% endfor %}
        </div>
    </div>
</div>

Tiles Producs and Services - With image

Barquette

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.

 

Boîtes isolantes

Lorem ipsum dolor sit amet consectetur adispicing elit. Integer eu risus ac eros pretium alliquam sit amet ague dolor amet.

 

Conteneurs à coquilles

Lorem ipsum dolor sit amet consectetur adispicing elit. Integer eu risus ac eros pretium alliquam sit amet ague dolor.

 

Contenant pour aliments en vrac

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

 

Emballages de produits de consommation

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

 
Markup Details
                            <div class="products-services products-services--image-text">
    <div class="ps__wrapper">
        <div class="ps__items">
            {% for key, item in productsServicesImageText %}
                {% include 'products-services-image-text--section.twig' with {
                image: item.image,
                title: item.title,
                description: item.description,
                cta: item.cta
                } only %}
            {% endfor %}
        </div>
    </div>
</div>

Tiles Producs and Services - With image

Barquette

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.

 

Boîtes isolantes

Lorem ipsum dolor sit amet consectetur adispicing elit. Integer eu risus ac eros pretium alliquam sit amet ague dolor amet.

 

Conteneurs à coquilles

Lorem ipsum dolor sit amet consectetur adispicing elit. Integer eu risus ac eros pretium alliquam sit amet ague dolor.

 

Contenant pour aliments en vrac

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

 

Emballages de produits de consommation

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

 
Markup Details
                            <div class="products-services products-services--image-text-offset">
    <div class="ps__wrapper">
        <div class="ps__items">
            {% for key, item in productsServicesImageTextOffset %}
                {% include 'products-services-image-text-offset--section.twig' with {
                image: item.image,
                title: item.title,
                description: item.description,
                cta: item.cta
                } only %}
            {% endfor %}
        </div>
    </div>
</div>

Tiles Producs and Services - No image

Contenants spécialisés

Explorez nos alternatives vertes offrant le meilleur rapport rendement-coûts.

Emballages alimentaires

Procurez-vous des emballages efficaces contenant jusqu'à 100 % de matière recyclée.

Emballages d'expédition

Optez pour des emballages solides, écologiques et sur mesure parfaits pour l’expédition.

Emballages industriels

Fiez-vous à nos solutions d’emballage pour le transport et la manutention de vos produits.

Emballages de produits de consommation

Trouvez le bon contenant pour vos besoins avec nos solutions efficientes et innovatrices.

Emballages de protection

Empêchez les dommages des produits grâce à nos emballages aussi résistants qu’écologiques.

Papiers et cartons

Lorem ipsum dolor sit amet consectetur adipiscing elit integer eu risus ac eros lorem ipsum dolor sit lorem ipsum dolor sit.

Vente au détail

Fiez-vous à nos solutions d’emballage pour le transport et la manutention de vos produits.

Programme de récupération

Empêchez les dommages des produits grâce à nos emballages aussi résistants qu’écologiques.
Markup Details
                            <div class="products-services products-services--text">
    <div class="ps__wrapper">
        <div class="ps__items tiles">
            {% for key, item in productsServicesText %}
                {% include 'products-services-text--section.twig' with {
                title: item.title,
                description: item.description,
                cta: item.cta
                } only %}
            {% endfor %}
        </div>
    </div>
</div>