Exemples du composant Classeur
Découvrez les différentes façons d'utiliser le composant Classeur dans vos templates.
Exemple Simple
Ça serait pas mal, non?
Classeur avec titre et contenu
Voici un exemple simple du composant classeur avec un titre et du contenu textuel. Ce composant est conçu pour être flexible et réutilisable dans tout le site.
Le contenu peut être formaté en HTML ou en Markdown et sera correctement rendu à l'intérieur du classeur.
Avec Image
Classeur avec image à droite
Ce classeur inclut une image positionnée à droite du contenu textuel. Sur mobile, l'image apparaîtra au-dessus du texte.
Vous pouvez personnaliser la position de l'image (gauche, droite, haut, bas) selon vos besoins de mise en page.
Image à Gauche
Classeur avec image à gauche
Dans cet exemple, l'image est positionnée à gauche du contenu. Cette configuration est utile pour créer une variété visuelle dans la présentation de vos sections.
Avec Boutons
Classeur avec boutons d'action
Vous pouvez ajouter des boutons d'action à votre classeur pour encourager l'engagement des utilisateurs.
Notre Vision
Connectée à soi-même, à son collectif et son environment.
Nous imaginons un monde où chacun·e se sent connecté·e à soi-même, à son collectif et son environment. Une connection tellement évidente et présente que quoi que l'on fasse ou que l'on choisisse, instinctivement cela va nourrir le Vivant avec un grand V et non le détruire.
Contenu Personnalisé
Utilisation avancée avec contenu complexe
Contenu personnalisé
Vous pouvez inclure n'importe quel contenu HTML complexe dans le classeur en utilisant la syntaxe de "call".
{% call binderSection(...) %} Nouvelles options
- showIntroPhrase: Affiche ou masque la phrase "Ça serait pas mal, non?"
- showCircles: Affiche ou masque les cercles concentriques
- binderVision: Composant spécial pour afficher la vision avec cercles concentriques étiquetés
- customClass: Pour ajouter des classes CSS personnalisées