688 lines
58 KiB
PHP
688 lines
58 KiB
PHP
<?php get_header('demo-components'); ?>
|
||
|
||
<div class="page-demo-component">
|
||
|
||
|
||
<!-- HOME -->
|
||
|
||
<section class="demo-components-home">
|
||
<h1>Content system & Design system | Documentation</h1>
|
||
<h2>Bienvenue dans la documentation Homegrade</h2>
|
||
|
||
<p>Vous trouverez ici une Liste de composants du design system Homegrade</p>
|
||
|
||
<div class="buttons">
|
||
<a class="cta cta--white cta--button cta--shadowed" href="#blocks-components">Blocks de contenu</a>
|
||
<a class="cta cta--white cta--button cta--shadowed" href="#css-components">Composants css</a>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- BLOCKS COMPONENTS -->
|
||
<section id="blocks-components" class="demo-components">
|
||
<div class="demo-components__section-title">
|
||
<h2 class="">Block components</h2>
|
||
<h3>Blocks de contenu</h3>
|
||
<p>Ces blocs sont accessibles depuis l'éditeur et peuvent être insérés de manières flexibles dans les pages de contenu</p>
|
||
</div>
|
||
|
||
<ol class="demo-components__chapter_list">
|
||
<li><a href="#demo-component-highlight">Mise en avant</a></li>
|
||
<li><a href="#demo-component-picture-banner">Image Bannière</a></li>
|
||
<li><a href="#demo-component-content-page-header">Content page header</a></li>
|
||
<li><a href="#demo-component-tips-to-know">À savoir / Astuces</a></li>
|
||
<li><a href="#demo-component-staff-list">Liste de membres</a></li>
|
||
<li><a href="#demo-component-timeline">Timeline</a></li>
|
||
</ol>
|
||
<!-- HIGHLIGHT -->
|
||
<article id="demo-component-highlight" class="demo-component">
|
||
<div class="component-explanation">
|
||
<div class="component-explanation__component-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||
<path d="M21,7H3V4A1,1,0,0,1,4,3H20a1,1,0,0,1,1,1ZM3,20V9H21V20a1,1,0,0,1-1,1H4A1,1,0,0,1,3,20Zm3-6H18V12H6Zm0,4h6V16H6Z" />
|
||
</svg>
|
||
</div>
|
||
<h2 class="component-explanation__title">Mise en avant</h2>
|
||
<h3 class="component-explanation__technical-title">highlight</h3>
|
||
<p class="component-explanation__description">Bloc pour mettre en avant des informations importantes</p>
|
||
<div class="component-explanation__options">
|
||
<h3>Options & Variantes</h3>
|
||
<ul>
|
||
<li class="component-explanation__option">
|
||
<h4 class="component-explanation__option-title">Variantes</h4>
|
||
<p class="component-explanation__option-description">
|
||
Choix entre <mark>classic</mark> & <mark>warning</mark>
|
||
</li>
|
||
<li class="component-explanation__option">
|
||
<h4 class="component-explanation__option-title">Logo latéral</h4>
|
||
<p class="component-explanation__option-description">
|
||
Permet l'ajout d'un logo institutionnel sur la partie droite du bloc</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="demo-components__demo-component">
|
||
<p class="demo-components__demo-component__explanatory-title">Version simple</p>
|
||
<section class="wp-block-homegrade-content-blocks-highlight homegrade-blocks-highlight homegrade-blocks-highlight--classic">
|
||
<div class="homegrade-blocks-highlight__titling">
|
||
<div class="icon"><img decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi4zODgiIGhlaWdodD0iMTQuMTg2IiB2aWV3Qm94PSIwIDAgMTIuMzg4IDE0LjE4NiI+CiAgPHBhdGggaWQ9IlRyYWPDqV8xODUzNCIgZGF0YS1uYW1lPSJUcmFjw6kgMTg1MzQiIGQ9Ik05NjAuMjE0LDkyOS40NDJsLTUuMTk0LDQuNzgydjcuNGgxMC4zODh2LTcuNFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC05NTQuMDIgLTkyOC40NDIpIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=" alt=""></div>
|
||
<h3 class="homegrade-blocks-highlight__block-title">Informations complémentaires et inscriptions</h3>
|
||
</div>
|
||
<div class="homegrade-blocks-highlight__content">
|
||
<div class="homegrade-blocks-highlight__content__innerblocks">
|
||
<p>Pour toute question ou pour s’inscrire à l’une de nos formations, contactez-nous via e-mail inscriptions@homegrade.brussels ou par téléphone.</p>
|
||
|
||
|
||
|
||
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
|
||
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Envoyer un e-mail</a></div>
|
||
|
||
|
||
|
||
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="tel:+3222274260">Appeler le 02 227 42 60</a></div>
|
||
|
||
|
||
|
||
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="tel:+3222274269">Appeler le 02 227 42 69</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="demo-components__demo-component">
|
||
<p class="demo-components__demo-component__explanatory-title">Version avec logo</p>
|
||
|
||
<section class="wp-block-homegrade-content-blocks-highlight homegrade-blocks-highlight homegrade-blocks-highlight--classic">
|
||
<div class="homegrade-blocks-highlight__titling">
|
||
<div class="icon"><img decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNy44MDMiIGhlaWdodD0iMTcuNDI2IiB2aWV3Qm94PSIwIDAgMTcuODAzIDE3LjQyNiI+CiAgPHBhdGggaWQ9Ikljb25fZmVhdGhlci1rZXkiIGRhdGEtbmFtZT0iSWNvbiBmZWF0aGVyLWtleSIgZD0iTTE4LjAxMywzbC0xLjU4LDEuNThNMTAuNDIsMTAuNTkzYTQuMzQ2LDQuMzQ2LDAsMSwxLTYuMTQ2LDAsNC4zNDYsNC4zNDYsMCwwLDEsNi4xNDYsMFptMCwwLDMuMjQ4LTMuMjQ4bTAsMCwyLjM3LDIuMzdMMTguOCw2Ljk1MWwtMi4zNy0yLjM3TTEzLjY2OCw3LjM0NiwxNi40MzMsNC41OCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIuMDAxIC0xLjU4NikiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cg==" alt=""></div>
|
||
<h3 class="homegrade-blocks-highlight__block-title">RENOLUTION</h3>
|
||
</div>
|
||
<div class="homegrade-blocks-highlight__content">
|
||
<div class="homegrade-blocks-highlight__content__innerblocks">
|
||
<p>Point de contact privilégié pour tout rénovateur particulier bruxellois, Homegrade se place comme un acteur-clé de RENOLUTION, la Stratégie de rénovation du bâti de la Région de Bruxelles-Capitale.</p>
|
||
|
||
|
||
|
||
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://renolution.brussels/fr" target="_blank" rel="noreferrer noopener">En savoir plus sur RENOLUTION</a></div>
|
||
</div>
|
||
<div class="homegrade-blocks-highlight__logo"><img decoding="async" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/logo-renolution-monochrome.svg' ?>" alt=""></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="demo-components__demo-component">
|
||
<p class="demo-components__demo-component__explanatory-title">Version "warning"</p>
|
||
|
||
<section class="wp-block-homegrade-content-blocks-highlight homegrade-blocks-highlight homegrade-blocks-highlight--warning">
|
||
<div class="homegrade-blocks-highlight__titling">
|
||
<div class="icon"><img decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi4zODgiIGhlaWdodD0iMTQuMTg2IiB2aWV3Qm94PSIwIDAgMTIuMzg4IDE0LjE4NiI+CiAgPHBhdGggaWQ9IlRyYWPDqV8xODUzNCIgZGF0YS1uYW1lPSJUcmFjw6kgMTg1MzQiIGQ9Ik05NjAuMjE0LDkyOS40NDJsLTUuMTk0LDQuNzgydjcuNGgxMC4zODh2LTcuNFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC05NTQuMDIgLTkyOC40NDIpIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=" alt=""></div>
|
||
<h3 class="homegrade-blocks-highlight__block-title">Vérifiez les conditions d’accès</h3>
|
||
</div>
|
||
<div class="homegrade-blocks-highlight__content">
|
||
<div class="homegrade-blocks-highlight__content__innerblocks">
|
||
<p>Pour en savoir plus sur les conditions d’accès aux formations, la procédure d’obtention de l’agrément et les obligations du certificateur, veuillez cliquer sur le bouton ci-dessous.</p>
|
||
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Vérifier les conditions d’accès</a></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
|
||
|
||
</article>
|
||
<!-- PICTURE BANNER -->
|
||
<article id="demo-component-picture-banner" class="demo-component">
|
||
<div class="component-explanation">
|
||
<div class="component-explanation__component-icon">
|
||
<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 537.97 537.25">
|
||
<g id="Calque_1-2" data-name="Calque 1">
|
||
<path class="cls-1" d="m89.21,537.25h359.55v-58.59H89.21v58.59ZM537.88,38.84c0-4.41-.49-9.07-1.93-13.2C530.39,9.59,515.5.02,496.56.02,343.79-.01,191.03,0,38.26.05c-3.62,0-7.39.18-10.84,1.16C10.85,5.95.01,20.61.01,37.97,0,151.79,0,265.61,0,379.43c0,.83-.02,1.66.02,2.5.69,16.69,12.08,30.53,27.38,32.82,3.89.58,7.94.04,11.92.04,76.22,0,152.43,0,228.65,0,77.21,0,154.43.02,231.64-.01,24.42-.01,38.33-14.01,38.34-38.48.01-112.49.03-224.98-.08-337.46Zm-59.82,319.89H59.89V59.4h418.18v299.33Zm-385.9-45.9c5.8,12.31,16.89,15.53,29.43,15.54,98.33,0,196.65.01,294.98-.04,3.64,0,7.36-.29,10.9-1.08,13.79-3.06,21.61-13.93,21.61-30.04.04-67.88.02-135.75,0-203.63,0-1.44-.18-2.88-.27-4.34-1.08-.07-1.74-.17-2.39-.15-25.94.94-44.94,13.48-58.52,35.05-15.84,25.16-23.51,52.96-26.44,82.27-1.02,10.17-1.77,20.36-2.68,30.99-3.84-5.36-7.22-10.62-11.14-15.45-15.04-18.56-32.77-33.53-56.28-40.13-22.01-6.18-42.41-3.44-59.15,13.27-17.3,17.27-29.74,37.89-38.52,60.6-5.38,13.92-9.74,28.23-14.87,43.28-.92-2.72-1.55-4.72-2.27-6.68-6.37-17.29-12.01-34.89-19.34-51.76-7.93-18.25-18.97-34.76-34.27-47.88-9.54-8.18-20.47-13.5-33.82-13.58-.12,1.27-.24,1.92-.24,2.56,0,39.1-.11,78.19.13,117.28.03,4.67,1.16,9.71,3.15,13.93Z" />
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<h2 class="component-explanation__title">Image Bannière</h2>
|
||
<h3 class="component-explanation__technical-title">picture-banner</h3>
|
||
<p class="component-explanation__description">Pour insérer une image bannière fixe ou intégrale</p>
|
||
<div class="component-explanation__options">
|
||
<h3>Options & Variantes</h3>
|
||
<ul>
|
||
<li class="component-explanation__option">
|
||
<h4 class="component-explanation__option-title">Hauter</h4>
|
||
<p class="component-explanation__option-description">
|
||
Si fixe, la bannière est verticalement restreinte et il est alors possible de régler sa position verticale</p>
|
||
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="demo-components__demo-component">
|
||
<div class="wp-block-homegrade-content-blocks-picture-banner homegrade-content-blocks-picture-banner fixed-height">
|
||
<img src="<?php echo get_template_directory_uri() . "/resources/img/demo-img/systeme-de-chauffage-amelioration.jpg" ?>">
|
||
</div>
|
||
</div>
|
||
<div class="demo-components__demo-component">
|
||
<div class="wp-block-homegrade-content-blocks-picture-banner homegrade-content-blocks-picture-banner">
|
||
<img src="<?php echo get_template_directory_uri() . "/resources/img/demo-img/equipe-homegrade-e1698755824363.jpg" ?>">
|
||
</div>
|
||
</div>
|
||
|
||
</article>
|
||
|
||
<!-- CONTENT PAGE HEADER -->
|
||
<article id="demo-component-content-page-header" class="demo-component">
|
||
<div class="component-explanation">
|
||
<div class="component-explanation__component-icon">
|
||
<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 401.94 401.92">
|
||
<defs></defs>
|
||
<g id="Calque_1-2" data-name="Calque 1">
|
||
<path class="cls-1" d="m378.98,212.46h22.87v-23.16h-22.87v23.16Zm22.88-70.39h-22.8v23.02h22.8v-23.02ZM23.05,284.21H0v22.98h23.05v-22.98Zm0-47.48H.15v22.93h22.9v-22.93ZM.24,354.72h22.81v-23.23H.24v23.23Zm378.76-.18h22.87v-23.18h-22.87v23.18ZM154.05,70.49h188.68v-23.24h-188.68v23.24Zm-94.63.01h46.52v-23.11h-46.52v23.11Zm342.51,213.59h-22.82v23.14h22.82v-23.14Zm.01-284.09H.21v117.71h401.72V0Zm-23.3,92.03c0,.48-.2.95-.45,2.04H23.8c-.16-1.47-.4-2.75-.41-4.02-.02-20.67.06-41.33-.09-62-.03-3.65.91-4.87,4.73-4.87,115.33.09,230.65.08,345.98.05,2.73,0,4.77-.03,4.74,3.8-.15,21.66-.09,43.33-.12,65Zm-236.39,309.65h22.86v-22.83h-22.86v22.83Zm141.95.17h23.06v-22.89h-23.06v22.89Zm-47.24,0h22.85v-22.82h-22.85v22.82Zm94.54.02h23.11v-22.87h-23.11v22.87Zm47.48-22.9v22.78h22.96v-22.78h-22.96Zm22.79-142.11h-22.81v22.91h22.81v-22.91ZM.14,401.73h22.91v-22.88H.14v22.88Zm.07-189.19h22.87v-23.16H.21v23.16Zm-.07-47.59h23.05v-22.76H.15v22.76Zm94.7,236.76h22.98v-22.86h-22.98v22.86Zm94.53,0h23.24v-22.8h-23.24v22.8Zm-141.94.21h23.12v-23.03h-23.12v23.03Z" />
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<h2 class="component-explanation__title">
|
||
Content page header
|
||
</h2>
|
||
<h3 class="component-explanation__technical-title">content-page-header</h3>
|
||
|
||
<p class="component-explanation__description">Un header qui s'insère en haut de page</p>
|
||
<div class="component-explanation__options">
|
||
<h3>Options & Variantes</h3>
|
||
<ul>
|
||
<li class="component-explanation__option">
|
||
<h4 class="component-explanation__option-title">Call to action</h4>
|
||
<p class="component-explanation__option-description">
|
||
Ajout d'un lien juste après le contenu. Dans cet exemple "Voir l’équipe de direction de Homegrade"</p>
|
||
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="demo-components__demo-component">
|
||
<div class="block-content-page-header wp-block-homegrade-content-blocks-content-page-header">
|
||
<div class="block-content-page-header__content">
|
||
<h1>Qui sommes-nous ?</h1>
|
||
<h2>Plus de 40 conseillers en rénovation </h2>
|
||
<p>Homegrade, ce sont plus de 40 conseillers en rénovation en majorité architectes, mais également ingénieurs, historiens de l’art… <strong>en formation continue</strong> ! Ces experts de terrain vous fournissent des conseils avisés et professionnels.<br><br>Découvrez notre équipe de direction, composée de professionnels chevronnés qui guident notre asbl vers l’excellence. </p>
|
||
<a class="block-content-page-header__cta-link" href="www.exemple.com">Voir l’équipe de direction de Homegrade</a>
|
||
</div>
|
||
|
||
<img decoding="async" class="block-content-page-header__page-icon" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/homegrade_qui-sommes-nous.svg' ?>" alt="">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</article>
|
||
|
||
<!-- TIPS TO KNOW -->
|
||
<article id="demo-component-tips-to-know" class="demo-component">
|
||
<div class="component-explanation">
|
||
<div class="component-explanation__component-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 91.6 100">
|
||
<g id="Calque_1-2" data-name="Calque 1">
|
||
<path class="cls-1" d="m83.3,8.4v83.3H16.6c-4.2,0-8.3-2.1-8.3-8.3h66.7V0H12.5Q0,0,0,12.5v70.8c0,12.5,10.4,16.7,20.8,16.7h70.8V16.7l-8.3-8.3Zm-45.8,24.9c2.1-12.5,22.9-12.5,22.9,2.1,0,10.4-10.4,18.8-22.9,29.2-12.5-10.4-22.9-18.8-22.9-29.2,0-14.6,20.8-14.6,22.9-2.1Z" />
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<h2 class="component-explanation__title">À savoir / Astuces</h2>
|
||
<h3 class="component-explanation__technical-title">tips-to-know</h3>
|
||
<p class="component-explanation__description">Pour insérer une série de points d'informations</p>
|
||
|
||
</div>
|
||
<div class="demo-components__demo-component">
|
||
<section class="wp-block-homegrade-content-blocks-tips-to-know homegrade-blocks-tips-to-know">
|
||
<div class="wp-block-homegrade-content-blocks-section-titling section_titling section_titling--left">
|
||
<h3 class="section_titling__title">accessibilité À notre point info</h3>
|
||
<p class="section_titling__subtitle">Profitez des transports en commun pour venir dans nos locaux</p>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="wp-block-homegrade-content-blocks-tips-container homegrade-blocks-tips-to-know__tips-container">
|
||
<div class="wp-block-homegrade-content-blocks-tip homegrade-blocks-tips-to-know__tip">
|
||
<div class="homegrade-blocks-tips-to-know__tip-icon"><img decoding="async" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/homegrade_precision.svg' ?>" alt=""></div>
|
||
<div class="tip-content">
|
||
<h4 class="homegrade-blocks-tips-to-know__tip-title">Métro</h4>
|
||
<p>Arrêts aux stations <strong>métro Botanique</strong> et <strong>Madou</strong>.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="wp-block-homegrade-content-blocks-tip homegrade-blocks-tips-to-know__tip">
|
||
<div class="homegrade-blocks-tips-to-know__tip-icon"><img decoding="async" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/homegrade_precision.svg' ?>" alt=""></div>
|
||
<div class="tip-content">
|
||
<h4 class="homegrade-blocks-tips-to-know__tip-title">Trains</h4>
|
||
<p>Gare de <strong>Bruxelles-Central</strong>, arrêt de bus <strong>Quetelet</strong> (65 ou 66).</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="wp-block-homegrade-content-blocks-tip homegrade-blocks-tips-to-know__tip">
|
||
<div class="homegrade-blocks-tips-to-know__tip-icon"><img decoding="async" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/homegrade_precision.svg' ?>" alt=""></div>
|
||
<div class="tip-content">
|
||
<h4 class="homegrade-blocks-tips-to-know__tip-title">Bus</h4>
|
||
<ul>
|
||
<li>Arrêt de bus <strong>Quetelet</strong> (61, 65 et 66) ;</li>
|
||
|
||
|
||
|
||
<li>Arrêt de bus <strong>Gillon</strong> (N04 et T92) – environ 6 minutes de marche ;</li>
|
||
|
||
|
||
|
||
<li>Arrêt de bus <strong>Bossuet</strong> (59 ou 61) – environ 5 minutes de marche ;</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="wp-block-homegrade-content-blocks-tip homegrade-blocks-tips-to-know__tip">
|
||
<div class="homegrade-blocks-tips-to-know__tip-icon"><img decoding="async" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/homegrade_precision.svg' ?>" alt=""></div>
|
||
<div class="tip-content">
|
||
<h4 class="homegrade-blocks-tips-to-know__tip-title">Moyens de locomotions individuels</h4>
|
||
<p>Parking privé disponible pour vélos et voitures* <strong>gratuitement</strong>.</p>
|
||
|
||
|
||
|
||
<p>*Depuis le 1 er janvier 2018, la Région Bruxelles-Capitale est devenue une zone de basses émissions (LEZ). Vérifiez si votre véhicule peut circuler au sein de la zone via <a href="https://lez.brussels/" data-type="link" data-id="https://lez.brussels/" target="_blank" rel="noopener">lez.brussels</a> .</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
|
||
</article>
|
||
|
||
<!-- STAFF LIST -->
|
||
<article id="demo-component-staff-list" class="demo-component">
|
||
<div class="component-explanation">
|
||
<div class="component-explanation__component-icon">
|
||
<svg version="1.1" x="0px" y="0px" viewBox="0 0 128 160">
|
||
<g>
|
||
<circle cx="67" cy="11" r="10" />
|
||
<circle cx="37" cy="21" r="10" />
|
||
<path d="M17,51v36h10v40h20h40h20V87h10V51c0-5.5-4.5-10-10-10L97,51v26H87v40H77V77h10V41c0-5.5-4.5-10-10-10L67,41L57,31 c-5.5,0-10,4.5-10,10v36h10v40H47V77H37V51L27,41C21.5,41,17,45.5,17,51z" />
|
||
<circle cx="97" cy="21" r="10" />
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<h2 class="component-explanation__title">Liste de membres</h2>
|
||
<h3 class="component-explanation__technical-title">staff-list</h3>
|
||
<p class="component-explanation__description">Pour créer une liste de membres d'équipe ou de comité</p>
|
||
|
||
</div>
|
||
<div class="demo-components__demo-component">
|
||
<section class="wp-block-homegrade-content-blocks-staff-list homegrade-blocks-staff-list">
|
||
<h3 class="homegrade-blocks-staff-list__title">comité de direction</h3>
|
||
<h4 class="homegrade-blocks-staff-list__subtitle">Un comité de direction composé de 6 personnes</h4>
|
||
<ul class="homegrade-blocks-staff-list__staff-list">
|
||
<li class="wp-block-homegrade-content-blocks-staff-member homegrade-blocks-staff-member">
|
||
<div class="homegrade-blocks-staff-member__member-icon"><img decoding="async" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ibWFzY290dGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA2MCA2MCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNEw6lncmFkw6lfc2Fuc19ub21fMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMSwgLmNscy0yIHsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiB1cmwoI0TDqWdyYWTDqV9zYW5zX25vbV8zLTIpOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMyIgZGF0YS1uYW1lPSJEw6lncmFkw6kgc2FucyBub20gMyIgeDE9Ii0yMjgwLjI4IiB5MT0iODAuMDMiIHgyPSItMjI3OS4yOSIgeTI9Ijc4Ljk4IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwMzMuNzIgNjIyLjQ3KSBzY2FsZSgyLjYzIC03LjQ0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmMzI4MWQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmU3NjZmIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMy0yIiBkYXRhLW5hbWU9IkTDqWdyYWTDqSBzYW5zIG5vbSAzIiB4MT0iLTIyNzYuMDYiIHkxPSI4MC4wMiIgeDI9Ii0yMjc1LjA2IiB5Mj0iNzguOTciIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwOS4zOCA2MTkuNDUpIHNjYWxlKDIuNjIgLTcuNDQpIiB4bGluazpocmVmPSIjRMOpZ3JhZMOpX3NhbnNfbm9tXzMiLz4KICA8L2RlZnM+CiAgPGcgaWQ9Ikdyb3VwZV81ODYyIiBkYXRhLW5hbWU9Ikdyb3VwZSA1ODYyIj4KICAgIDxnIGlkPSJHcm91cGVfMzE5NSIgZGF0YS1uYW1lPSJHcm91cGUgMzE5NSI+CiAgICAgIDxnIGlkPSJHcm91cGVfZGVfbWFzcXVlc18xIiBkYXRhLW5hbWU9Ikdyb3VwZSBkZSBtYXNxdWVzIDEiPgogICAgICAgIDxnIGlkPSJHcm91cGVfNTU5MyIgZGF0YS1uYW1lPSJHcm91cGUgNTU5MyI+CiAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTUiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTUiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTQiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTQiPgogICAgICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDQiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ0IiBjbGFzcz0iY2xzLTMiIGQ9Im0xMi40Niw1NC4yOWMuMzQtMS4wOS44Mi0yLjUzLDEuNDktNC4xOCwwLDAsLjM2LS44OC43Ny0xLjc5LDEuNjItMy42LDUuMzQtOS40NSw1LjYtOS44NWwxOC45OC02Ljk0LjI5LDcuMjJjMi4wMSwxLjQ0LDMuNzIsMy4yNSw1LjAzLDUuMzQsMSwxLjYxLDEuNzYsMy4zNSwyLjI1LDUuMTguNDIsMS42NS42NCwzLjM0LjY2LDUuMDMiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgPC9nPgogICAgICAgICAgPGcgaWQ9Ikdyb3VwZV81NTk2IiBkYXRhLW5hbWU9Ikdyb3VwZSA1NTk2Ij4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NiIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDYiIGNsYXNzPSJjbHMtMyIgZD0ibTQ3LjA3LDM2LjYxbC0xNC45OSw4LjY1di0xNy4ybDcuNDktMTMuNyw3LjUsNS4wNXYxNy4xOVoiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NyIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDciIGNsYXNzPSJjbHMtMyIgZD0ibTMyLjA4LDQ1LjI2bC0xNC45OC04LjY1di0xNy4xOWwxNC45OCw4LjY1djE3LjE5WiIvPgogICAgICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzIzODQ4IiBkYXRhLW5hbWU9IlRyYWPDqSAyMzg0OCIgY2xhc3M9ImNscy0zIiBkPSJtMTcuMSwxOS40MWw3LjQ5LTEzLjcsMTQuOTgsOC42NS03LjQ5LDEzLjctMTQuOTgtOC42NVoiLz4KICAgICAgICAgIDwvZz4KICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDkiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ5IiBjbGFzcz0iY2xzLTEiIGQ9Im0zNi4zNCwzMy45MWwyLjYzLTEuNTJ2LTUuOTJsLTIuNjMsMS41MXY1LjkzWiIvPgogICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg1MCIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NTAiIGNsYXNzPSJjbHMtMiIgZD0ibTQxLjMyLDMxLjA1bDIuNjItMS41MXYtNS45M2wtMi42MiwxLjUxdjUuOTNaIi8+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=" alt=""></div>
|
||
<div class="homegrade-blocks-staff-member__member-informations">
|
||
<h4 class="homegrade-blocks-staff-member__name">Didier Van Severen</h4>
|
||
<p class="homegrade-blocks-staff-member__position">Directeur général</p>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="wp-block-homegrade-content-blocks-staff-member homegrade-blocks-staff-member">
|
||
<div class="homegrade-blocks-staff-member__member-icon"><img decoding="async" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ibWFzY290dGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA2MCA2MCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNEw6lncmFkw6lfc2Fuc19ub21fMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMSwgLmNscy0yIHsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiB1cmwoI0TDqWdyYWTDqV9zYW5zX25vbV8zLTIpOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMyIgZGF0YS1uYW1lPSJEw6lncmFkw6kgc2FucyBub20gMyIgeDE9Ii0yMjgwLjI4IiB5MT0iODAuMDMiIHgyPSItMjI3OS4yOSIgeTI9Ijc4Ljk4IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwMzMuNzIgNjIyLjQ3KSBzY2FsZSgyLjYzIC03LjQ0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmMzI4MWQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmU3NjZmIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMy0yIiBkYXRhLW5hbWU9IkTDqWdyYWTDqSBzYW5zIG5vbSAzIiB4MT0iLTIyNzYuMDYiIHkxPSI4MC4wMiIgeDI9Ii0yMjc1LjA2IiB5Mj0iNzguOTciIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwOS4zOCA2MTkuNDUpIHNjYWxlKDIuNjIgLTcuNDQpIiB4bGluazpocmVmPSIjRMOpZ3JhZMOpX3NhbnNfbm9tXzMiLz4KICA8L2RlZnM+CiAgPGcgaWQ9Ikdyb3VwZV81ODYyIiBkYXRhLW5hbWU9Ikdyb3VwZSA1ODYyIj4KICAgIDxnIGlkPSJHcm91cGVfMzE5NSIgZGF0YS1uYW1lPSJHcm91cGUgMzE5NSI+CiAgICAgIDxnIGlkPSJHcm91cGVfZGVfbWFzcXVlc18xIiBkYXRhLW5hbWU9Ikdyb3VwZSBkZSBtYXNxdWVzIDEiPgogICAgICAgIDxnIGlkPSJHcm91cGVfNTU5MyIgZGF0YS1uYW1lPSJHcm91cGUgNTU5MyI+CiAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTUiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTUiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTQiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTQiPgogICAgICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDQiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ0IiBjbGFzcz0iY2xzLTMiIGQ9Im0xMi40Niw1NC4yOWMuMzQtMS4wOS44Mi0yLjUzLDEuNDktNC4xOCwwLDAsLjM2LS44OC43Ny0xLjc5LDEuNjItMy42LDUuMzQtOS40NSw1LjYtOS44NWwxOC45OC02Ljk0LjI5LDcuMjJjMi4wMSwxLjQ0LDMuNzIsMy4yNSw1LjAzLDUuMzQsMSwxLjYxLDEuNzYsMy4zNSwyLjI1LDUuMTguNDIsMS42NS42NCwzLjM0LjY2LDUuMDMiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgPC9nPgogICAgICAgICAgPGcgaWQ9Ikdyb3VwZV81NTk2IiBkYXRhLW5hbWU9Ikdyb3VwZSA1NTk2Ij4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NiIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDYiIGNsYXNzPSJjbHMtMyIgZD0ibTQ3LjA3LDM2LjYxbC0xNC45OSw4LjY1di0xNy4ybDcuNDktMTMuNyw3LjUsNS4wNXYxNy4xOVoiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NyIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDciIGNsYXNzPSJjbHMtMyIgZD0ibTMyLjA4LDQ1LjI2bC0xNC45OC04LjY1di0xNy4xOWwxNC45OCw4LjY1djE3LjE5WiIvPgogICAgICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzIzODQ4IiBkYXRhLW5hbWU9IlRyYWPDqSAyMzg0OCIgY2xhc3M9ImNscy0zIiBkPSJtMTcuMSwxOS40MWw3LjQ5LTEzLjcsMTQuOTgsOC42NS03LjQ5LDEzLjctMTQuOTgtOC42NVoiLz4KICAgICAgICAgIDwvZz4KICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDkiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ5IiBjbGFzcz0iY2xzLTEiIGQ9Im0zNi4zNCwzMy45MWwyLjYzLTEuNTJ2LTUuOTJsLTIuNjMsMS41MXY1LjkzWiIvPgogICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg1MCIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NTAiIGNsYXNzPSJjbHMtMiIgZD0ibTQxLjMyLDMxLjA1bDIuNjItMS41MXYtNS45M2wtMi42MiwxLjUxdjUuOTNaIi8+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=" alt=""></div>
|
||
<div class="homegrade-blocks-staff-member__member-informations">
|
||
<h4 class="homegrade-blocks-staff-member__name">Patrick Herregods</h4>
|
||
<p class="homegrade-blocks-staff-member__position">Manager opérationnel</p>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="wp-block-homegrade-content-blocks-staff-member homegrade-blocks-staff-member">
|
||
<div class="homegrade-blocks-staff-member__member-icon"><img decoding="async" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ibWFzY290dGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA2MCA2MCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNEw6lncmFkw6lfc2Fuc19ub21fMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMSwgLmNscy0yIHsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiB1cmwoI0TDqWdyYWTDqV9zYW5zX25vbV8zLTIpOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMyIgZGF0YS1uYW1lPSJEw6lncmFkw6kgc2FucyBub20gMyIgeDE9Ii0yMjgwLjI4IiB5MT0iODAuMDMiIHgyPSItMjI3OS4yOSIgeTI9Ijc4Ljk4IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwMzMuNzIgNjIyLjQ3KSBzY2FsZSgyLjYzIC03LjQ0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmMzI4MWQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmU3NjZmIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMy0yIiBkYXRhLW5hbWU9IkTDqWdyYWTDqSBzYW5zIG5vbSAzIiB4MT0iLTIyNzYuMDYiIHkxPSI4MC4wMiIgeDI9Ii0yMjc1LjA2IiB5Mj0iNzguOTciIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwOS4zOCA2MTkuNDUpIHNjYWxlKDIuNjIgLTcuNDQpIiB4bGluazpocmVmPSIjRMOpZ3JhZMOpX3NhbnNfbm9tXzMiLz4KICA8L2RlZnM+CiAgPGcgaWQ9Ikdyb3VwZV81ODYyIiBkYXRhLW5hbWU9Ikdyb3VwZSA1ODYyIj4KICAgIDxnIGlkPSJHcm91cGVfMzE5NSIgZGF0YS1uYW1lPSJHcm91cGUgMzE5NSI+CiAgICAgIDxnIGlkPSJHcm91cGVfZGVfbWFzcXVlc18xIiBkYXRhLW5hbWU9Ikdyb3VwZSBkZSBtYXNxdWVzIDEiPgogICAgICAgIDxnIGlkPSJHcm91cGVfNTU5MyIgZGF0YS1uYW1lPSJHcm91cGUgNTU5MyI+CiAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTUiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTUiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTQiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTQiPgogICAgICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDQiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ0IiBjbGFzcz0iY2xzLTMiIGQ9Im0xMi40Niw1NC4yOWMuMzQtMS4wOS44Mi0yLjUzLDEuNDktNC4xOCwwLDAsLjM2LS44OC43Ny0xLjc5LDEuNjItMy42LDUuMzQtOS40NSw1LjYtOS44NWwxOC45OC02Ljk0LjI5LDcuMjJjMi4wMSwxLjQ0LDMuNzIsMy4yNSw1LjAzLDUuMzQsMSwxLjYxLDEuNzYsMy4zNSwyLjI1LDUuMTguNDIsMS42NS42NCwzLjM0LjY2LDUuMDMiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgPC9nPgogICAgICAgICAgPGcgaWQ9Ikdyb3VwZV81NTk2IiBkYXRhLW5hbWU9Ikdyb3VwZSA1NTk2Ij4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NiIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDYiIGNsYXNzPSJjbHMtMyIgZD0ibTQ3LjA3LDM2LjYxbC0xNC45OSw4LjY1di0xNy4ybDcuNDktMTMuNyw3LjUsNS4wNXYxNy4xOVoiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NyIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDciIGNsYXNzPSJjbHMtMyIgZD0ibTMyLjA4LDQ1LjI2bC0xNC45OC04LjY1di0xNy4xOWwxNC45OCw4LjY1djE3LjE5WiIvPgogICAgICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzIzODQ4IiBkYXRhLW5hbWU9IlRyYWPDqSAyMzg0OCIgY2xhc3M9ImNscy0zIiBkPSJtMTcuMSwxOS40MWw3LjQ5LTEzLjcsMTQuOTgsOC42NS03LjQ5LDEzLjctMTQuOTgtOC42NVoiLz4KICAgICAgICAgIDwvZz4KICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDkiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ5IiBjbGFzcz0iY2xzLTEiIGQ9Im0zNi4zNCwzMy45MWwyLjYzLTEuNTJ2LTUuOTJsLTIuNjMsMS41MXY1LjkzWiIvPgogICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg1MCIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NTAiIGNsYXNzPSJjbHMtMiIgZD0ibTQxLjMyLDMxLjA1bDIuNjItMS41MXYtNS45M2wtMi42MiwxLjUxdjUuOTNaIi8+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=" alt=""></div>
|
||
<div class="homegrade-blocks-staff-member__member-informations">
|
||
<h4 class="homegrade-blocks-staff-member__name">Eglantine Daumerie</h4>
|
||
<p class="homegrade-blocks-staff-member__position">Adjointe au Manager opérationnel</p>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="wp-block-homegrade-content-blocks-staff-member homegrade-blocks-staff-member">
|
||
<div class="homegrade-blocks-staff-member__member-icon"><img decoding="async" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ibWFzY290dGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA2MCA2MCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNEw6lncmFkw6lfc2Fuc19ub21fMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMSwgLmNscy0yIHsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiB1cmwoI0TDqWdyYWTDqV9zYW5zX25vbV8zLTIpOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMyIgZGF0YS1uYW1lPSJEw6lncmFkw6kgc2FucyBub20gMyIgeDE9Ii0yMjgwLjI4IiB5MT0iODAuMDMiIHgyPSItMjI3OS4yOSIgeTI9Ijc4Ljk4IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwMzMuNzIgNjIyLjQ3KSBzY2FsZSgyLjYzIC03LjQ0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmMzI4MWQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmU3NjZmIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMy0yIiBkYXRhLW5hbWU9IkTDqWdyYWTDqSBzYW5zIG5vbSAzIiB4MT0iLTIyNzYuMDYiIHkxPSI4MC4wMiIgeDI9Ii0yMjc1LjA2IiB5Mj0iNzguOTciIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwOS4zOCA2MTkuNDUpIHNjYWxlKDIuNjIgLTcuNDQpIiB4bGluazpocmVmPSIjRMOpZ3JhZMOpX3NhbnNfbm9tXzMiLz4KICA8L2RlZnM+CiAgPGcgaWQ9Ikdyb3VwZV81ODYyIiBkYXRhLW5hbWU9Ikdyb3VwZSA1ODYyIj4KICAgIDxnIGlkPSJHcm91cGVfMzE5NSIgZGF0YS1uYW1lPSJHcm91cGUgMzE5NSI+CiAgICAgIDxnIGlkPSJHcm91cGVfZGVfbWFzcXVlc18xIiBkYXRhLW5hbWU9Ikdyb3VwZSBkZSBtYXNxdWVzIDEiPgogICAgICAgIDxnIGlkPSJHcm91cGVfNTU5MyIgZGF0YS1uYW1lPSJHcm91cGUgNTU5MyI+CiAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTUiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTUiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTQiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTQiPgogICAgICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDQiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ0IiBjbGFzcz0iY2xzLTMiIGQ9Im0xMi40Niw1NC4yOWMuMzQtMS4wOS44Mi0yLjUzLDEuNDktNC4xOCwwLDAsLjM2LS44OC43Ny0xLjc5LDEuNjItMy42LDUuMzQtOS40NSw1LjYtOS44NWwxOC45OC02Ljk0LjI5LDcuMjJjMi4wMSwxLjQ0LDMuNzIsMy4yNSw1LjAzLDUuMzQsMSwxLjYxLDEuNzYsMy4zNSwyLjI1LDUuMTguNDIsMS42NS42NCwzLjM0LjY2LDUuMDMiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgPC9nPgogICAgICAgICAgPGcgaWQ9Ikdyb3VwZV81NTk2IiBkYXRhLW5hbWU9Ikdyb3VwZSA1NTk2Ij4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NiIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDYiIGNsYXNzPSJjbHMtMyIgZD0ibTQ3LjA3LDM2LjYxbC0xNC45OSw4LjY1di0xNy4ybDcuNDktMTMuNyw3LjUsNS4wNXYxNy4xOVoiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NyIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDciIGNsYXNzPSJjbHMtMyIgZD0ibTMyLjA4LDQ1LjI2bC0xNC45OC04LjY1di0xNy4xOWwxNC45OCw4LjY1djE3LjE5WiIvPgogICAgICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzIzODQ4IiBkYXRhLW5hbWU9IlRyYWPDqSAyMzg0OCIgY2xhc3M9ImNscy0zIiBkPSJtMTcuMSwxOS40MWw3LjQ5LTEzLjcsMTQuOTgsOC42NS03LjQ5LDEzLjctMTQuOTgtOC42NVoiLz4KICAgICAgICAgIDwvZz4KICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDkiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ5IiBjbGFzcz0iY2xzLTEiIGQ9Im0zNi4zNCwzMy45MWwyLjYzLTEuNTJ2LTUuOTJsLTIuNjMsMS41MXY1LjkzWiIvPgogICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg1MCIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NTAiIGNsYXNzPSJjbHMtMiIgZD0ibTQxLjMyLDMxLjA1bDIuNjItMS41MXYtNS45M2wtMi42MiwxLjUxdjUuOTNaIi8+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=" alt=""></div>
|
||
<div class="homegrade-blocks-staff-member__member-informations">
|
||
<h4 class="homegrade-blocks-staff-member__name">Caroline Vanhauw</h4>
|
||
<p class="homegrade-blocks-staff-member__position">Manager Projets</p>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="wp-block-homegrade-content-blocks-staff-member homegrade-blocks-staff-member">
|
||
<div class="homegrade-blocks-staff-member__member-icon"><img decoding="async" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ibWFzY290dGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA2MCA2MCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNEw6lncmFkw6lfc2Fuc19ub21fMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMSwgLmNscy0yIHsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiB1cmwoI0TDqWdyYWTDqV9zYW5zX25vbV8zLTIpOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMyIgZGF0YS1uYW1lPSJEw6lncmFkw6kgc2FucyBub20gMyIgeDE9Ii0yMjgwLjI4IiB5MT0iODAuMDMiIHgyPSItMjI3OS4yOSIgeTI9Ijc4Ljk4IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwMzMuNzIgNjIyLjQ3KSBzY2FsZSgyLjYzIC03LjQ0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmMzI4MWQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmU3NjZmIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMy0yIiBkYXRhLW5hbWU9IkTDqWdyYWTDqSBzYW5zIG5vbSAzIiB4MT0iLTIyNzYuMDYiIHkxPSI4MC4wMiIgeDI9Ii0yMjc1LjA2IiB5Mj0iNzguOTciIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwOS4zOCA2MTkuNDUpIHNjYWxlKDIuNjIgLTcuNDQpIiB4bGluazpocmVmPSIjRMOpZ3JhZMOpX3NhbnNfbm9tXzMiLz4KICA8L2RlZnM+CiAgPGcgaWQ9Ikdyb3VwZV81ODYyIiBkYXRhLW5hbWU9Ikdyb3VwZSA1ODYyIj4KICAgIDxnIGlkPSJHcm91cGVfMzE5NSIgZGF0YS1uYW1lPSJHcm91cGUgMzE5NSI+CiAgICAgIDxnIGlkPSJHcm91cGVfZGVfbWFzcXVlc18xIiBkYXRhLW5hbWU9Ikdyb3VwZSBkZSBtYXNxdWVzIDEiPgogICAgICAgIDxnIGlkPSJHcm91cGVfNTU5MyIgZGF0YS1uYW1lPSJHcm91cGUgNTU5MyI+CiAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTUiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTUiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTQiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTQiPgogICAgICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDQiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ0IiBjbGFzcz0iY2xzLTMiIGQ9Im0xMi40Niw1NC4yOWMuMzQtMS4wOS44Mi0yLjUzLDEuNDktNC4xOCwwLDAsLjM2LS44OC43Ny0xLjc5LDEuNjItMy42LDUuMzQtOS40NSw1LjYtOS44NWwxOC45OC02Ljk0LjI5LDcuMjJjMi4wMSwxLjQ0LDMuNzIsMy4yNSw1LjAzLDUuMzQsMSwxLjYxLDEuNzYsMy4zNSwyLjI1LDUuMTguNDIsMS42NS42NCwzLjM0LjY2LDUuMDMiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgPC9nPgogICAgICAgICAgPGcgaWQ9Ikdyb3VwZV81NTk2IiBkYXRhLW5hbWU9Ikdyb3VwZSA1NTk2Ij4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NiIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDYiIGNsYXNzPSJjbHMtMyIgZD0ibTQ3LjA3LDM2LjYxbC0xNC45OSw4LjY1di0xNy4ybDcuNDktMTMuNyw3LjUsNS4wNXYxNy4xOVoiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NyIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDciIGNsYXNzPSJjbHMtMyIgZD0ibTMyLjA4LDQ1LjI2bC0xNC45OC04LjY1di0xNy4xOWwxNC45OCw4LjY1djE3LjE5WiIvPgogICAgICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzIzODQ4IiBkYXRhLW5hbWU9IlRyYWPDqSAyMzg0OCIgY2xhc3M9ImNscy0zIiBkPSJtMTcuMSwxOS40MWw3LjQ5LTEzLjcsMTQuOTgsOC42NS03LjQ5LDEzLjctMTQuOTgtOC42NVoiLz4KICAgICAgICAgIDwvZz4KICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDkiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ5IiBjbGFzcz0iY2xzLTEiIGQ9Im0zNi4zNCwzMy45MWwyLjYzLTEuNTJ2LTUuOTJsLTIuNjMsMS41MXY1LjkzWiIvPgogICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg1MCIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NTAiIGNsYXNzPSJjbHMtMiIgZD0ibTQxLjMyLDMxLjA1bDIuNjItMS41MXYtNS45M2wtMi42MiwxLjUxdjUuOTNaIi8+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=" alt=""></div>
|
||
<div class="homegrade-blocks-staff-member__member-informations">
|
||
<h4 class="homegrade-blocks-staff-member__name">Hélène Rombaux</h4>
|
||
<p class="homegrade-blocks-staff-member__position">Manager RH et Administratif</p>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="wp-block-homegrade-content-blocks-staff-member homegrade-blocks-staff-member">
|
||
<div class="homegrade-blocks-staff-member__member-icon"><img decoding="async" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ibWFzY290dGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA2MCA2MCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNEw6lncmFkw6lfc2Fuc19ub21fMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMSwgLmNscy0yIHsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiB1cmwoI0TDqWdyYWTDqV9zYW5zX25vbV8zLTIpOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMyIgZGF0YS1uYW1lPSJEw6lncmFkw6kgc2FucyBub20gMyIgeDE9Ii0yMjgwLjI4IiB5MT0iODAuMDMiIHgyPSItMjI3OS4yOSIgeTI9Ijc4Ljk4IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwMzMuNzIgNjIyLjQ3KSBzY2FsZSgyLjYzIC03LjQ0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmMzI4MWQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmU3NjZmIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMy0yIiBkYXRhLW5hbWU9IkTDqWdyYWTDqSBzYW5zIG5vbSAzIiB4MT0iLTIyNzYuMDYiIHkxPSI4MC4wMiIgeDI9Ii0yMjc1LjA2IiB5Mj0iNzguOTciIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwOS4zOCA2MTkuNDUpIHNjYWxlKDIuNjIgLTcuNDQpIiB4bGluazpocmVmPSIjRMOpZ3JhZMOpX3NhbnNfbm9tXzMiLz4KICA8L2RlZnM+CiAgPGcgaWQ9Ikdyb3VwZV81ODYyIiBkYXRhLW5hbWU9Ikdyb3VwZSA1ODYyIj4KICAgIDxnIGlkPSJHcm91cGVfMzE5NSIgZGF0YS1uYW1lPSJHcm91cGUgMzE5NSI+CiAgICAgIDxnIGlkPSJHcm91cGVfZGVfbWFzcXVlc18xIiBkYXRhLW5hbWU9Ikdyb3VwZSBkZSBtYXNxdWVzIDEiPgogICAgICAgIDxnIGlkPSJHcm91cGVfNTU5MyIgZGF0YS1uYW1lPSJHcm91cGUgNTU5MyI+CiAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTUiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTUiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTQiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTQiPgogICAgICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDQiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ0IiBjbGFzcz0iY2xzLTMiIGQ9Im0xMi40Niw1NC4yOWMuMzQtMS4wOS44Mi0yLjUzLDEuNDktNC4xOCwwLDAsLjM2LS44OC43Ny0xLjc5LDEuNjItMy42LDUuMzQtOS40NSw1LjYtOS44NWwxOC45OC02Ljk0LjI5LDcuMjJjMi4wMSwxLjQ0LDMuNzIsMy4yNSw1LjAzLDUuMzQsMSwxLjYxLDEuNzYsMy4zNSwyLjI1LDUuMTguNDIsMS42NS42NCwzLjM0LjY2LDUuMDMiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgPC9nPgogICAgICAgICAgPGcgaWQ9Ikdyb3VwZV81NTk2IiBkYXRhLW5hbWU9Ikdyb3VwZSA1NTk2Ij4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NiIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDYiIGNsYXNzPSJjbHMtMyIgZD0ibTQ3LjA3LDM2LjYxbC0xNC45OSw4LjY1di0xNy4ybDcuNDktMTMuNyw3LjUsNS4wNXYxNy4xOVoiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NyIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDciIGNsYXNzPSJjbHMtMyIgZD0ibTMyLjA4LDQ1LjI2bC0xNC45OC04LjY1di0xNy4xOWwxNC45OCw4LjY1djE3LjE5WiIvPgogICAgICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzIzODQ4IiBkYXRhLW5hbWU9IlRyYWPDqSAyMzg0OCIgY2xhc3M9ImNscy0zIiBkPSJtMTcuMSwxOS40MWw3LjQ5LTEzLjcsMTQuOTgsOC42NS03LjQ5LDEzLjctMTQuOTgtOC42NVoiLz4KICAgICAgICAgIDwvZz4KICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDkiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ5IiBjbGFzcz0iY2xzLTEiIGQ9Im0zNi4zNCwzMy45MWwyLjYzLTEuNTJ2LTUuOTJsLTIuNjMsMS41MXY1LjkzWiIvPgogICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg1MCIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NTAiIGNsYXNzPSJjbHMtMiIgZD0ibTQxLjMyLDMxLjA1bDIuNjItMS41MXYtNS45M2wtMi42MiwxLjUxdjUuOTNaIi8+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=" alt=""></div>
|
||
<div class="homegrade-blocks-staff-member__member-informations">
|
||
<h4 class="homegrade-blocks-staff-member__name">Marilène De Mol</h4>
|
||
<p class="homegrade-blocks-staff-member__position">Coordinatrice Réseau Habitat</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
|
||
|
||
</article>
|
||
|
||
|
||
<!-- TIMELINE -->
|
||
<article id="demo-component-timeline" class="demo-component">
|
||
<div class="component-explanation">
|
||
<div class="component-explanation__component-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 125" x="0px" y="0px">
|
||
<title>130all</title>
|
||
<path d="M31.34,16.75a9.19,9.19,0,1,0-11.69,8.83V41.13a9.18,9.18,0,0,0,0,17.67V74.34a9.19,9.19,0,1,0,5,0V58.79a9.18,9.18,0,0,0,0-17.67V25.59A9.2,9.2,0,0,0,31.34,16.75Z" />
|
||
<rect x="38.45" y="3.26" width="38.58" height="27.14" />
|
||
<rect x="38.45" y="36.39" width="48.58" height="27.14" />
|
||
<rect x="38.45" y="69.6" width="38.58" height="27.14" />
|
||
</svg>
|
||
</div>
|
||
<h2 class="component-explanation__title">Timeline</h2>
|
||
<h3 class="component-explanation__technical-title">timeline</h3>
|
||
<p class="component-explanation__description">Pour la création de timeline</p>
|
||
<div class="component-explanation__options">
|
||
<h3>Options & Variantes</h3>
|
||
<ul>
|
||
<li class="component-explanation__option">
|
||
<h4 class="component-explanation__option-title">Image par ligne / Image latérale </h4>
|
||
<p class="component-explanation__option-description">
|
||
Si <mark>image latérale</mark>, il n'y a pas une image par ligne de timline, mais seulement une image latérale à gauche servant d'illustrations globale</p>
|
||
|
||
</li>
|
||
<li class="component-explanation__option">
|
||
<h4 class="component-explanation__option-title">Proportions d'images </h4>
|
||
<p class="component-explanation__option-description">
|
||
Si <mark>image par ligne</mark>, il est possible de choisir de choisir entre trois proportions carrés, moyennes, hautes </p>
|
||
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="demo-components__demo-component">
|
||
<p class="demo-components__demo-component__explanatory-title">Version avec illustration latérale</p>
|
||
|
||
<section class="wp-block-homegrade-content-blocks-timeline homegrade-blocks-timeline homegrade-blocks-timeline--has-step-icons homegrade-blocks-timeline--has-no-step-pictures
|
||
homegrade-blocks-timeline--has-lateral-cover"><img decoding="async" class="homegrade-blocks-timeline__lateral-cover" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/homegrade_qui-sommes-nous-engagements.svg' ?>" alt="">
|
||
<div class="homegrade-blocks-timeline__innercontent">
|
||
<div class="wp-block-homegrade-content-blocks-timeline-step homegrade-blocks-timeline-step">
|
||
<div class="homegrade-blocks-timeline-step__content">
|
||
<div class="homegrade-blocks-timeline-step__icon"><img decoding="async" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/homegrade_engagements.svg' ?>" alt=""></div>
|
||
<div class="homegrade-blocks-timeline-step__text-content">
|
||
<h3 class="homegrade-blocks-timeline-step__title">Labellisations</h3>
|
||
<p class="homegrade-blocks-timeline-step__subtitle"></p>
|
||
<p>Homegrade est certifié par le <a href="https://www.ecodyn.brussels/" target="_blank" data-type="link" data-id="https://www.ecodyn.brussels/" rel="noreferrer noopener">Label Entreprise Écodynamique</a>, une reconnaissance pour son engagement à réduire son impact environnemental. De plus, l’entreprise détient le <a href="https://isit-be.org/fr/le-label-numerique-responsable" target="_blank" data-type="link" data-id="https://isit-be.org/fr/le-label-numerique-responsable" rel="noreferrer noopener">Label Numérique Responsable</a>, témoignant de sa démarche crédible dans l’amélioration continue de sa responsabilité numérique.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="wp-block-homegrade-content-blocks-timeline-step homegrade-blocks-timeline-step">
|
||
<div class="homegrade-blocks-timeline-step__content">
|
||
<div class="homegrade-blocks-timeline-step__icon"><img decoding="async" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/homegrade_engagements.svg' ?>" alt=""></div>
|
||
<div class="homegrade-blocks-timeline-step__text-content">
|
||
<h3 class="homegrade-blocks-timeline-step__title">Inclusivité</h3>
|
||
<p class="homegrade-blocks-timeline-step__subtitle"></p>
|
||
<p>Participation à différents programmes initiés par Equal brussels, notamment aux actions en matière de <strong>Gendermainstreaming</strong> et de <strong>handistreaming</strong>.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="wp-block-homegrade-content-blocks-timeline-step homegrade-blocks-timeline-step">
|
||
<div class="homegrade-blocks-timeline-step__content">
|
||
<div class="homegrade-blocks-timeline-step__icon"><img decoding="async" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/homegrade_engagements.svg' ?>" alt=""></div>
|
||
<div class="homegrade-blocks-timeline-step__text-content">
|
||
<h3 class="homegrade-blocks-timeline-step__title">Service d’impression</h3>
|
||
<p class="homegrade-blocks-timeline-step__subtitle"></p>
|
||
<p>Homegrade privilégie, dans la mesure du possible, l’impression de ses différents supports sur un <strong>papier FSC</strong>, <strong>écologique</strong> <strong>et recyclé et avec une encre végétale</strong>.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="wp-block-homegrade-content-blocks-timeline-step homegrade-blocks-timeline-step">
|
||
<div class="homegrade-blocks-timeline-step__content">
|
||
<div class="homegrade-blocks-timeline-step__icon"><img decoding="async" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/homegrade_engagements.svg' ?>" alt=""></div>
|
||
<div class="homegrade-blocks-timeline-step__text-content">
|
||
<h3 class="homegrade-blocks-timeline-step__title">Service de livraison</h3>
|
||
<p class="homegrade-blocks-timeline-step__subtitle"></p>
|
||
<p>Homegrade passe par une entreprise bruxelloise pour livrer ses publications… <strong>à vélo cargo</strong> !</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="wp-block-homegrade-content-blocks-timeline-step homegrade-blocks-timeline-step">
|
||
<div class="homegrade-blocks-timeline-step__content">
|
||
<div class="homegrade-blocks-timeline-step__icon"><img decoding="async" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/homegrade_engagements.svg' ?>" alt=""></div>
|
||
<div class="homegrade-blocks-timeline-step__text-content">
|
||
<h3 class="homegrade-blocks-timeline-step__title">Accessibilité numérique</h3>
|
||
<p class="homegrade-blocks-timeline-step__subtitle"></p>
|
||
<p>Homegrade offre un service d’accompagnement aux Bruxellois en situation de précarité numérique grâce à un <strong>service d’attelle numérique</strong>.</p>
|
||
|
||
|
||
|
||
<p><a href="http://homegrade.local/declaration-acessibilite/" target="_blank" data-type="page" data-id="2686" rel="noreferrer noopener">Déclaration d’accessibilité</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="demo-components__demo-component">
|
||
<p class="demo-components__demo-component__explanatory-title">Version avec images par ligne</p>
|
||
|
||
<section class="wp-block-homegrade-content-blocks-timeline homegrade-blocks-timeline homegrade-blocks-timeline--has-step-icons homegrade-blocks-timeline--has-step-pictures">
|
||
<div class="homegrade-blocks-timeline__innercontent">
|
||
<div class="wp-block-homegrade-content-blocks-timeline-step homegrade-blocks-timeline-step homegrade-blocks-chapitre-thematique">
|
||
<figure class="homegrade-blocks-timeline-step__cover"><img decoding="async" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/halles-saint-gery-haut.jpg' ?>" alt="Halles de Saint-Géry à Bruxelles">
|
||
<figcaption>
|
||
<p class="caption">Halles de Saint-Géry
|
||
© EmDee</p>
|
||
</figcaption>
|
||
</figure>
|
||
<div class="homegrade-blocks-timeline-step__content">
|
||
<div class="homegrade-blocks-timeline-step__icon"><img decoding="async" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/homegrade_travaux.svg' ?>"></div>
|
||
<div class="homegrade-blocks-timeline-step__text-content">
|
||
<h3 class="homegrade-blocks-timeline-step__title">1988 – 2017</h3>
|
||
<p class="homegrade-blocks-timeline-step__subtitle">Le Centre Urbain</p>
|
||
<p>Le Centre Urbain a été créé en 1988, à l’initiative d’Inter-Environnement Bruxelles (IEB) et du Brusselse Raad voor het Leefmilieu (BRAL), dans le but de <strong>promouvoir l’information des habitants</strong> de la Région de Bruxelles-Capitale en matière <strong>d’environnement et de défense d’un cadre de vie de qualité, de logement et de sa réhabilitation</strong>, <strong>de rénovation urbaine, d’urbanisme et d’aménagement du territoire, d’utilisation rationnelle de l’énergie</strong>, etc. : ce que l’on appelle communément aujourd’hui le développement durable. À l’origine, les principaux services assurés étaient les suivants :</p>
|
||
|
||
|
||
|
||
<ul>
|
||
<li>un conseil en <strong>rénovation</strong> ;</li>
|
||
|
||
|
||
|
||
<li>un conseil relatif au<strong> bail</strong> et à la<strong> location</strong> des logements ;</li>
|
||
|
||
|
||
|
||
<li>un conseil en <strong>environnement</strong> ;</li>
|
||
|
||
|
||
|
||
<li>l’inventaire des<strong> locaux industriels vacants</strong> (repris par la SDRB).</li>
|
||
</ul>
|
||
|
||
|
||
|
||
<p>L’association a progressivement développé une expertise en matière d’<strong>habitat</strong> et a développé divers outils au service de la population. C’est ainsi que le Centre Urbain a créé, corollaires au conseil en rénovation :</p>
|
||
|
||
|
||
|
||
<ul>
|
||
<li>le conseil en<strong> patrimoine </strong>(créé en 1992 et développé à partir de 1997) ;</li>
|
||
|
||
|
||
|
||
<li>l’Agence Bruxelloise de l’Énergie (en 1996). L’<strong>ABEA</strong> est un service du Centre Urbain, développé dans le cadre juridique de l’asbl ;</li>
|
||
|
||
|
||
|
||
<li>le service d’expertise en <strong>isolation acoustique</strong> (en 2004) ;</li>
|
||
|
||
|
||
|
||
<li>le centre d’information en <strong>éco-construction</strong> (en 2008) ;</li>
|
||
|
||
|
||
|
||
<li>le <strong>facilitateur urbanisme</strong> (en 2011).</li>
|
||
</ul>
|
||
|
||
|
||
|
||
<p>Il a également :</p>
|
||
|
||
|
||
|
||
<ul>
|
||
<li>assuré la <strong>coordination du Réseau Habitat</strong> et le conseil en rénovation local auprès des associations du Réseau ;</li>
|
||
|
||
|
||
|
||
<li>mené des missions d’incitation à la rénovation et de préservation du patrimoine dans le cadre des <strong>contrats de quartiers </strong>de la Ville de Bruxelles.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="wp-block-homegrade-content-blocks-timeline-step homegrade-blocks-timeline-step homegrade-blocks-chapitre-thematique">
|
||
<figure class="homegrade-blocks-timeline-step__cover"><img decoding="async" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/maison-energie-huis-haut.jpg' ?>" alt="MAISONENERGIEHUIS"></figure>
|
||
<div class="homegrade-blocks-timeline-step__content">
|
||
<div class="homegrade-blocks-timeline-step__icon"><img decoding="async" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/homegrade_bruxelles.svg' ?>"></div>
|
||
<div class="homegrade-blocks-timeline-step__text-content">
|
||
<h3 class="homegrade-blocks-timeline-step__title">2013 – 2017</h3>
|
||
<p class="homegrade-blocks-timeline-step__subtitle">La Maison de l’Énergie</p>
|
||
<p><strong>Les Maisons de l’Énergie</strong> ont été créées à partir de 2013. Elles offraient un <strong>service intégré, concret, de proximité et gratuit</strong>. <strong>Six structures locales</strong> accueillaient le grand public, locataires comme propriétaires. Des <strong>permanences</strong> étaient organisées pour guider les Bruxellois, en proposant des conseils personnalisés, des visites à domicile et un accompagnement durant les chantiers. De petits travaux (pose de vannes thermostatiques, isolation de tuyaux, etc.) pouvaient également être réalisés, et ce gratuitement. Les Maisons de l’Énergie informaient également le public des solutions possibles de financement.</p>
|
||
|
||
|
||
|
||
<p>En septembre 2015, la<strong> fusion des six Maisons de l’Énergie locales</strong> a été mise en œuvre, pour arriver à la création d’une nouvelle association, la<strong> Maison Bruxelloise de l’Énergie et de l’Environnement (MBEE)</strong>. Elle s’adressait à tout public et pouvait accomplir tous les actes se rapportant directement ou indirectement à l’<strong>amélioration du cadre de vie dans les logements bruxellois et à la réduction de leur impact écologique</strong> au sens large. Un des premiers principes d’intervention de la Maison de l’Energie était de favoriser le contact direct avec les citoyens afin de stimuler le passage à l’acte en matière d’économie d’énergie dans les logements.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
|
||
</article>
|
||
|
||
|
||
|
||
</section>
|
||
|
||
<!-- CSS COMPONENTS -->
|
||
|
||
<section id="css-components" class="demo-components">
|
||
<div class="demo-components__section-title">
|
||
<h2>CSS components</h2>
|
||
<h3>Composants CSS</h3>
|
||
<p>Ces blocs existent dans le design système, mais sont utilisés de manière automatique dans les pages </p>
|
||
|
||
</div>
|
||
|
||
<!-- BOUTONS -->
|
||
<article class="buttons component">
|
||
<div class="component-explanation">
|
||
<h2 class="component-explanation__title">Boutons</h2>
|
||
<p class="component-explanation__description">différent boutons</p>
|
||
</div>
|
||
|
||
<div class="buttons-example">
|
||
<a class="cta cta--primary cta--button" href="#" target="_blank">Bouton Primaire</a>
|
||
<a class="cta cta--secondary cta--button" href="#" target="_blank">Bouton Secondaire</a>
|
||
<a class="cta cta--outline cta--button" href="#" target="_blank">Bouton Outline</a>
|
||
<a class="cta cta--button cta--shadowed" href="#" target="_blank">Bouton White Shadowed</a>
|
||
|
||
</div>
|
||
</article>
|
||
|
||
<!-- HEADING BOX -->
|
||
<article id="heading-box" class="component">
|
||
<div class="component-explanation">
|
||
<h2 class="component-explanation__title">
|
||
Heading Box
|
||
</h2>
|
||
<p class="component-explanation__description">Pour le titrage de pages. L'icone et le titre sont intégrées automatiquement depuis les informations de page</p>
|
||
</div>
|
||
<?php
|
||
get_template_part("template-components/heading-box", null, array(
|
||
"title" => "Heading Box",
|
||
"description" => "Bonjour ! je suis une belle boite de titrage",
|
||
"pageIcon" => array(
|
||
"url" => get_template_directory_uri() . "/resources/img/pictogrammes/pictogramme-formulaire.svg"
|
||
)
|
||
));
|
||
?>
|
||
|
||
</article>
|
||
|
||
<!-- NEWS HEADING BOX -->
|
||
<article id="news-heading-box" class="component">
|
||
<div class="component-explanation">
|
||
<h2 class="component-explanation__title">News Heading Box</h2>
|
||
<p class="component-explanation__description">Pour le titrage de pages. L'icone et le titre sont intégrées automatiquement depuis les informations de page</p>
|
||
</div>
|
||
<?php
|
||
get_template_part("template-components/news-heading-box", null, array(
|
||
"news_type" => array(get_term(88, "news_type")),
|
||
"title" => "Boite de titrage News",
|
||
"thumbnail" => get_the_post_thumbnail(2271, "full", array('class' => 'news-heading-box__thumbnail')),
|
||
"published" => get_the_date()
|
||
));
|
||
?>
|
||
|
||
</article>
|
||
<article id="chapter-header" class="component post-conseil-page--acoustique">
|
||
<div class="component-explanation">
|
||
<h2 class="component-explanation__title">Chapter Header</h2>
|
||
<p class="component-explanation__description">Bloc Supérieur de titrage pour les fiches conseils. Les couleurs et les illustrations sont attribués automatiquement en fonction de la thématique courante. Le bouton de téléchargement de brochure est affiché automatiquement lorsque la brochure est disponible </p>
|
||
</div>
|
||
|
||
|
||
<?php get_template_part('template-components/post-conseils/chapter-header', null, array(
|
||
"test" => "test",
|
||
'ID' => 1243,
|
||
)); ?>
|
||
</article>
|
||
|
||
|
||
|
||
|
||
|
||
</section>
|
||
|
||
|
||
</div>
|
||
|
||
<?php
|
||
get_footer('demo-components');
|