Content system & Design system | Documentation

Bienvenue dans la documentation Homegrade

Vous trouverez ici une Liste de composants du design system Homegrade

Blocks de contenu Composants css

Block components

Blocks de contenu

Ces blocs sont accessibles depuis l'éditeur et peuvent être insérés de manières flexibles dans les pages de contenu

  1. Titre
  2. Titre de section
  3. Image Bannière
  4. Texte + image
  5. Aside
  6. Mise en avant
  7. Plus loin
  8. Content page header
  9. À savoir / Astuces
  10. Liste de membres
  11. Timeline
  12. Shéma + Légende
  13. Schéma de thématique
  14. Content Box

Blocs génériques

Titre

content-heading

Pour insérer un titre dans un post ou dans une page.

Options & Variantes

  • Niveau Hiérarchique

    Choix entre h3, h4 et h5 permettant de gérer la strucutre hiérarchique des titres

Un titre superbe et magnifique

Titre de section

section-title

Pour insérer un bloc de titrage composé d'un titre et d'un sous-titre.

Options & Variantes

  • Alignement du texte

    Choix entre gauche, centre et droite

Contrat de gestion

Consultez les contrats de gestion

Image Bannière

picture-banner

Pour insérer une image bannière fixe ou intégrale

Options & Variantes

  • Hauteur

    Si fixe, la bannière est verticalement restreinte et il est alors possible de régler sa position verticale

Hauteur fixe

">

Hauteur originale

Texte + image

text-image

Bloc de texte & image latéral

Options & Variantes

  • Disposition

    Choix entre gauche et droite pour ajuster la position du texte par rapport à l'image

  • Proportion de l'image

    Choix entre original, moyen et carré permettant d'adapter la taille de l'image selon son format

Version alignement à gauche

Version alignement à droite

Aside

aside

Pour un apparté, un texte secondaire ou un focus particulier

Mise en avant

highlight

Bloc pour mettre en avant des informations importantes

Options & Variantes

  • Variantes

    Choix entre classic, warning & gris

  • Logo latéral

    Permet l'ajout d'un logo institutionnel sur la partie droite du bloc

Version simple

Version avec logo

Version "warning"

Version "gris"

Plus Loin

plus-loin

Bloc pour mettre en avant des informations pour aller plus loin

Content page header

content-page-header

Un header qui s'insère en haut de page

Options & Variantes

  • Call to action

    Ajout d'un lien juste après le contenu. Dans cet exemple "Voir l’équipe de direction de Homegrade"

À savoir / Astuces

tips-to-know

Pour insérer une série de points d'informations

Liste de membres

staff-list

Pour créer une liste de membres d'équipe ou de comité

130all

Timeline

timeline

Pour la création de timeline

Options & Variantes

  • Image par ligne / Image latérale

    Si image latérale, il n'y a pas une image par ligne de timline, mais seulement une image latérale à gauche servant d'illustrations globale

  • Proportions d'images

    Si image par ligne, il est possible de choisir de choisir entre trois proportions carrés, moyennes, hautes

Version avec illustration latérale

Version avec images par ligne

130all

Vocabulaire de la fiche

vocabulaire-summary

Pour la création de timeline

Options & Variantes

  • Image par ligne / Image latérale

    Si image latérale, il n'y a pas une image par ligne de timline, mais seulement une image latérale à gauche servant d'illustrations globale

  • Proportions d'images

    Si image par ligne, il est possible de choisir de choisir entre trois proportions carrés, moyennes, hautes

Version avec illustration latérale

Version avec images par ligne

Schéma + Légende

focused-shema

Bloc de Gestion schéma. Insérer un schéma et insérez-y la légende nécéssaire à l'aide de points de focus.

Schéma de thématique avec points de focus

focused-thematique

Bloc en tête thématique avec points de focus

Content Box

content-box

Section / Boite de gestion contenu pouvant contenir plusieurs type de contenu. Le bloc prend toute la largeur, mais la zone de contenu intérieure est restreinte.

Options & Variantes

  • Couleur de fond

    la couleur de fond peut être blanche ou grise

Version contenant un block "titre de section" et des blocks "cards en colonne"

Version contenant un block "titre de section" et un "block monoblock"

Version contenant un block "titre de section" et un "block monoblock", intégrant lui même un block accordéon

CSS components

Composants CSS

Ces blocs existent dans le design système, mais sont utilisés de manière automatique dans les pages

Heading Box

Pour le titrage de pages. L'icone et le titre sont intégrées automatiquement depuis les informations de page

"Heading Box", "description" => "Bonjour ! je suis une belle boite de titrage", "pageIcon" => array( "url" => get_template_directory_uri() . "/resources/img/pictogrammes/pictogramme-formulaire.svg" ) )); ?>

News Heading Box

Pour le titrage de pages. L'icone et le titre sont intégrées automatiquement depuis les informations de page

"Boite de titrage News", "news_type" => get_the_terms(4949, 'news_type'), "thumbnail" => get_the_post_thumbnail(4949, "full", array('class' => 'heading-box--news__thumbnail')), "published" => get_the_date() )); ?>

Chapter Header

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

805, 'subtitle' => __("Les conseillers Homegrade vous guident", "homegrade-theme__texte-fonctionnel"), 'title' => get_the_title(805), 'hasInfoCapsule' => true, )); ?> ?>