133 lines
5.2 KiB
PHP
133 lines
5.2 KiB
PHP
<?php get_header('demo-components'); ?>
|
||
|
||
<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>
|
||
<article class="component">
|
||
|
||
<div class="component-explanation">
|
||
<h2 class="component-explanation__title">Content page header</h2>
|
||
<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="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="http://homegrade.local/wp-content/uploads/2023/10/homegrade-icone-de-page-qui-sommes-nous.svg" alt="">
|
||
|
||
</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">
|
||
<div class="component-explanation">
|
||
<h2 class="component-explanation__title">Chapter Header</h2>
|
||
<p class="component-explanation__description">Pour le heading des chapitres conseils</p>
|
||
</div>
|
||
<?php get_template_part('template-components/post-conseils/chapter-header'); ?>
|
||
</article>
|
||
|
||
|
||
|
||
</section>
|
||
|
||
|
||
|
||
<?php
|
||
get_footer('demo-components');
|